To use the React Js directly in the HTML file. Use the below steps.
1. Add the CDN links of React Js files in the Head section.
2. Add babel Js too for Compilation
3. Make a Class by inheriting of React component.
After that call the function directly. You can follow the steps or use the complete code for the output.
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>Create a class using React like below
class Hello extends React.Component {
render() {
return <h1>Hello World!</h1>
}
}
Call the function like below
ReactDOM.render(<Hello />, document.getElementById('yourdiv'))We can pass value directly like below. no need to make Class
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('yourdiv')
);Complete Code
<!DOCTYPE html>
<html>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<body>
<div id="demo"></div>
<script type="text/babel">
class Hello extends React.Component {
render() {
return <h1>Hello World!</h1>
}
}
ReactDOM.render(<Hello />, document.getElementById('demo'))
</script>
</body>
</html>
Output
