React – 100+ Lab Exercises (Basic, Intermediate, Advanced)

🔰 Basic Level (30+ Exercises)

Goal: Build strong fundamentals in React component-based architecture and UI development.

Core Concepts & Setup

• Set up React development environment (Create React App, Vite).

• Create and render functional components.

• Understand JSX syntax and usage.

• Use props to pass data between components.

• Manage component state with useState hook.

Event Handling & Conditional Rendering

• Implement event handlers (onClick, onChange).

• Conditional rendering using ternary and logical operators.

• Render lists using map() with keys.

• Build simple forms and handle input data.

• Use React Developer Tools for debugging.

Styling & Layout

• Apply inline styles and CSS modules.

• Use styled-components for dynamic styling.

• Build responsive layouts with Flexbox and Grid.

• Implement CSS animations/transitions.

• Use third-party UI libraries (Material-UI, Bootstrap).

🚀 Intermediate Level (40+ Exercises)

Goal: Develop proficiency in advanced React features, state management, and API integration.

State & Lifecycle

• Understand component lifecycle in class components.

• Use useEffect hook for side effects and data fetching.

• Manage complex state with useReducer.

• Implement Context API for global state.

• Handle forms with validation and controlled components.

Routing & Navigation

• Set up React Router for multi-page SPA.

• Create nested routes and dynamic route parameters.

• Protect routes with authentication logic.

• Implement lazy loading and code splitting.

• Use history and navigation programmatically.

Data Fetching & Integration

• Fetch data using Fetch API and Axios.

• Manage asynchronous logic with async/await.

• Handle loading, error, and empty states.

• Implement optimistic UI updates.

• Integrate with RESTful APIs and GraphQL.

Testing & Debugging

• Write unit tests with Jest and React Testing Library.

• Perform snapshot testing.

• Debug performance issues with Profiler.

• Use error boundaries for graceful error handling.

🧠 Advanced Level (40+ Exercises)

Goal: Master React ecosystem, performance tuning, architecture, and full-stack integration.

Advanced Patterns & Performance

• Implement Higher-Order Components (HOCs).

• Use render props pattern.

• Optimize rendering with React.memo and useCallback.

• Virtualize long lists with react-window / react-virtualized.

• Apply Suspense for data fetching and code splitting.

State Management Libraries

• Integrate Redux with Redux Toolkit.

• Use middleware like redux-thunk and redux-saga.

• Manage state with MobX or Recoil.

• Combine Context API with external state libraries.

• Architect scalable state management for large apps.

Server-Side Rendering & Static Sites

• Build SSR apps with Next.js.

• Use Incremental Static Regeneration (ISR).

• Implement Static Site Generation (SSG).

• Manage data fetching on server vs client.

• Optimize SEO and performance.

Full-Stack React

• Connect React frontend with Node.js/Express backend.

• Use WebSockets for real-time features.

• Implement authentication (OAuth, JWT).

• Deploy React apps with CI/CD pipelines.

• Integrate with cloud services (Firebase, AWS Amplify).

Capstone Projects

• Build a complex e-commerce SPA with cart and checkout.

• Create a social media feed with real-time updates.

• Develop a dashboard with dynamic data visualizations.

• Architect a multi-tenant SaaS React application.

• Implement an offline-first Progressive Web App (PWA).

✅ Tools & Ecosystem

• React 18+, Redux Toolkit, React Router v6

• Jest, React Testing Library

• Next.js, Vercel deployment

• Axios, GraphQL/Apollo Client

• Docker, CI/CD with GitHub Actions