javascript · intermediate
React Fundamentals
Learn React from first principles: components, JSX, props vs state, events, lists, conditional rendering, effects, composition, and data fetching.
~10hReact10 lessons
A practical, misconception-aware introduction to React. You will build a real mental model of what a component is, how props differ from state, when re-renders happen, and how to fetch data safely -- ending with a filterable dashboard capstone.
Module 01
Components, JSX & Props
What React components actually are, how JSX compiles, and how data flows in via props.
- What a Component Really IsLevel 1 · Complete beginner · Pass the quick check to continue12m
- JSX: Markup That Is Actually JavaScriptFinish the lesson and pass the quick check in "What a Component Really Is" to unlock this lesson.12m
- Props: Passing Data Into ComponentsFinish the lesson and pass the quick check in "JSX: Markup That Is Actually JavaScript" to unlock this lesson.14m
Module 02
State, Events & Rendering
useState, controlled inputs, lists/keys, conditional rendering, and what actually triggers a re-render.
- State With useStateFinish the lesson, Pass the quick check and pass the coding challenge in "Props: Passing Data Into Components" to unlock this lesson.15m
- Events & Controlled InputsFinish the lesson, Pass the quick check and pass the coding challenge in "State With useState" to unlock this lesson.15m
- Rendering Lists With KeysFinish the lesson and pass the quick check in "Events & Controlled Inputs" to unlock this lesson.15m
- Conditional RenderingFinish the lesson and pass the quick check in "JSX: Markup That Is Actually JavaScript" to unlock this lesson.12m
Module 03
Effects, Composition & Data
Effects and when to avoid them, lifting state up, composition, and fetching data safely.
- Effects, and When NOT to Use ThemFinish the lesson, Pass the quick check and pass the coding challenge in "State With useState" to unlock this lesson.14m
- Lifting State Up and CompositionFinish the lesson, Pass the quick check and pass the coding challenge in "State With useState" to unlock this lesson.14m
- Fetching Data: Loading, Error, EmptyFinish the lesson and pass the quick check in "Effects, and When NOT to Use Them" to unlock this lesson.16m
- Filterable Product DashboardComplete "Fetching Data: Loading, Error, Empty" to unlock this project.~6h