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

Posted by Tyrique Daniel
Tyrique Daniel
10,270 Points

Why is my Scoreboard not showing up?

I am trying to create the react scoreboard but my table is not showing up. I believe all of y syntax is correct could someone have a look?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Scoreboard</title> <link rel="stylesheet" href="./app.css" /> </head>

<body>

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

</html>

const Header = () =>

    <header>
        <h1>ScoreBoard</h1>
            <span className="stats">Player: 1 </span>
    </header>;

const Player = () => { return( <div className="player"> <span classNae="player-name"> Guil </span> <Counter /> </div> ); }

const counter = () => { return( <div className="counter"> <button className="counter-decriiment">-</button> <span className="counter-score"></span> <button className="counter-incriment">+</button> </div> ); }

const App = () =>{ return( <div className="scoreboard"> <Header/> {/* { Players List } */} <PLayer /> </div> ); } ReactDom.render( <App />, document.getElementById('root') );

2 Answers

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,971 Points
KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,971 Points

I've made enough changes to where I'm returning this as a snapshot in case you or anyone wants to continue from here.

But mainly in index.html:

  • You are missing <div id="root"></div> in the body

And in app.js:

  • const counter should begin with uppercase C
  • <PLayer /> in const App should be <Player /> with a lowercase L
  • DOM in ReactDOM is uppercase
  • There are a few spelling issues in class names (incriment, decriiment, classNae)

It now displays a scoreboard but may not be complete

Tyrique Daniel
Tyrique Daniel
10,270 Points

Okay thank you this has been fixed. But my App.js file is not uploading because of this error in the console babel.min.js:24 Access to XMLHttpRequest at 'file:///C:/Users/user/Documents/GitHub/Portfolio/React/React-Project/app.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Tyrique Daniel
Tyrique Daniel
10,270 Points
Tyrique Daniel
Tyrique Daniel
10,270 Points

This is why it is not showing up it is working in workspaces.