How to install React directly in a web page

We can add React JS file directly to web page without using create-react-app. We have to include a couple of files to achieve our goal.

  • react.production.min.js (main react file).

  • react-dom.production.min.js (talk with dom).

  • babel.min.js (to run JSX).

  • own js file with “text/babel” mime type.

index.html

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

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

    <script src="script.js" type="text/babel"></script>
  </body>

script.js

const Button = () => {
  return <button>Click me!</button>;
};

ReactDOM.render(<Button />, document.getElementById("root"));
IMRAN POLLOB
IMRAN POLLOB
PhD Student

Fullstack software engineer with 4+ years of experiece learing to teach machines

Related