React - Introduction to JSX


React - Introduction to JSX
React - Introduction to JSX

In this course, you learn about JSX. JSX is a syntax extension to JavaScript used with React.

Learning Objectives

  • Learn what JSX is.
  • Learn about the React createElement method and how it is used to create HTML elements by transpiling JSX into JavaScript.
  • Learn what expressions are and how they are used inside of JSX.

Intended Audience

  • This course is intended for anyone who wants to learn about React.


  • A basic understanding of Javascript.

React Introduction to JSX. Hi there, my name is Farish Kashefinejad, I'm the software development domain lead at Cloud Academy. If you have any questions or concerns about this course, please feel free to reach out to On the screen, I have the Cloud Academy Lab environment with the App.js file for a React application open in the editor. Looking at this file, there's a app function, and inside of this app function there is an HTML element. 

This element is JSX. JSX is a syntax extension for JavaScript that allows developers to write HTML like code. It looks like HTML, but it's not. Using webpack in Babble, React transpiles this code into JavaScript. Below the export statement, I will type out what this HTML element is converted into when React transpiles this into JavaScript. React.createElement, and with this function there is 3 arguments: The first is the type h1, the second is props, in this case it's an object with className, and the value being text-3xl. And lastly, any children, which will be the string Cloud Academy Labs. Zooming in to take a closer look at the createElement method, what are types,

props, and children? Type refers to a React component type which could be a tag name to a HTML element as listed here as part of the GSX or another React component which could be a function or class, or a special case component. Props, which is short for properties, refers to the attributes of the HTML element or react component such as class. If you haven't noticed already, I use className instead of class, that is because class is a reserved keyword in JavaScript. ClassName will be converted to class when React is transpiled by Babble. Now children, in simple terms, children refers to the content that's between the opening and closing tag of a HTML element or a React component. 

Now, I'm going to transition to a split screen with the browser and editor open side by side. And now I'm going to use this environment to demonstrate expressions inside of JSX. And just to have a understanding here, at a high level, an expression is a valid unit of code that resolves to a value, in simpler terms just any code that could be referred to or executed. And in general, JSX is an expression itself. Now, to begin with the basic example, above the app() function I will declare a variable const name and set it equal to my name.

Now, in order to evaluate this, I will create an expression inside the paragraph. In order to write the expression, I need to use curly braces, and inside of the curly braces I will write name referencing the variable above. On the right side inside of the browser my name has appeared. And I did mention earlier that this code can be executable, such as a function call. After the name variable, I will create an add() function. I will replace name with the add() function, giving it an argument of one and two. To the right, the function has already been called and the value of three has appeared. And this is very similar to other JavaScript frameworks or templating engines that do have the ability to evaluate expressions. And that's it, thanks for watching at Cloud Academy.


About the Author
Learning Paths

Farish has worked in the EdTech industry for over six years. He is passionate about teaching valuable coding skills to help individuals and enterprises succeed.

Previously, Farish worked at 2U Inc in two concurrent roles. Farish worked as an adjunct instructor for 2U’s full-stack boot camps at UCLA and UCR. Farish also worked as a curriculum engineer for multiple full-stack boot camp programs. As a curriculum engineer, Farish’s role was to create activities, projects, and lesson plans taught in the boot camps used by over 50 University partners. Along with these duties, Farish also created nearly 80 videos for the full-stack blended online program.

Before 2U, Farish worked at Codecademy for over four years, both as a content creator and part of the curriculum experience team.

Farish is an avid powerlifter, sushi lover, and occasional Funko collector.

Covered Topics