JSX Syntax

The JSX syntax was introduced by the same people who created React.
It is designed to simplify working with React components.
At first glance it looks like a mix of HTML and JavaScript
What looks like HTML is just a familiar XML syntax that is used to define a component and its position inside the markup.

const element = <h1>Hello World</h1> 

Inside JSX expressions, attributes can be inserted very easily.

const myText = "Monday" 
const element = <h1 text={myText}>Hello World</h1> 

Syntax Features

class becomes className
for becomes htmlFor
attributes that contain a dash
camelcase is the new standard
onchange becomes onChange
onclick becomes onClick

.JSX File Extension

Wrapping Components

This JSX snippet wraps two components inside a div tag.

<div> 
   <Component_One/> 
   <Component_Two/> 
</div> 

Transpiling JSX

A browser cannot execute javascript files that contain JSX code
These JSX files must first be transpiled into regular JavaScript.
The most popular tool for transpiling is Babel.

JSX is Optional

Every line of JSX code can be written in plain JavaScript
This is JSX code

ReactDOM.render( 
   <div id="test"> 
      <h1>My Heading</h1> 
      <p>Some Text</p> 
   </div> 
   document.getElementById("myapp") 
) 

is equivalent to this javascript code

ReactDOM.render( 
   React.createElement("div", { className: "test" }, 
      React.createElement("h1", null, "My Heading") 
      React.createElement("p", null, "Some Text"} 
   ), 
   document.getElementById("myapp") 
) 

JSX has inline styles

JSX and Babel

link - react.dev
JSX is a syntax extension to JavaScript.
JSX allows you to write html in your Javascript
You can put any valid javascript expression inside the curly braces in JSX
The only method that a React component must define is called 'render'.
This method/function returns a JSX.Element

class Hello extends React.Component { 
  render() : JSX.Element { 
    return <div>Hello {this.props.toWhat}</div>; 
  } 
} 

ReactDOM.render( 
  <Hello toWhat="World" />, 
  document.getElementById('root')  
); 

Equivalent without JSX

Includes the React.createElement instead of the angled brackets.

class Hello extends React.Component { 
  render() : JSX.Element { 
    return React.createElement('div', null, 'Hello ' + this.props.toWhat);  
  } 
} 

ReactDOM.render( 
  React.createElement(Hello, {toWhat: 'World'}, null),  
  document.getElementById('root')  
); 

JSX and React

JSX is optional and not required to use React.
React doesn't require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code.
It also allows React to show more useful error and warning messages.

The Babel Compiler can compile JSX into JS

JSX is not a globally accepted standard and is not supported by all browsers.
To get around this problem you can use the [[Babel]] javascript compiler to transform the JSX into regular javascript
Babel compiles JSX code into React.createElement() calls
The following two blocks are identical

// JSX Syntax 
const element = ( 
   <h1 className="hello"> 
      Hello World 
   </h1> 
); 

// After Babel compilation 
const element = React.createElement( 
   'h1'
   {className:'hello'},  
   'Hello World'
);