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

Kate Ross
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

Kate Ross
Kate Ross
Full Stack JavaScript Techdegree Student 19,434 Points

I fixed it.. for some reason chrome wasn't updating when I saved the file and restarted the server...

Matthew Long
Matthew Long
28,370 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

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,370 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
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>