Embedding React

In the html file you need to import the React and the ReactDOM libraries using script tags.
Importing "react.min.js" using a script tag will mean the "React" object is a global variable.
Importing "react-dom.min.js" using a script tag will mean the "ReactDOM" object is a global variable.
The JavaScript code does not contain any JSX.

link - https://cdnjs.com/libraries/react

index.html

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
</head> 

<body> 

<div id="app"></div> 

<script type="text/javascript"> 
var App = React.createClass({ 
  displayName: 'App',  
  render: function() { 
    // The second parameter is an object of attributes for the element (if any) 
    return React.createElement('div', { }, 'Hello World');  
  } 
}); 
 
ReactDOM.render( 
  React.createElement(App), 
  document.getElementById('app')  
); 
</script> 

</body> 
</html>

JSX - Embedding

Importing "react.js" using a script tag will mean the "React" object is a global variable.
Importing "react-dom.js" using a script tag will mean the "ReactDOM" object is a global variable.
Importing "browser.min.js" using a script tag will allow the JSX to be converted to JavaScript.
You should load this script with the special type "text/babel".

When we use JSX, we are able to define our virtual DOM element more concisely without having to call React.createElement and passing which attributes the element should have.
This snippet uses JSX because there are HTML tags inside the ReactDOM.render.

index.html

<!DOCTYPE html> 
<html> 
<head> 
<script src=https://unpkg.com/react@18/umd/react.production.min.js></script> 
<script src=https://unpkg.com/react-dom@18/umd/react-dom.production.min.js></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> 
<script type="text/javascript" src=https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.0.0-alpha.15/babel.min.js></script> 
</head> 

<body> 
<div id="app"></div> 

<script type="text/babel"> 
function HelloWorld_fun(props) { 
   return <h1>{props.name}</h1> 
} 
ReactDOM.render( 
  < HelloWorld_fun name='Hello World' />, 
  document.getElementById('app')  
); 
</script> 

</body> 
</html>