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

Blake Baxendell
Blake Baxendell
16,341 Points

First step doesn't seem to work

Here is my code:

ReactDOM.render(<h1>Hello!</h1>, document.getElementById('container'));

All I get is loading still. I apologize if I asked this twice, but it looks like the first time the question didn't go through.

I am also seeing Babel errors out of the box in console. It says: Range out of order in character class

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

I ran your code, and it works fine. I get "HELLO!" written on the screen as it is being styled by CSS. Are you doing this in workspaces or on your local environment? From the workspaces the only error I get is that it can't find the favicon, which doesn't affect the functionality at all.

Blake Baxendell
Blake Baxendell
16,341 Points

Getting this on my local cause I would like to save my projects to go back to for reference. I seem to not be able to learn very well using treehouse workspace since you can't seem to go back to things you have done. So I copied all the files to a local environment. I do see it works on Workspace, so not understanding what workspace has that my local development does not since I copied all the files. I checked the linking on the files too and they are all linked properly.

2 Answers

Blake Baxendell
Blake Baxendell
16,341 Points

Sorry, I didn't realize this was closed. So what i found out was with my local was that I had to use the complete path to my files instead of simple path. So since my dev space was: http://testbed.dev, I had to make my path to the babel files: http://testbed.dev/js/babel.js

Before I had it just as /js/babel.js

Jessica Tran
Jessica Tran
7,195 Points

Yep, on the same note, I just opened it by starting a local python server in the terminal directory "python -m SimpleHTTPServer" and then opening it on the browser as "localhost:8000".

Michael Kalmykov
Michael Kalmykov
8,915 Points

I'm having the same issue, works in workspace, but copy / paste and doesn't work on local.

Consol error I get XMLHttpRequest cannot load file:///Users/michael.kalmykov/Desktop/ReactBasicsProject/app.jsx. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.