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>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./app.css" />

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

function Application() {
  return (
    <div className="application">
        <div className="header">

        <div className="players">
            <div className="player">
                <div className="player-name">
                    Carlos Lantigua
              <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>

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