Menu
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
/Users/me/reactwork, I created 2 files clock.html and clock.js /Users/me/reactwork/clock.html. I expect to see my clock but I dontWhat 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.
433
Run the React Application Now you are ready to run your first real React application! A new browser window will pop up with your newly created React App! If not, open your browser and type localhost:3000 in the address bar.
You can run any one of the below mentioned commands to start the node server for your ReactJS application: npm run-script start. npm run start. npm start.
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>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.
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
