React Get Started

To understand React, you can start by writing React code directly in HTML, but for production use, you’ll need npm and Node.js installed.

React Directly in HTML

The quickest way to start learning React is by writing React code directly in your HTML files. Include three scripts: the first two for enabling React in your JavaScript, and the third, Babel, for using JSX and ES6 features in older browsers.

Example

Add three CDNs to your HTML file:

<!DOCTYPE html>
<html>
  <head>
    <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="mydiv"></div>

    <script type="text/babel">
      function Hello() {
        return <h1>Hello World!</h1>;
      }

      const container = document.getElementById('mydiv');
      const root = ReactDOM.createRoot(container);
      root.render(<Hello />)
    </script>

   </body>
</html>