Tag: react-dom

Using ReactJS in the HTML File

Now that we know what ReactJS is, we can start with different usage of ReactJS. If you don’t know what ReactJS is, read the ReactJS introduction.

In this article, we will learn to use ReactJS directly in the HTML file. There are some prerequisites to adding ReactJS script inside the HTML code. We need to include the following three javascript in the head section of the HTML file.

  • ReactJS
  • ReactDom
  • Babel

The first two allow us to write ReactJS code in our JavaScripts, and Babel will allow to write JSX syntax and ES6 in older browsers.

Example

Let’s see an example of using ReactJS in the HTML file,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      function Hello() {
        return <h1>Hello World!</h1>;
      }
      ReactDOM.render(<Hello />, document.getElementById('example'))
    </script>
  </body>
</html>

This way, we can use ReactJS for testing purposes. But for production use, we have to set up a React environment.