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.85 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
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.
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.
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.
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.
Building Custom React Hooks
For speeding up development workflowFerenc Almasi • 2021 June 28 • 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.
How to Fetch and Display JSON
Using custom hooksFerenc Almasi • 2024 February 02 • 10 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.🔓 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.🔓 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.🔓 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.🔓 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.🔓 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.🔓 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.🔓 Unlock this lesson React Suspense
Learn how to use the Suspense APIFerenc Almasi • 2023 January 21 • 7 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.
🗺️ Related roadmaps
Continue learning
JavaScript Roadmap
Learn JavaScript with our guided roadmapThis roadmap takes you through the essential concepts in JavaScript, from basic syntax to advanced concepts like functional and asynchronous programming.Building React Projects
Learn working in React with our guided roadmapThis roadmap takes you through various React projects to help you practice React while also building a portfolio and reusable code.
Astro Roadmap
Learn how to use Astro with our guided roadmapThis roadmap teaches you how to build static and SEO-friendly content-first websites in Astro, a static site generator that uses the island architecture.
📚 More Webtips
Master the Art of Frontend
- Access 100+ interactive lessons
- Unlimited access to hundreds of tutorials
- Prepare for technical interviews
Courses
Recommended
How to Create a Configurable Tabs Component in React
With TypeScript and HTML content support
Ferenc Almasi • 2024 February 23 • 11 min read • React v18.2
How to Create a Responsive Timeline Component in React
With the help of CSS pseudo elements
Ferenc Almasi • 2024 February 13 • 10 min read • React v18.2
How to Create Dynamic Routes in Astro
Generating different pages based on server-side data
Ferenc Almasi • 2024 January 16 • 9 min read