React from your first component
Build your first interface one concept at a time: JSX, props, events, state, forms, lists, shared state and a filterable reading list.
Prerequisite: JavaScript foundations: functions, objects, arrays and callbacks. No TypeScript required. · 161 minutes of guided study
Start here before the intermediate framework labs. Each example is self-contained; replace the previous example instead of pasting them together.
Start first lesson →What you’ll be able to do
- Set up and render your first component
- Reuse a component with props
- Respond to a click with state
- Make an input and a form work together
- Render a list and an empty state
- Share state between two components
- Use an effect only for an external system
- Project · Build a filterable reading list
How to study this course
Follow the numbered modules. Read the example, explain why it works, attempt the exercise, then compare your result with the supplied checks.
Setup: Install Node.js 22.12+ (or a supported newer LTS). In a terminal run: npm create vite@latest codingneed-react -- --template react. Then cd codingneed-react, npm install, and npm run dev. Open the local URL printed by Vite. Replace src/App.jsx with ONE lesson example at a time. JSX renders a browser interface; it is not a plain console script.
Times estimate guided reading and practice. Projects and revision can take longer.
Course syllabus · 8 lessons
1 · Get comfortable
2 · Build one skill at a time
- Respond to a click with state18 min · Project environment →
State remembers a value between renders.
- Make an input and a form work together18 min · Project environment →
A controlled input displays the value held in state.
- Render a list and an empty state18 min · Project environment →
Map data to elements and give each item a stable identity.
3 · Connect, test and build
- Share state between two components18 min · Project environment →
The nearest shared parent owns state that siblings need.
- Use an effect only for an external system18 min · Project environment →
Effects synchronize with things outside React, and may need cleanup.
- Project · Build a filterable reading list35 min · Project environment →
Combine small concepts into one interface with clear ownership.