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 (2018) Thinking in Components Create the Player Component

My problem seems to be with Chrome and NOT my code

I am trying to get the Player Component to render. I am running Chrome Version 72.0.3626.96 (Official Build) (64-bit) on a Mac with Mojave.

Here is my app.js file:

const Header = () => {
    return (
        <header>
            <h1>Scoreboard</h1>
            <span className="stats">Players: 1</span>
        </header>
    );
}

const Player = () => {
    return (
        <div className="player">
            <span className="player-name">
                Doug
            </span>
            <div className="counter">
                <button className="counter-action decrement"> - </button>
                <span className="counter-score">35</span>
                <button className="counter-action increment"> + </button>
            </div>
        </div>
    );
}

ReactDOM.render(
    <Player />,
    document.getElementById('root')
);

Here are the things I have tried:

  1. Running in Chrome Incognito -- things run brilliantly
  2. Running in Safari -- things run brilliantly
  3. Running in Firefox -- things run brilliantly
  4. Running in Chrome (vanilla) -- only the Header Component will render, no matter which component is present in the ReactDOM.render()
  5. Firing up the server this way: python3 -m http.server -- see items 1-4
  6. Firing up the server this way: python3 -m http.server 8080 -- see items 1-4
  7. Changing the render back and forth between Header and Player -- see items 1-4

Clearly my code is working except in vanilla Chrome. In all cases I have used the developer tools to see what is going on with the elements. In all cases, the root div (except vanilla Chrome) is updated properly and the components render properly. I have stripped Chrome of all extensions and I have re-downloaded and re-installed it. There should be nothing mucking up the works.

But clearly there is.

Any ideas?

If you're on a Mac, try doing a hard refresh while in Chrome by hitting Shift + Command + R. If on Windows hold down Ctrl and click the reload button or hold down Ctrl and press F5. Sometimes not clearing your cache could cause that.

I hope it helps...

3 Answers

I got past this. I forget what I did. Not much help, hey?

Douglas Counts
Douglas Counts
10,060 Points

I know this is an old question, but I'll leave tips for others that may read this. The problem probably is in your index.html file. Did you add the babel-standalone script tag just above your app.js script tag?

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Also inside your index.html file, did you edit your app.js script tag to add the type="text/babel" as that tells babel-standalone to convert your app.js file to pure JavaScript?

<script type="text/babel" src="./app.js"></script>

That whole section inside your index.html file should look exactly like so:

  <body>
    <div id="root"></div>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel" src="./app.js"></script>
  </body>