Chapter 4

React

React is a JavaScript library for building user interfaces. You describe what the UI should look like, and React handles updating the browser when your data changes.

It was created by Facebook and is now maintained by Meta and a large open-source community. React is one of the most widely used frontend libraries in the world.

What React gives you

• Components: break your UI into small, reusable pieces
• State management: React re-renders the UI automatically when your data changes
• JSX: write HTML-like syntax directly in JavaScript
• A huge ecosystem: routing, forms, data fetching, animation, and more

Before you start

You should be comfortable with the following before learning React:

• HTML and CSS (basic layout and structure)
• JavaScript (variables, functions, arrays, objects, arrow functions)
• Array methods like map() and filter()
• Promises and async/await (for fetching data)

If any of those feel shaky, spend some time with them first. React builds on all of them.

What version this covers

This guide covers React 19 (released 2024). All examples use:

• Functional components (the modern default)
• Hooks for state and side effects
• createRoot instead of the legacy ReactDOM.render()
• React Router v6 for routing

Class components are documented here as a legacy reference. You will encounter them in older codebases, but you should write new code using functional components and hooks.

Setting up your environment

You will need:

• Node.js (version 18 or higher)
• A code editor (VS Code is the most popular choice)
• The React Developer Tools browser extension

See Starting a React Project to get your first app running in a few minutes.

Where to start

If you are new to React, work through these pages in order:

1. Starting a React Project
2. JSX
3. React Components
4. Functional Components
5. Props and Data Flow
6. State
7. Lifting State Up
8. Event Handlers
9. Conditional Rendering
10. Lists
11. Forms
12. Styling
13. Hooks
14. Fetching Data
15. Context API
16. React Router

Going further

Once you are comfortable with the fundamentals, these pages cover topics you will hit in real projects:

• Project Structure : how to organise files in a React app
• StrictMode : what it does and why useEffect runs twice in development
• Error Boundaries : catch runtime errors and show a fallback UI
• Custom Hooks : extract and reuse stateful logic between components
• useCallback : stabilise function references to work with React.memo
• useTransition : keep the UI responsive during slow renders

Useful libraries

These are commonly used alongside React. They are not required, but you will likely encounter them:

• React Router : client-side routing for single-page apps
• TanStack Query : data fetching, caching, and synchronization
• React Hook Form : performant form handling with minimal re-renders
• Zustand : lightweight global state management
• Tailwind CSS : utility-first CSS framework that works well with React
• Framer Motion : animation library for React
• React Icons : popular icon sets as React components +++