Embedding JSX

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://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.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>


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