React Tutorial
Learn React from scratch: components, props, state, forms, lists and effects
Beginner to Intermediate6 lessonsabout 28 min of reading
This React tutorial is for people who already know basic HTML, CSS and JavaScript (variables, functions, arrays, objects, arrow functions) and want to build real user interfaces. If you have been copy-pasting React snippets without being sure why they work, the lessons here fill in the mental model that makes the rest of the ecosystem easier to learn.
Every lesson uses modern React: function components and hooks, with TypeScript-friendly examples that also work as plain JavaScript if you drop the type annotations. Each example is small enough to paste into a fresh Vite or Next.js project and run. Instead of listing APIs, the lessons explain why React behaves the way it does, and call out the mistakes that cause the most confusing bugs for beginners: mutated state, missing keys, stale values and infinite effect loops.
The lessons are ordered so that each one builds on the previous: first components and JSX, then props, then state, then events and forms, then lists and conditional rendering, and finally effects and data fetching. By the end you will be able to build a small but complete app, such as a todo list or a profile search page, and read other people's React code with confidence.
React lessons
- 1React Introduction: Components, JSX and Your First AppLearn what React is, how JSX works and how to build your first component, with a Vite or Next.js setup and the beginner mistakes to avoid early on.5 min read
- 2React Components and PropsLearn React components and props: pass data to children, set default values, use the children prop for composition and understand one-way data flow.4 min read
- 3React useState Hook: Managing StateLearn the React useState hook: counters, form fields, updating objects and arrays immutably, batched updates and lifting state up, with clear examples.4 min read
- 4React Events and Forms: Controlled InputsHandle React events and build forms with controlled inputs: onClick, onChange, onSubmit, preventDefault, uncontrolled inputs and simple validation.5 min read
- 5React Lists, Keys and Conditional RenderingRender lists in React with map, choose correct keys, filter data, and use conditional rendering safely with && and ternaries, including empty states.5 min read
- 6React useEffect: Side Effects and Fetching DataLearn the React useEffect hook: dependency arrays, cleanup, fetching data with loading and error states, and how to avoid the infinite loop mistake.5 min read
Preparing for an interview? Practise React interview questions
Learning React to land a job? Browse open roles or check which skills are trending.