React Js Directly in HTML

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>

Complete Code

Output

Leave a Reply Cancel reply