'Run simple react js in browser locally

I am new to react and I am just trying to run a simplest react js file in my browser. But I am unable to

Please note that I do not want to create-react-app, I just want to try it on my local system.

I did following

in my /Users/me/reactwork, I created 2 files clock.html and clock.js
then in Chrome browser, I enter /Users/me/reactwork/clock.html. I expect to see my clock but I dont

What I am doing wrong?

I am very new to js and react, just started reading so please provide me step by step instructions.

Here are my files

clock.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel" src="clock.js">

    </script>
  </body>
</html>

clock.js

import React from 'react';
import ReactDOM from 'react-dom';

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

    ReactDOM.render(
        element,
        document.getElementById('root')
    );
}

setInterval(tick, 1000);

Chrome Developer Tools shows this error

Failed to load file:///Users/me/reactwork/clock.js: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

I reasearched this error and found that I need server so I issued following command from the location where my html and js files are

python -m SimpleHTTPServer

this starts a server on port 8000, then I went to Chrome and typed

http://localhost:8000/clock.html

, but this shows error in Chrome Dev Tools

clock.js:1 Uncaught ReferenceError: require is not defined
    at <anonymous>:3:14
    at n (https://unpkg.com/[email protected]/babel.min.js:12:27049)
    at r (https://unpkg.com/[email protected]/babel.min.js:12:27558)
    at e.src.i.(anonymous function).error (https://unpkg.com/[email protected]/babel.min.js:12:27873)
    at XMLHttpRequest.i.onreadystatechange (https://unpkg.com/[email protected]/babel.min.js:12:27316)

UPDATE I gave up trying to make it work as react page suggests on this link to try it on your own using the "Try React" and use my own text editor (https://reactjs.org/docs/installation.html). That did not work as I explained in my post above.

Although I wish I could get it work this way, I was not able, so I then decided to do it as the "Create New App" tab section, then modified index.js file to use the code I had in my clock.js file as described above. That worked.

javascript reactjs

Solution 1:^[1]

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>

Solution 2:^[2]

First of all your html file has some wrong syntax. head tag is used for non visual elements. You need to add that h1 tag inside a body tag. If your knowledge on html is not that good I suggest you to get a little familiar with HTML and Javascript before diving into React.

Second problem is that you are missing required react scripts in your html. You need to add react and required javascript libraries to your file before using react. You can find more information about that here

The third problem I can see is that you are missing a tag with id root in your html. Line with document.getElementById('root') trying to find an element with the id root in your html to render react element inside.

I suggest you to check W3Schools for quick and easy way to learn basic HTML and Javascript if you are not familiar with. After that you can start learning React with official tool create-react-app. This will help you to understand project structure and how things work better.

Solution 3:^[3]

You can now audit a single component live, during development, with styleguidist.

It's a tool designed for the purpose of sharing design knowledge among engineering and design teams, and it acts as a "kitchensink" or "showcase" for live components.

While somewhat similar to storybook, it's prefareable to it for development purposes, as storybook will only render static states of components (akin to the storyboard in film production).

It's mentioned in the create-react-app documentation on developing components in isolation.

Solution 4:^[4]

You will not be able to open the file using the path: /Users/me/reactwork/index.html. Unfortunately the React docs don't mention this nor do they point you in the right direction.

The best solution is to use a tool like Live Server: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer.

If you use VS Code you can add this extension, right click your index.html file and click 'Open with Live Server' and boom you have what you need.

Solution 5:^[5]

The answer below worked for me.

Basically, the solution is to include the export file and the import file in the index.html file, each in a SCRIPT element.

Additionally, they must have the custom attribute data-plugins="transform-es2015-modules-umd" along with the expected attribute type="text/babel"

Like that:

<script data-plugins="transform-es2015-modules-umd" type="text/babel" src="./MyExport.js"></script>

<script data-plugins="transform-es2015-modules-umd" type="text/babel" src="./MyImport.js"></script>

The order is important. The script importing the module should be put last in the index.html

[Source] How to perform import/export in client-side React JSX using Babel-Standalone

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Nedko Dimitrov
Solution 2	bennygenel
Solution 3
Solution 4	Spencer Powell
Solution 5

'Run simple react js in browser locally

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]