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.