- React Basics These are the non‑negotiables — the foundation of everything else.
Components — the building blocks of React
JSX — HTML inside JavaScript
Props — passing data into components
State — storing and updating data
Events — handling clicks, inputs, forms
Conditional Rendering — show/hide UI
Lists & Keys — rendering arrays
Once you understand these, you can build simple apps.
- React Hooks Hooks are the heart of modern React.
useState — manage component state
useEffect — run code on load, update, cleanup
useRef — store values without re-render
useContext — global state without Redux
These unlock real interactivity.
- React Project Structure Learn how a real project is organized:
src/components/
src/pages/
src/hooks/
src/services/
src/context/
This is what makes your code scalable.
- React Routing For multi‑page apps:
Navigation
Protected routes
Dynamic routes
Layout components
Every real app uses routing.
- API Integration Learn how to connect React to a backend:
fetch()
axios
GET / POST / PUT / DELETE
Handling loading & errors
This is where your React app becomes useful.
- State Management When your app grows, you need global state:
Context API
Redux Toolkit
Zustand (lightweight alternative)
Startups often use Context or Zustand because they’re simple.
- React UI Styling Choose one styling approach:
CSS Modules
Tailwind CSS
Styled Components
Material UI
Tailwind is the fastest for startups.
- Authentication You’ll need this for login systems:
JWT
Protected routes
Storing tokens
Role-based access
This ties directly into the login system you’re building.
- React Best Practices Learn how to write clean, scalable code:
Component reusability
Folder structure
Avoiding prop drilling
Using custom hooks
Performance optimization