JavaScript React Basics (retired) Thinking in Components Mocking up our Application

Carlos Lantigua
Carlos Lantigua
5,937 Points

Am I the only who's react score keeper app doesn't look like Jim's??

I have not touched the css, everything loads fine but it doesn't look like Jim's.. I get an ugly version of what prints out around the 7:38 minute mark of the video.

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

```jsx
function Application() {
  return (
    <div className="application">
        <div className="header">
            <h1>Scoreboard</h1>
        </div>

        <div className="players">
            <div className="player">
                <div className="player-name">
                    Carlos Lantigua
                </div>
              <div className="player-score">
                  <div className="counter">
                      <button className="counter-action decrement"> - </button>
                          <div className="counter score"> 31 </div>
                      <button className="counter-action increment"> + </button>
                  </div>
              </div>
            </div>
        </div>
   </div>
  );
}

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

2 Answers

Naomi Anderson
Naomi Anderson
12,725 Points

I'm the same. There's no 'players' in my CSS

Dale Severude
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Dale Severude
Full Stack JavaScript Techdegree Graduate 71,306 Points

Watch out for typos. Your "counter score" should be "counter-score".

I had issues with typing "classname" instead of "className". Any typos will create some ugly rendering of your content!