Run simple react js in browser locally

Question

You can run react.js directly into your browser NPM or NODE.JS are NOT REQUIRED.
Here is a snippet:

// main.js

/* You don't need these imports
**  import React from 'react';
**  import ReactDOM from 'react-dom';
*/
// React and ReactDOM are already imported in you HTML
// Also import / require are NodeJS thing that doesn't exist in a browser


function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('the_root_of_your_reactJS_component')
  );
}

setInterval(tick, 1000);

<!-- index.html -->


<body>

  <!-- some HTML -->
  <div id="the_root_of_your_reactJS_component"></div>
  <!-- some other HTML -->
  
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <!-- babel is required in order to parse JSX -->

  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <!-- import react.js -->

  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"> </script>
  <!-- import react-dom.js -->

  <script type="text/babel" src="main.js"></script>
  <!-- import your JS and add - type="text/babel" - otherwise babel wont parse it -->
</body>

Leave a Comment Cancel reply