JavaScript vs JSX — What are the Differences?
Understanding how JSX works
Learn how JSX works in React and how you can use it for building components more easily.
React Roadmap
Learn React with our guided roadmap📚 20 lessons • 📖 2.87 hours read in total
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
🔓 Unlock this lesson 
Props and State
Learn 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 Loops
Learn 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 Lifecycle Methods
Learn 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 React
Learn 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 Routing in React
Learn 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 Hooks
Master 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 useRef and Forwarding
Learn 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 Hooks
Learn 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 useMemo and useCallback
Learn 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 Hooks
For 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 Know
That 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 React Portals
Learn 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 Uncontrolled Components
Controlled vs uncontrolled componentsLearn the difference between controlled and uncontrolled components in React, and when should you use which one.🔓 Unlock this lesson Lazy Loading Components
To improve JavaScript performanceIn this lesson, we are going to take a look at how we can lazy load components to improve the performance of our application.How to Improve Data Fetching With Suspense
Learn 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 Error Boundaries
Learn 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 Common Pitfalls
Learn 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 JSON
Using custom hooksLearn how you can easily fetch and display JSON data in your React application using custom hooks.
Building React Projects
Continue 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 roadmaps
Continue learning📚 More Webtips
Master the Art of Frontend
- Unlimited access to hundred of tutorials
- Access to exclusive interactive lessons
- Remove ads to learn without distractions
