React JS: Beginner to Advanced
Learn React from the first mental model through components, state, effects, context, performance, testing, TypeScript, and project planning.
This is one technology path. Learn React, Next.js, Node.js, JavaScript basics, and future tracks separately at your own pace.
coverage.map
Topics this track covers
React Foundations
Start with the mental model: React builds user interfaces from small pieces of JavaScript.
- What React is - 8 min
- How React renders UI - 8 min
- Project files and app entry - 8 min
Browser Basics Behind React
Understand the DOM, events, Shadow DOM, and React rendering model so React feels less magical.
- What the DOM is - 8 min
- React render and commit - 8 min
- Event bubbling - 8 min
- Shadow DOM and React - 8 min
JSX and Components
Write JSX, create components, and compose simple UI pieces.
- JSX basics - 8 min
- Function components - 8 min
- Composing components - 8 min
Props and Data Flow
Pass information into components and understand one-way data flow.
- Passing props - 8 min
- Rendering lists - 8 min
- Children prop - 8 min
State and Events
Make components respond to user actions and remember changing values.
- useState basics - 8 min
- Handling clicks - 8 min
- Form input state - 8 min
Conditional UI and Lists
Show different UI based on data and render collections safely.
- Conditional rendering - 8 min
- Empty and loading states - 8 min
- Updating arrays in state - 8 min
Effects and External Data
Use effects carefully and understand how React talks to systems outside rendering.
- What useEffect is for - 8 min
- Effect dependencies - 8 min
- Fetching data safely - 8 min
Component Design
Design components that are clear, reusable, and easy to change.
- Presentational components - 8 min
- Container components - 8 min
- Reusable component APIs - 8 min
Hooks in Depth
Use common hooks without making components harder than they need to be.
- useRef basics - 8 min
- useMemo basics - 8 min
- Custom hooks - 8 min
Context and App State
Share values through a tree without passing props through every level.
- Context basics - 8 min
- Provider pattern - 8 min
- Context performance - 8 min
Performance Fundamentals
Learn the beginner-safe performance ideas before advanced optimization.
- Rendering cost - 8 min
- React.memo - 8 min
- Code splitting idea - 8 min
Error Handling and Debugging
Find problems calmly and build UI that explains failures.
- Reading React errors - 8 min
- Error boundaries - 8 min
- Debugging state - 8 min
Testing React
Learn what to test and how to think about confidence.
- Testing mindset - 8 min
- Component test basics - 8 min
- What not to over-test - 8 min
React with TypeScript
Use types to make component data clearer and safer.
- Typing props - 8 min
- Typing state - 8 min
- Event types - 8 min
Modern JavaScript for React
Learn the JavaScript features that appear constantly in React examples.
- Arrow functions and callbacks - 8 min
- Destructuring and spread - 8 min
- Modules and imports - 8 min
Forms in React
Handle form submission, input types, validation, and user feedback.
- Submitting a form - 8 min
- Select, checkbox, and radio inputs - 8 min
- Form validation and errors - 8 min
Styling, Routing, and Special UI APIs
Learn how React apps add styles, page movement, portals, and loading boundaries.
- Styling React components - 8 min
- Routing concept - 8 min
- Portals and Suspense - 8 min
More Hooks and Advanced Patterns
Learn reducers, callback memoization, transitions, and legacy patterns you may see in older code.
- useReducer - 8 min
- useCallback - 8 min
- Transitions and older patterns - 8 min
Routing, Frameworks, and Next Steps
Understand where React ends and frameworks like Next.js begin.
- React versus frameworks - 8 min
- Client and server thinking - 8 min
- Build a small React project - 8 min
Production React Mindset
Learn the habits that make React screens usable, reliable, and easier to ship.
- Accessible React components - 8 min
- Server data and loading states - 8 min
- Debugging and shipping checklist - 8 min