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.


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>


© 2020 Better Solutions Limited. All Rights Reserved. © 2020 Better Solutions Limited TopPrevNext