How to import React.js as script in html?

Question

I want to import reactjs or any framework app in html. Example:

<html>
  <head>
    <title>Test Bot</title>
    <style>
      .chatbot-goes-here {
        position: fixed;
        bottom: 0;
        right: 5rem;
      }
    </style>
  </head>
  <body>
    <div id="chatbot-goes-here"></div>
  </body>
  <script src="./index.js"></script>
</html>

my index.js

const x = document.getElementById('chatbot-goes-here');
x.innerHTML = `<h1>hi</h1>`

Now in "index.js" i want my react app logic which is changing the "div" with id="chatbot-goes-here". So the idea is this index.js file will be hosted on cloud instance and someone can include the div and script file to use the chatbot.

Just start from here reactjs.org/docs/add-react-to-a-website.html — Amila Senadheera
– Amila Senadheera, Commented Apr 19, 2021 at 7:37

Aqib Naeem · Accepted Answer · 2021-04-19 07:37:03Z

4

you can import react in your html file using cdn link, You can copy the following template i have designed

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>React practice</title>
</head>
<body>
     <div id="root"></div>
     

     <!-- React CDN Link -->
     <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
     <!-- React-DOM CDN Link -->
     <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
     <!-- Babel CDN Link -->
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
     <!-- Linking index.js file -->
     <script src="index.js" type="text/jsx"></script>
     
</body>
</html>

answered Apr 19, 2021 at 7:37

Aqib Naeem

4413 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Melvynx Over a year ago

You forgot to add type="text/babel" on your script tag. And don't need to ask for upvotes.

Melvynx · Accepted Answer · 2021-04-19 08:10:37Z

0

You can easily do that using react cdn :

<head>
  <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js">
  <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
</head>
<body>
  <div id="root"></div>

  <script type="text/babel">
    const className = 'container';
    const children = 'Hello World';
    const props = {children, className};

    const element = <div {...props} />;

    ReactDOM.render(element, document.getElementById('root'));
  </script>
</body>

edited Apr 19, 2021 at 8:10

answered Apr 19, 2021 at 7:21

Melvynx

1,1851 gold badge10 silver badges21 bronze badges

1 Comment

Melvynx Over a year ago

It was good at the time but now it's deprecrated. The header is created to add script and link tags and the body is used for html element.

crg · Accepted Answer · 2021-04-19 07:24:56Z

-1

Not sure to understand fully what you want. For what I understood if you want to import reactjs or any framework app in html you can use CDN or other similar links.

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

<script crossorigin src="YOUR FRAMEWORK LINK HERE"></script>

For exemple using react it looks like that :

<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>

More CDN libraries can be found here

answered Apr 19, 2021 at 7:24

crg

4,5963 gold badges39 silver badges70 bronze badges

Collectives™ on Stack Overflow

How to import React.js as script in html?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related