JavaScript React Basics First Steps in React Understanding JSX

Tram Nguyen
Tram Nguyen
1,255 Points

Babel is not working

The babel is not working even when I have done exactly the same with the tutorial. It does not show any error also.

Alexander Karan
Alexander Karan
Pro Student 15,220 Points

For those of you who would like to use node instead of Python for your simple server check out:

https://www.npmjs.com/package/http-server

Just follow the instructions on the site, it is pretty simple.

15 Answers

Hugo Magalhaes
Hugo Magalhaes
6,062 Points

@Maria Te open the terminal and post the following line:

python -m SimpleHTTPServer 8000

Open your browse, type the following URL and then just navigate to the folder where you have your project files. And you are done!

http://localhost:8000/
Maria Te
Maria Te
8,520 Points

Oh, thank you very much. That's 10 times more simpler. No offense included. Thank you

Michael Cuddy
Michael Cuddy
30,649 Points

I'm not sure if this will help you but I was having the same issue and had to run the code by starting up a simple server. I used this, in the terminal window, on my mac: python -m SimpleHTTPServer 8000.

Tram Nguyen
Tram Nguyen
1,255 Points

Hi Michael, I have just tried that and it still not work :((

Hugo Magalhaes
Hugo Magalhaes
6,062 Points

Hi Michel! It works! Thanks for the hint! 🙌

Michael Cuddy
Michael Cuddy
30,649 Points

Good day Maria, All you do, if your on a mac, is type: python -m SimpleHTTPServer 8000 or for python3: python -m http.server Then go to localhost http://0.0.0.0:8000/ most likely. It could be something different. There you can see your project folder and click it. Sorry if the directions are not clear. Hopefully that helps you. On a Windows machine they should be somewhat similar.

Maria Te
Maria Te
8,520 Points

Thank you. I will try this. And it works! Thank you so much! Big help

Michael Cuddy
Michael Cuddy
30,649 Points

Tram I noticed that your line <script type ="text/babel" src="./app.js"></script> has a space in it between type ="text/babel" but I ran your code on my system and it ran fine. Are you sure your running it off, at the very least a server?

Tram Nguyen
Tram Nguyen
1,255 Points

I just launch it to the browser by "alt b" and the web page does not have any content. But in the previous lesson (not Babel), the web page did show.

Tram Nguyen
Tram Nguyen
1,255 Points

I have figured out my problem which is Google Chrome does not allow me to run babel, due to "CORS policy". So when I try a different browser and it works. Thank you guys so much for helping me :))

Which browser are you using?

Maria Te
Maria Te
8,520 Points

I'm pretty sure his browser is Google Chrome

Jesus Mendoza
Jesus Mendoza
23,270 Points

Hi Tram Nguyen,

It is really hard to help you with so little information, please provide us with more details.

Tram Nguyen
Tram Nguyen
1,255 Points

Hi, I followed the tutorial and do the same to it, but the content using JSX does not appear on the screen or in the html source code in the browser when I ran it. I have tried in the workspace and it worked there.

Zack Jackson
Zack Jackson
30,205 Points

Post your code please. Nothing is showing up in the browser or the console?

Tram Nguyen
Tram Nguyen
1,255 Points

Here is my index.html file

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div id="root"></div>
            <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
            <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
            <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
            <script type ="text/babel" src="./app.js"></script>
    </body>
</html>

Here is my app.js file:

const title = <h1>First React Element</h1>;
const desc = <p>I just learn how to create a React node and render it to DOM</p>;

const header = React.createElement(
    'header',
     null,
     title, 
     desc
 );
ReactDOM.render(
    header, document.getElementById("root")
);

I'm having the same issue as well. Here's the link to my workspace: https://w.trhou.se/3j7cwy4kiy I put what i needed to into babeljs.io but it's doing the same thing. my screenshot/ image link

Leon Hoffmann
Leon Hoffmann
6,620 Points

You will need to run it on a server as @micheal cuddy said in first place (I use MAMP for local development as a server environment) to make it work as expected.

Maria Te
Maria Te
8,520 Points

How will you make it into a server? Having the same problem!

Im using the local host as a server but when i change my elements in app.js and refresh the page the components do not update? how do i fix this?

sb20
sb20
15,503 Points

Chrome blocks it. It works in edge.

https://stackoverflow.com/questions/20904098/react-js-example-in-tutorial-not-working

I set up a local host and it works now in chrome.

Daesy Stephens
Daesy Stephens
3,687 Points
  • go to your terminal and go to the location where your file is ex ./treehouse/scoreboard
  • run this code python -m http.server [here you put your terminal num] ex: python -m http.server 8800
  • then go to your browser and type localhost:8800
Jakub Drobina
Jakub Drobina
12,671 Points

i tried it all and i dosent work for me if im running localhost:8000 it displays: This site is unreachable and when im tunning by the index.html file i get this errors:

Access to XMLHttpRequest at 'file:///C:/Users/drobi/Desktop/1ReactApp/app.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

and :

Failed to load resource: net::ERR_FAILED

Jakub Drobina
Jakub Drobina
12,671 Points

okay nevermind o have already solve it i wast typing : python -m SimpleHTTPServer 8000 and it didnt worked but when i typed py -m SimpleHTTPServer 8000 it worked (im using windows)