Using React directly on HTML

#1. Let's first introduce our html page which is linked to a css stylesheet 'index.css' and also a javascript file 'index.js'.

<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <h1>Hello, React!</h1>
        <script src="index.js"></script>
    </body>
</html>

#2. The css file just includes some basic styling of the page.

html, body {
    margin: 0;
    padding: 0;
}

#3. Next, we would need to include the React and ReactDOM libraries from an external source (CDN).

https://reactjs.org/docs/cdn-links.html

For Development Environment:

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

For Production Environment:

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

#4. Next, we need to include the babel libraries from an external source (CDN) to run the JSX syntax.

https://reactjs.org/docs/add-react-to-a-website.html#quickly-try-jsx

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

#5. Next, we would specify the render function for ReactDOM to take two arguments: 'a set of components' [primary items/elements to be displayed on the index.html page] and 'a Node' [location of where item will be displayed on html page].

The Format is:

ReactDOM.render({component}, {node});

Hence:

ReactDOM.render(<h1>Hello, everyone!</h1>, document.getElementById("root"));

#6. A node with an id="root" will also be set on the index.html page.

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    </head>
    <body>
        <div id="root"></div>
        <script src="index.js" type="text/babel"></script>
    </body>
</html>

#7. The output should now look like this.

HERE IS ANOTHER WAY TO EXPLAIN THIS:

#1. React can be added to a website without any installations or downloads. We just need to add the React library and JSX script tags to the head of our HTML document.

<!-- React Library Script tags -->
    <script
      src="https://unpkg.com/react@16/umd/react.development.js"
      crossorigin></script>
    <script
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
      crossorigin></script>
    <!-- JSX Script tag -->  
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

#2. Next, we need to create a Node that will "react" (Pun intended!) and display some content when it is called. We will give our Node an id of "root".

<div id="root"></div>

#3. Next, we need to use the ReactDOM.render() method to display content to the Node. It takes two arguments, the HTML/JSX "content" to be displayed, and the "node" where the content will be displayed.

<script type="text/babel">
    ReactDOM.render(
      <h1>Hello, People!</h1>,
      document.getElementById('root')
    )
  </script>

#End

Hope you enjoyed this! :) Follow me for more contents...

Get in Touch:
www.ifeanyiomeata.com
contact@ifeanyiomeata.com

Youtube: https://www.youtube.com/c/IfeanyiOmeata
Linkedin: https://www.linkedin.com/in/omeatai/
Twitter: https://twitter.com/iomeata
Github: https://github.com/omeatai/
Stackoverflow: https://stackoverflow.com/users/2689166/omeatai
Hashnode: https://hashnode.com/@omeatai
Medium: https://medium.com/@omeatai
© 2021