LearnReact
React Fundamentals
Learn React from first principles: components, JSX, props vs state, events, lists, conditional rendering, effects, composition, and data fetching.
~10h10 lessonsintermediatejavascript
0 of 10 lessons complete
About this course
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.
Syllabus
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
02
State, Events & Rendering
useState, controlled inputs, lists/keys, conditional rendering, and what actually triggers a re-render.
- State With useStateUnlimitedFinish the lesson, Pass the quick check and pass the coding challenge in "Props: Passing Data Into Components" to unlock this lesson.15m
- Events & Controlled InputsUnlimitedFinish the lesson, Pass the quick check and pass the coding challenge in "State With useState" to unlock this lesson.15m
- Rendering Lists With KeysUnlimitedFinish the lesson and pass the quick check in "Events & Controlled Inputs" to unlock this lesson.15m
- Conditional RenderingUnlimitedFinish the lesson and pass the quick check in "JSX: Markup That Is Actually JavaScript" to unlock this lesson.12m
03
Effects, Composition & Data
Effects and when to avoid them, lifting state up, composition, and fetching data safely.
- Effects, and When NOT to Use ThemUnlimitedFinish the lesson, Pass the quick check and pass the coding challenge in "State With useState" to unlock this lesson.14m
- Lifting State Up and CompositionUnlimitedFinish the lesson, Pass the quick check and pass the coding challenge in "State With useState" to unlock this lesson.14m
- Fetching Data: Loading, Error, EmptyUnlimitedFinish the lesson and pass the quick check in "Effects, and When NOT to Use Them" to unlock this lesson.16m
- Filterable Product DashboardUnlimitedComplete "Fetching Data: Loading, Error, Empty" to unlock this project.~6h