JavaScript React Basics (retired) First Steps in React Our First Application

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,832 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>
Nathan Brenner
Nathan Brenner
35,832 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

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

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

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>