The React Guide
By Flavio Copes
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.
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:
- Introduction to React: what React is and the problems it solves
- How much JavaScript you need to know to use React: check your prerequisites first
- Using Vite to create a new React app: set up a project in a minute
- Getting started with JSX: the syntax you write components in
- React components: the building blocks of every app
- React props: passing data into components
- The 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
- How to loop inside React JSX
- React events
- Handling forms in React
- The React fragment
- Props vs state in React
- How to get the value of an input element
Hooks
Hooks are how modern React works. Learn useState and useEffect first, they cover most of what you’ll write.
- Introduction to React hooks
- How to use the useState hook
- How to use the useEffect hook
- Why does useEffect run two times?
- How to use the useContext hook
- How to use the useRef hook
- How to use the useMemo hook
- How to use the useCallback hook
- How to use the useReducer hook
Concepts
The ideas behind React. Knowing these makes the library feel a lot less magic.
- The virtual DOM
- React concepts: declarative
- React concept: immutability
- Unidirectional data flow in React
- The React Context API
- Server side rendering with React
Tools and debugging
The tooling around React: routing, dev tools, testing.
- Introduction to React Router
- How to use the React Developer Tools
- How to debug a React application
- Testing React components
- How to handle errors in React
Go deeper
I collected all of this material in the free React Handbook. And if you want a complete, structured course, check out the React Masterclass.
Every post on the topic is listed under the react tag.
Related posts about react: