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 (retired) First Steps in React Our First Application

Posted by Bachir SELLAMI
Bachir SELLAMI
3,209 Points

"Our First Application" doesn't work ???

I have downloaded the project. When I click on index.html I have a page with "LOADING..." a t the top left of the page. When I ctrl-Shift-J (google Chrome on windows PC) I have this error message :

XMLHttpRequest cannot load file:///F:/AutoForm/Javascript/teamtreehouse/ReactBasics/ReactBasicsProject/app.jsx. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

6 Answers

Nathan Brenner
Nathan Brenner
35,844 Points

Hey, I got the same error, and I got it working. I got the script tags from a cdn, and just dropped the javascript code into index.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>scoreboard</title>
        <link rel="stylesheet" href="./app.css">
    </head>
    <body>
        <div id="container">Loading...</div>
        <script src="https://unpkg.com/react@15.4.0/dist/react.js"></script>
        <script src="https://unpkg.com/react-dom@15.4.0/dist/react-dom.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
        <script type="text/babel">
            function Application(){
                return (
                    <div>
                        <h1>Hello from React</h1>
                        <p>I was rendered from the application component</p>
                    </div>
                );
            }

            ReactDOM.render(<Application />, document.getElementById('container'));
        </script>
    </body>
</html>
Bachir SELLAMI
Bachir SELLAMI
3,209 Points
Bachir SELLAMI
Bachir SELLAMI
3,209 Points

thanks a lot

Nathan Brenner
Nathan Brenner
35,844 Points

Just a fair warning: I don't really like writing javascript in html that way, but I'm following along with this course in this way. I'm on VS Code, and I don't get the javascript syntax highlighting I would get if I were in a .js, .jsx, or .ts file. I also noticed that the app would break if I commented out lines of in the script tag, so I've had to be more careful about deleting lines when replacing them with new lines.

Luca Spezzano
Luca Spezzano
10,417 Points
Luca Spezzano
Luca Spezzano
10,417 Points

That's the answer: http://stackoverflow.com/questions/20041656/xmlhttprequest-cannot-load-file-cross-origin-requests-are-only-supported-for-ht

you can run this command in the folder: python -m SimpleHTTPServer 8000

And it will run a local server and it will work!

Sylwester Guzek
Sylwester Guzek
16,182 Points
Sylwester Guzek
Sylwester Guzek
16,182 Points

above example is for phyton anyhow it will work with any http server

Ker Zhang
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Ker Zhang
Full Stack JavaScript Techdegree Graduate 29,113 Points
Ker Zhang
.a{fill-rule:evenodd;}techdegree seal-36
Ker Zhang
Full Stack JavaScript Techdegree Graduate 29,113 Points

Since you guys are learning React JS, you can also install this Nodejs based live-server at : https://github.com/tapio/live-server

Etienne Fichot
Etienne Fichot
18,846 Points
Etienne Fichot
Etienne Fichot
18,846 Points

You just need to replace the babel-browser extension by babel-standalone

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.17.0/babel.min.js"></script>