Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React Basics (2018) 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
Courses Plus 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,064 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/

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

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,064 Points

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

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.

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

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?

I'm pretty sure his browser is Google Chrome

Jesus Mendoza
Jesus Mendoza
23,289 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,220 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.

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
4,590 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,675 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,675 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)