What is JSX?
What is JSX?

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 an 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 to let us know what you think. 



JSX was developed by Facebook to help write cleaner 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 component. This makes the component code easier for developers to understand and quick to follow and to write. 

Under the hood, the transpilation 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 the JSX, as files were concerned, is to take the HTML code shown here and re-box it into React's create element function with the relevant augments 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 and 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 compilation, JSX expressions become regular JavaScript function calls that evaluate the 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 component. We can also use JSX as expressions in 'if' statements and 'for' loops, as an argument in expressions and function calls, and there can even be return from functions as the example show here does. Something to remember in the future, we can't use 'if' or 'for' loops inside JSX expressions as it needs to be a valuable. Instead, we'll use ternary expressions and looping functions like forEach where needed. More on that in other videos.

About the Author
Learning Paths

Ed is an Outstanding Trainer in Software Development, with a passion for technology and its uses and holding more than 10 years’ experience.

Previous roles have included being a Delivery Manager, Trainer, ICT teacher, and Head of Department. Ed continues to develop existing and new courses, primarily in web design using: PHP, JavaScript, HTML, CSS, SQL, and OOP (Java), Programming Foundations (Python), and DevOps (Git, CI/CD, etc). Ed describes himself as practically minded, a quick learner, and a problem solver who pays great attention to detail. 

Ed’s specialist area is training in Emerging Technologies, within Web Development. Ed mainly delivers courses in JavaScript covering vanilla JS, ES2015+, TypeScript, Angular, and React (the latter is authored by Ed) and has delivered on behalf of Google for PWAs. Ed has also developed a new suite of PHP courses and has extensive experience with HTML/CSS and MySQL. 

Ed is responsible for delivering QA’s Programming Foundations course using the Eclipse IDE. His skillset extends into the DevOps sphere, where he is able to deliver courses based around Agile/Scrum practices, version control, and CI/CD.

Covered Topics