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

Kate Ross
seal-mask
.a{fill-rule:evenodd;}techdegree
Kate Ross
Full Stack JavaScript Techdegree Student 19,434 Points
Posted by Kate Ross
.a{fill-rule:evenodd;}techdegree
Kate Ross
Full Stack JavaScript Techdegree Student 19,434 Points

Serving files with localhost - working in firefox but not chrome

In Chrome it only shows loading and I get the following error message. 

Uncaught ReferenceError: reactDOM is not defined
    at eval (eval at transform.run (babel-browser.min.js:4), <anonymous>:4:1)
    at Function.transform.run (babel-browser.min.js:4)
    at exec (babel-browser.min.js:4)
    at babel-browser.min.js:4
    at XMLHttpRequest.xhr.onreadystatechange (babel-browser.min.js:4)

3 Answers

Matthew Long
Matthew Long
28,407 Points
Matthew Long
Matthew Long
28,407 Points

Glad you figured it out, because I couldn't find anything wrong with your code. If I remember correctly, the instructor starts off most of his videos with the server stopped.

Omprakash Panigrahi
Omprakash Panigrahi
9,632 Points
Omprakash Panigrahi
Omprakash Panigrahi
9,632 Points

if you are using a local environment and use chrome, then in the developer tools, go to network, check the disable cache box. It disables caching when the developer tools is open. And now you can keep the developer tools open and when you refresh the page, it wont cache the old data and the updated saved file will be displayed on the browser.

Another method is to use create-react-app which will be taught later i guess. Happy Coding.

Matthew Long
Matthew Long
28,407 Points
Matthew Long
Matthew Long
28,407 Points

I'll need to see more of your code to know for sure, but it may be the spelling issue? It is ReactDOM, not ReactDom, for example. Are you using the latest version of React?

Kate Ross
seal-mask
.a{fill-rule:evenodd;}techdegree
Kate Ross
Full Stack JavaScript Techdegree Student 19,434 Points
Kate Ross
.a{fill-rule:evenodd;}techdegree
Kate Ross
Full Stack JavaScript Techdegree Student 19,434 Points

This is the code in my app.jsx file:

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

and in my index.html I am linking the project files which have react locally

<!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="./vendor/react.js"></script>
    <script src="./vendor/react-dom.js"></script>
    <script src="./vendor/babel-browser.min.js"></script>
    <script type="text/babel" src="./app.jsx"></script>
  </body>
</html>