1. Home
  2. Training Library
  3. Programming
  4. Courses
  5. React - Components and JSX

What is JSX and Why is it Used in React JS?

Developed with

The course is part of this learning path

ReactJS: Zero to Hero
What is JSX and Why is it Used in React JS?


This module introduces you to some of the basic components in React and what JSX is. 

Learning Objectives 

The objectives of this module are to provide you with and understanding of 

  • What components are 
  • What JSX is and why it is used in React JS 
  • How to create Functional and Class Components 
  • How to add multiple components 
  • How to inspect components in the Browser
  • How the in-browser tools work 

Intended Audience  

This learning path is aimed at all who wish to learn how to use the ReactJS framework.  


It is essential you understand the face of contemporary web development to attend this course. We insist upon JavaScript experience, along with good HTML and CSS skills. 


We welcome all feedback and suggestions - please contact us at qa.elearningadmin@qa.com to let us know what you think. 



JSX was developed by Facebook, to help write, and clean the React code. It stands for JavaScript Syntax Expression, and Facebook recommend using it, because it provides syntactic sugar, over our component code. It cleans up the mixture of HTML and JavaScript that is needed to create our React components. This makes the component code easier for developers to understand, and quicker for them to write. Under the Hood, the transformational and optimization processes, are more efficient when working with JSX. And it helps to prevent cross-site scripting attacks. It does this by escaping values embedded in JSX, and converting them to a string before rendering them. The main job of JSX, as far as we're concerned, is to take the HTML code shown here, and re-box it into React's create element function with the relevant arguments as shown below. You don't have to use JSX to write React code, but writing Vanilla JavaScript means you will lose its readability, but more importantly, miss out on error-warning messages, that the React library will produce as part of the conversion process. JSX can be used as an expression in component code. After completion, JSX expressions become regular JavaScript function calls, that evaluate to JavaScript objects. This means that we can assign JSX expressions to variables, and embed regular JavaScript expressions inside the JSX using curly braces. The example shown here, would render welcome to my React App to the screen. In some code editors such as VS Code, the empty angle brackets are acceptable shorthand for the React fragment components. We can also use JSX as expressions in if statements and for loops, as an argument in expressions and function calls, and they can even be returned from functions as the example shown here does. Something to remember in future, we can't use if from for loops inside JSX expressions, as it needs to be a valuable. Instead, we'll use ternary expressions and looping functions like for each where needed. More on that in other videos.

About the Author
Learning paths6

An outstanding trainer in software development with more than 15 years experience as a Corporate and Apprentice Trainer, ICT Teacher and Head of Department, with a passion for technology and its uses. Continuing to develop existing and new skills and courses, primarily in web design using PHP, JavaScript, HTML, CSS and SQL but also OOP (Java), programming foundations (Using Python), DevOps (Git, CI/CD, etc) and Agile/Scrum. Practically minded, a quick learner and a problem solver with an attention to detail to ensure high quality outcomes.

Covered Topics