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.
