# The React Guide

> React is the most popular JavaScript library for building user interfaces. A curated guide to the best React tutorials on this site: components, hooks, state.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2017-12-10 | Updated: 2026-07-14 | Topics: [React](https://flaviocopes.com/tags/react/) | Canonical: https://flaviocopes.com/react/

React is a JavaScript library for building user interfaces. It was created at Facebook, and it's still the most popular way to build web apps today.

The core idea is simple: you split the UI into components, each one owning its markup and its state. React keeps the page in sync with your data.

I wrote many React tutorials on this site. This page is your map. Follow the path below if you're new, or jump to the section you need.

## Where to start

Follow this path in order:

1. [Introduction to React](https://flaviocopes.com/react-introduction/): what React is and the problems it solves
2. [How much JavaScript you need to know to use React](https://flaviocopes.com/react-javascript/): check your prerequisites first
3. [Using Vite to create a new React app](https://flaviocopes.com/vite-react-app/): set up a project in a minute
4. [Getting started with JSX](https://flaviocopes.com/jsx/): the syntax you write components in
5. [React components](https://flaviocopes.com/react-components/): the building blocks of every app
6. [React props](https://flaviocopes.com/react-props/): passing data into components
7. [The React state](https://flaviocopes.com/react-state/): making components interactive

## Components and JSX

The everyday work of building interfaces: rendering lists, handling conditions, wiring up forms and events.

- [Conditional rendering in React](https://flaviocopes.com/react-conditional-rendering/)
- [How to loop inside React JSX](https://flaviocopes.com/react-how-to-loop/)
- [React events](https://flaviocopes.com/react-events/)
- [Handling forms in React](https://flaviocopes.com/react-forms/)
- [The React fragment](https://flaviocopes.com/react-fragment/)
- [Props vs state in React](https://flaviocopes.com/react-state-vs-props/)
- [How to get the value of an input element](https://flaviocopes.com/react-how-to-get-value-input/)

## Hooks

Hooks are how modern React works. Learn `useState` and `useEffect` first, they cover most of what you'll write.

- [Introduction to React hooks](https://flaviocopes.com/react-hooks/)
- [How to use the useState hook](https://flaviocopes.com/react-hook-usestate/)
- [How to use the useEffect hook](https://flaviocopes.com/react-hook-useeffect/)
- [Why does useEffect run two times?](https://flaviocopes.com/react-useeffect-two-times/)
- [How to use the useContext hook](https://flaviocopes.com/react-hook-usecontext/)
- [How to use the useRef hook](https://flaviocopes.com/react-hook-useref/)
- [How to use the useMemo hook](https://flaviocopes.com/react-hook-usememo/)
- [How to use the useCallback hook](https://flaviocopes.com/react-hook-usecallback/)
- [How to use the useReducer hook](https://flaviocopes.com/react-hook-usereducer/)

## Concepts

The ideas behind React. Knowing these makes the library feel a lot less magic.

- [The virtual DOM](https://flaviocopes.com/react-virtual-dom/)
- [React concepts: declarative](https://flaviocopes.com/react-declarative/)
- [React concept: immutability](https://flaviocopes.com/react-immutability/)
- [Unidirectional data flow in React](https://flaviocopes.com/react-unidirectional-data-flow/)
- [The React Context API](https://flaviocopes.com/react-context-api/)
- [Server side rendering with React](https://flaviocopes.com/react-server-side-rendering/)

## Tools and debugging

The tooling around React: routing, dev tools, testing.

- [Introduction to React Router](https://flaviocopes.com/react-router/)
- [How to use the React Developer Tools](https://flaviocopes.com/react-developer-tools/)
- [How to debug a React application](https://flaviocopes.com/react-debugging/)
- [Testing React components](https://flaviocopes.com/react-testing-components/)
- [How to handle errors in React](https://flaviocopes.com/react-handle-errors/)

## Go deeper

I collected all of this material in the free [React Handbook](https://flaviocopes.com/ebooks/react-handbook/). And if you want a complete, structured course, check out the [React Masterclass](https://flaviocopes.com/courses/react).

Every post on the topic is listed under [the react tag](https://flaviocopes.com/tags/react/).