React Example
html
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
<p>I am learning HTML</p>
</body>
</html>Guided tutorial track
Learn React with function components and hooks — JSX, props, state, effects, context and custom hooks, every example runnable in the browser.
Tutorial overview
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 />)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.
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.
useState, handling input, and why state is immutable.useEffect, cleanup, dependency arrays and fetching data.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>
)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.
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.
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.
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.
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
Learn it
Work through the lessons
Practise it
Build and debug from each lesson
Prepare it
Interview questions, coding and spoken
Prove it
Pass the assessment, earn the certificate
React Introduction
JSX
Components and Props
State and Reducers
Handling Events
Conditional Rendering
Lists and Keys
Forms and Inputs
Effects and Refs
Read the lesson, edit code in the Try-It editor, and see the result instantly.
Each topic is supported with practical examples so the tutorial stays easy to follow.
Open the browser editor and test what you just learned without leaving the site.
Use the assessment flow to test whether the chapters are really understood.
Complete the learning flow and move toward a verifiable completion certificate.
Follow the lessons in order so each new concept builds on the previous one.
Open the Try It Editor and apply the idea immediately while it is fresh.
Use the quiz and progress flow to confirm the topic is really understood.
Complete the tutorial journey and move toward a verifiable certificate.
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.
React is explained with beginner friendly chapters and examples.
Understand the core building blocks before moving into advanced topics.
Use each lesson as a practical step toward real web development.