JavaScript vs JSX — What are the Differences?
Understanding how JSX works
Ferenc Almasi • 
2022 June 02 • 
9 min readLearn how JSX works in React and how you can use it for building components more easily.
React Roadmap Other roadmaps
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 ReactFerenc Almasi • 2023 January 20 • 9 min readIn 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 outFerenc Almasi • 2023 April 20 • 11 min readIn 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 componentsFerenc Almasi • 2023 January 20 • 6 min readIn 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 eventsFerenc Almasi • 2023 April 04 • 11 min readLearn 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 ReactFerenc Almasi • 2023 January 20 • 9 min readMost 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 hooksFerenc Almasi • 2021 June 28 • 19 min readReact 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 useRefFerenc Almasi • 2023 January 20 • 7 min readIn 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 APIFerenc Almasi • 2023 January 20 • 9 min readLearn 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 performanceFerenc Almasi • 2023 January 20 • 6 min readIn 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 workflowFerenc Almasi • 21 min readLearn 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 codeFerenc Almasi • 2023 March 31 • 7 min readLearn 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 flexibleFerenc Almasi • 2023 January 20 • 3 min readIn 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 componentsFerenc Almasi • 2023 January 20 • 6 min readLearn 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 performanceFerenc Almasi • 2023 January 21 • 4 min readIn 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 APIFerenc Almasi • 2021 November 11 • 9 min readThe 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 ReactFerenc Almasi • 2023 January 21 • 6 min readError 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 avoidFerenc Almasi • 2023 January 21 • 11 min readReact 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 hooksFerenc Almasi • 2023 April 21 • 9 min readLearn 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
- Access exclusive interactive lessons
- Unlimited access to hundreds of tutorials
- Remove ads to learn without distractions
Recommended
How to Work With Event Listeners in Astro
Writing JavaScript in Astro
Ferenc Almasi • 2023 November 30 • 11 min read
How to Work With CSS in Astro
Learn the many ways of styling Astro components
Ferenc Almasi • 2023 November 28 • 9 min read
Astro vs JSX — What are the Differences?
Comparing two similar syntax
Ferenc Almasi • 2023 November 24 • 12 min read