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'
);