| 1 |
Web Foundations |
- HTML, CSS, JavaScript
- ES6+ (Modern JavaScript)
- TypeScript
|
Create a simple static website using modern HTML, CSS, and JavaScript. |
| 2 |
Development Tools |
- Package Manager (npm/yarn)
- Build Tools (Vite/CRA)
- Version Control (Git)
|
Set up a new project using Vite and use Git for version control. |
| 3 |
React - Fundamentals |
- JSX - JavaScript XML
- Components (Function vs. Class)
- Props & State
- Conditional Rendering, Lists & Keys
|
Build a basic React component that displays data using props and manages its own state. |
| 4 |
Hooks & Component Lifecycle |
- useState, useEffect
- useContext, useReducer
- Creating Custom Hooks
|
Refactor a class component into a functional component using `useState` and `useEffect`. |
| 5 |
Global State Management |
- Context API
- Redux (with Redux Toolkit)
- Zustand / Jotai
|
Create a small application that shares state between multiple components using the Context API. |
| 6 |
Routing & API Interaction |
- React Router
- API Calls (Fetch/Axios)
- React Query / SWR
|
Build a multi-page application using React Router and fetch data from a public API. |
| 7 |
Testing |
- Jest
- React Testing Library
- Cypress / Playwright
|
Write unit tests for a React component to ensure it renders correctly. |
| 8 |
Optimization & Ecosystem |
- Performance Optimization
- UI Component Libraries
- Next.js
|
Optimize a React application and explore a component library like Material-UI. |