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 support@cloudacademy.com. 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.