React Tutorial
Build modern user interfaces
Learn React with 20 free hands-on lessons. Components, props, state, hooks (useState, useEffect, useContext), and routing — everything you need to build modern web apps.
What you'll learn
- Components and JSX
- Props and state
- React Hooks (useState, useEffect, useContext)
- Forms and event handling
- React Router
Prerequisites
- Solid JavaScript (especially ES6+)
- Comfortable with arrays, objects, and functions
Why learn React?
- React is the most popular front-end library in the world
- Used by Facebook, Netflix, Airbnb, Instagram, and most startups
- Component-based thinking transfers to React Native, Vue, and Svelte
- Highest-paying skill in front-end job listings
Course Curriculum
20 lessons · ~14 hours · self-paced
- 1
Introduction to React
The Problem React Solves
- 2
Setting Up React
Why React Needs a Build Step at All
- 3
JSX Basics
JSX Is JavaScript in Disguise
- 4
Components
A Component Is Just a Function
- 5
Props & Data Flow
Props Are a Component's Parameters
- 6
State with useState
Why a Normal Variable Cannot Work
- 7
Handling Events
Attaching Handlers in JSX
- 8
Conditional Rendering
You Do Not Show and Hide — You Return Something Else
- 9
Lists & Keys
Turning an Array into Elements
- 10
Forms in React
Controlled Inputs: React Owns the Value
- 11
useEffect Hook
What an Effect Is For
- 12
useRef Hook
A Box That Survives Renders
- 13
Custom Hooks
The Repetition That Hooks Remove
- 14
Context API
The Problem Context Solves
- 15
React Router
What Client-Side Routing Means
- 16
Fetching Data
Every Request Has Four Outcomes
- 17
Performance Optimization
Measure Before You Optimise
- 18
Styling in React
Why This Needs a Decision at All
- 19
React Best Practices
Components: One Job, Honest Names
- 20
Final Project: Build a Todo App
What You Are Building
Ready to start?
All 20 lessons are free. No credit card. No sign-up required to read.
Start with lesson 1: Introduction to React