React Example
jsx
function Greeting({ name }) {
return <h1>Hello, {name}</h1>
}
const root = ReactDOM.createRoot(mount)
root.render(<Greeting name="Ada" />)Guided tutorial track
React Tutorial
Learn React with function components and hooks — JSX, props, state, effects, context and custom hooks, every example runnable in the browser.
Tutorial overview
Start here, then move through the chapters
This tutorial is designed to be followed in order. Read the chapter, practice with the editor, test your understanding, and move toward completion.
Lessons
37
Sections
13
Access
Free
Level
intermediate
Ready to begin?
Start with lesson one and follow the tutorial step by step.
This tutorial teaches React from a first component to an app with state, effects and custom hooks - using function components and hooks throughout, because that is what React is today. Every example runs on the page, JSX and all.
A component, and the state inside it
jsx
function Counter() {
const [count, setCount] = React.useState(0)
return (
<div>
<h2>Clicked {count} times</h2>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
)
}
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<Counter />)What React actually is
React is a library for building interfaces out of components - functions that take data and return a description of what should be on screen.
The idea that makes it work: you never write instructions to change the page. You describe what the page should look like for the current state, and React works out the smallest set of changes to get there. Press the button beside this and watch it happen.
Why it replaced writing DOM code by hand
Plain JavaScript makes you say how to update: find the element, read its text, change it, remember to change the other three things that depend on it. Miss one and the screen disagrees with your data.
React makes you say what it should look like. The state changes, the component re-runs, the screen follows. That one shift is why the library exists and why it is worth learning properly rather than by copying.
What this tutorial covers
- Foundations - JSX, components, props and how data flows in one direction.
- State and events -
useState, handling input, and why state is immutable. - Rendering - conditionals, lists, keys and the mistakes keys are there to prevent.
- Forms - controlled inputs, validation and multi-field state.
- Effects -
useEffect, cleanup, dependency arrays and fetching data. - Advanced hooks - refs, context, reducers, memoisation and writing your own.
- Structure - composition, file layout and the patterns real apps settle on.
Sixteen sections in a deliberate order: nothing uses an idea you have not met yet, and hooks are introduced one at a time rather than as a list.
JSX is not magic
jsx
// This JSX...
const element = <h1 className="title">Hello</h1>
// ...compiles to exactly this:
const same = React.createElement("h1", { className: "title" }, "Hello")
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
<div>
{element}
{same}
</div>
)Everything here runs
Every code block has a Run button. JSX is compiled in your browser, so there is no install, no bundler and no waiting - change a line, run it again.
That matters more in React than anywhere else, because most React confusion is about when something re-runs. Seeing it is faster than reading about it.
What you need before you start
Solid JavaScript: functions, arrow functions, array methods like map and filter, destructuring, and the spread operator. React leans on all of them constantly.
If any of that is unfamiliar, work through the JavaScript tutorial first. Nearly everyone who finds React confusing is actually finding modern JavaScript confusing.
How long this takes
Components, props and state take a few evenings and are enough to build something real. That first third is the steepest part.
Effects are where most people stall, because the dependency array is genuinely subtle. It is worth going slowly there rather than pushing on and copying useEffect calls you do not understand.
Context, reducers and memoisation are quicker, because by then you are learning tools for problems you have already had.
Common questions
No. Hooks replaced them in 2019 and new code does not use them. You will meet this.state in old tutorials and Stack Overflow answers, which is worth recognising, but nothing here teaches it.
Not instead - after. Next.js is a framework built on React, so every component, prop and hook here still applies. Starting with Next.js means never being sure which of the two is confusing you.
Not to learn React, and adding it now doubles what is new at once. Most professional React is TypeScript, so pick it up afterwards - everything you learn here carries over unchanged.
In development, React deliberately runs components twice to surface side effects that should not be there. It does not happen in production, and the effects chapter explains what it is trying to tell you.
Almost certainly not at first. useState handles most components and Context handles most of the rest. Reach for a state library when you have a problem those two cannot solve, not before.
The learning path
Work through these in order. Each part builds on the one before it, and every part lists what it covers and roughly how long it takes.
React Introduction
3 lessons18 min
What Is React · How React Thinks · Your First Component
Start this partJSX
3 lessons18 min
JSX Explained · Expressions in JSX · JSX Rules and Gotchas
Start this partComponents and Props
5 lessons30 min
Composing Components · What a Component Can Return · Passing Props …
Start this partState and Reducers
4 lessons24 min
useState Explained · Updating State Correctly · Structuring State …
Start this partHandling Events
2 lessons12 min
Handling Events · Events and State Together
Start this partConditional Rendering
2 lessons12 min
Conditional Rendering · Showing, Hiding and Losing State
Start this partLists and Keys
2 lessons12 min
Rendering Lists · Keys Explained
Start this partForms and Inputs
2 lessons12 min
Controlled Inputs · Form Submission and Validation
Start this partEffects and Refs
4 lessons24 min
useEffect Explained · Effect Dependencies · Effect Cleanup …
Start this partData and Errors
3 lessons18 min
Fetching Data · Error Boundaries · forwardRef, Portals and Lazy Loading
Start this partContext
2 lessons12 min
useContext Explained · Context Patterns
Start this partPerformance
2 lessons12 min
Memoisation in React · Avoiding Unnecessary Renders
Start this partCustom Hooks and Patterns
3 lessons18 min
Writing Custom Hooks · Component Patterns · Where to Go Next
Start this partYour path
Learn it · Practise it · Prepare it · Prove it
- 01
Learn it
Work through the lessons
37 lessons - 02
Practise it
Build and debug from each lesson
370 challenges - Not available yet: 03
Prepare it
Interview questions, coding and spoken
Coming soon - 04
Prove it
Pass the assessment, earn the certificate
Certificate available
What You Will Learn
React Introduction
JSX
Components and Props
State and Reducers
Handling Events
Conditional Rendering
Lists and Keys
Forms and Inputs
Effects and Refs
Practice Live
Read the lesson, edit code in the Try-It editor, and see the result instantly.
Tutorial Features
Code examples inside chapters
Each topic is supported with practical examples so the tutorial stays easy to follow.
Practice with the Try It Editor
Open the browser editor and test what you just learned without leaving the site.
Quiz for self-check
Use the assessment flow to test whether the chapters are really understood.
Certificate after completion
Complete the learning flow and move toward a verifiable completion certificate.
How to Use This Tutorial
Learn the chapter
Follow the lessons in order so each new concept builds on the previous one.
Practice the example
Open the Try It Editor and apply the idea immediately while it is fresh.
Test your understanding
Use the quiz and progress flow to confirm the topic is really understood.
Finish with proof
Complete the tutorial journey and move toward a verifiable certificate.
Complete the tutorial with confidence
Finish the lessons, take the assessment, and move toward a certificate that can be verified on the site. The structure is meant to help you learn, practice, and complete the topic properly.
Certificate verification
Publicly verifiable after successful completion.
Why Learn React
Easy to Learn
React is explained with beginner friendly chapters and examples.
Essential Skill
Understand the core building blocks before moving into advanced topics.
Build Real Websites
Use each lesson as a practical step toward real web development.