React Roadmap Other roadmapsLearn React with our guided roadmap
This roadmap covers and takes you through the essential concepts in React, from JSX, props and state, to more advanced concepts like lazy loading, suspense and error boundaries. By the end of this roadmap, you will have a solid understanding of how React works and how you can apply it to real-world projects.
If you would like to browse more React tutorials without a direction, you can filter for the tutorials you are looking for on our React category page.
What is covered?
- JSX, props and state
- Conditions and loops
- Lifecycle methods
- User events and Routing
- Hooks (including custom hooks)
- React patterns and pitfalls
- Uncontrolled components
- Lazy loading
- Portals and Suspense
- Error boundaries
1Understanding how JSX worksLearn how JSX works in React and how you can use it for building components more easily. 🔓 Unlock this lesson 2
Props and StateLearn how props and state work together in ReactIn this lesson, you will learn how to use props and state in React, and how the two can work together to create complex dynamic state.
How to Work with LoopsLearn how to use map in React in and outIn this tutorial, you will learn how to use the map array method in React to loop over elements and create repeating code.
🔓 Unlock this lesson 4
Lifecycle MethodsLearn about the lifecycle of React componentsIn React, each component goes through three different phases during its lifetime. In this lesson, we will take a look at each of them to better understand how React components are rendered.
How to Work With Event Listeners in ReactLearn how to respond to user eventsLearn how to work with various event listeners in React to handle and respond to user events.
🔓 Unlock this lesson 6
Routing in ReactLearn how to use React Router to implement routing in ReactMost applications require routing. Even though single-page applications are made of a single page, routing helps make SPAs more accessible.
Introduction to React HooksMaster the use of React hooksReact hooks lets you use state and other features that previously were only possible with class components. Learn how they can simplify your code.
🔓 Unlock this lesson 8
useRef and ForwardingLearn how to access the DOM directly with useRefIn this lesson, you will learn how to communicate with the DOM directly from React components using the useRef hook, and how to use forwarding for components.
How to Use the Context API in React With HooksLearn how to create shared state using the context APILearn how you can use the context API in React with hooks to create a shared state across your components.
🔓 Unlock this lesson 10
useMemo and useCallbackLearn how to use hooks for optimizing performanceIn this lesson, you will learn how to use two React hooks for optimizing performance by reducing the number of render calls.
Building Custom React HooksFor speeding up development workflowLearn how to create various custom React hooks to speed up your workflow and clean up your components.
4 React Design Patterns You Should KnowThat helps you write better React codeLearn how you can use four different common React design patterns that can help you write better React code.
🔓 Unlock this lesson 13
React PortalsLearn how React portals make rendering more flexibleIn this lesson, you will learn how React portals allow us to render a component outside of a component's DOM tree and place a component in a different location.
🔓 Unlock this lesson 14
Uncontrolled ComponentsControlled vs uncontrolled componentsLearn the difference between controlled and uncontrolled components in React, and when should you use which one.
🔓 Unlock this lesson 15
How to Improve Data Fetching With SuspenseLearn how to use the Suspense APIThe Suspense component in React is a feature that makes data fetching a breeze. Learn how it lets you avoid introducing unnecessary logic to your components.
🔓 Unlock this lesson 17
Error BoundariesLearn how to catch errors in ReactError boundaries are React components that allow us to catch and handle errors in the component tree gracefully.
🔓 Unlock this lesson 18
Common PitfallsLearn what are some common pitfalls to avoidReact not only has common patterns that can help you write better code but also common pitfalls that newcomers often make.
How to Fetch and Display JSONUsing custom hooksLearn how you can easily fetch and display JSON data in your React application using custom hooks.
Building React ProjectsContinue learning by building these projects in ReactLearning is a continuous process. Now that you are familiar with how React works, it's time to put theory into practice. Solidify your knowledge by building these projects in React.
🗺️ Related roadmapsContinue learning
- Access exclusive interactive lessons
- Unlimited access to hundreds of tutorials
- Remove ads to learn without distractions