pixel pixel - 3 years ago 162
React JSX Question

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


  1. in my
    /Users/me/reactwork
    , I created 2 files clock.html and clock.js

  2. 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/babel-standalone@6.15.0/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/babel-standalone@6.15.0/babel.min.js:12:27049)
at r (https://unpkg.com/babel-standalone@6.15.0/babel.min.js:12:27558)
at e.src.i.(anonymous function).error (https://unpkg.com/babel-standalone@6.15.0/babel.min.js:12:27873)
at XMLHttpRequest.i.onreadystatechange (https://unpkg.com/babel-standalone@6.15.0/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.

Answer Source

At the very least, you will need to load React (and ReactDOM) in clock.html. Some instructions are available in the React installation docs.

If you want to get started quick, an easier option might be to use create-react-app. You just need to install node + npm and then run the few commands listed in the create-react-app README:

npm install -g create-react-app

create-react-app my-app
cd my-app/
npm start

That will create a simple "Hello, world" app and open it in your browser. Then you can make changes to it and see it update in the browser in real time.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download