JavaScript React Basics (retired) Thinking in Components Decomposing our Application

Even if I delete Component.propTypes the code still works why?

function Header(props){
 return (
     <div className="header">
        <h1>{props.titleName}</h1>
      </div>
 ); 
}

Header.propTypes = {
  titleName: React.PropTypes.string.isRequired,
};

function Player(props){
  return (
    <div className="player">
      <div className="player-name">
        {props.name}
      </div>
      <div className="player-score">
        <Counter score ={props.score}/>
      </div>
    </div>
  );
};
//--EVEN IF I DELETE THE CODE OR OTHER propTypes BELOW IT WORKS WHY?
Player.propTypes = {
 name: React.PropTypes.string.isRequired,
 score: React.PropTypes.number.isRequired,
};

//-------------------------------------ABOVE CODE-----------------------------------------------
function Counter(props){
  return (
    <div className="counter">
       <button className="counter-action decrement"> - </button>
          <div className="counter-score"> {props.score} </div>
       <button className="counter-action increment"> + </button>
    </div>
  );
}

Counter.propTypes = {
  score: React.PropTypes.number.isRequired,
};

function Application(props) {
  return (
   <div className="scoreboard">
        <Header titleName={"Scoreboard"}/>
      <div className="players">
          <Player name ={"Anurag"} score = {34}/>
          <Player name = {"Andew"} score = {45}/>
          <Player name = {"Suzanne"} score = {42}/>
      </div>
   </div>
  );
}

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

1 Answer

Jon Snow
Jon Snow
14,008 Points

It still works because from what I understand that code is setting up rules for which type of variable should go in... you can set the "name" to a number by deleting that code but with it, doing so will throw an error in the console...