Linking React File
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.
Notice that the script reference to "index.js" is at the bottom of the body.
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 src="index.js" type="text/javascript"></script>
</body>
</html>
index.js
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')
);
© 2023 Better Solutions Limited. All Rights Reserved. © 2023 Better Solutions Limited TopPrevNext