2.0 Creating your first React Component

• npm start : run server
• react act with component
• Component : function that return HTML (Self-Closing Tag (</>), get information from Prop
• JSX : JavaScript -> HTML
• import React from "react"; : to make sure react understand jsx is using Component
• react application은 한번에 한개의 compotnent만 render 가능

2.1 Reusable Components with JSX + Props

• Prop : able to send information to Component , attribution go to Component's argument as prop
• use {} to get props in augment
App.js

import React from "react";

function Food({fav}){
  return <h1> I liked {fav}</h1>
}
function App() {
  return (
  <div>
    <h1>Hello</h1>
    <Food fav="kimchi"/>
    <Food fav="ramen"/>
    <Food fav="apple"/>
    <Food fav="lemon"/>
  </div>
  );
}

export default App;

2.2 Dynamic Component Generation

• map : give you array from array - JS function that takes an array, excutes function in each item of array and give you array with result of function

const friends =["dal","mark","lynn","japan guy"];
friends.map(current =>{
	console.log(current);
    return 0;
}

result:
dal
mark
lynn
japan guy
[0,0,0,0]
current : just an object that is currently being processed

const friends =["dal","mark","lynn","japan guy"];
friends.map(function(friend){
    return friends+"❤";
}

result: ["dal❤","mark❤","lynn❤",japan guy❤"]
App.js

import React from "react";


function Food({name,picture}){
  return (
    <div>
      <h2>I like {name}</h2>
      <img src={picture}/>
    </div>
  );
}

const foodILike=[ {
  name: "Kimchi",
  image:
    "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg"
},
{
  name: "Samgyeopsal",
  image:
    "https://3.bp.blogspot.com/-hKwIBxIVcQw/WfsewX3fhJI/AAAAAAAAALk/yHxnxFXcfx4ZKSfHS_RQNKjw3bAC03AnACLcBGAs/s400/DSC07624.jpg"
},
{
  name: "Bibimbap",
  image:
    "http://cdn-image.myrecipes.com/sites/default/files/styles/4_3_horizontal_-_1200x900/public/image/recipes/ck/12/03/bibimbop-ck-x.jpg?itok=RoXlp6Xb"
},
{
  name: "Doncasu",
  image:
    "https://s3-media3.fl.yelpcdn.com/bphoto/7F9eTTQ_yxaWIRytAu5feA/ls.jpg"
},
{
  name: "Kimbap",
  image:
    "http://cdn2.koreanbapsang.com/wp-content/uploads/2012/05/DSC_1238r-e1454170512295.jpg"
}];

function App() {
  return (
    <div>
      {foodILike.map(dish => (
      <Food name={dish.name} picture={dish.image}/>
    ))}
  </div>
  );
}

export default App;

2.3 map Recap

• Key prop : only for internal use in React
• img element must have alt prop

App.js

import React from "react";

const foodILike=[ 
  {id:1,
  name: "Kimchi",
  image:
    "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg",
  rating:4.3}, 
  ~~~~~~~~~ 
  ];



function Food({ name, picture }) {
  return (
    <div>
      <h2>I like {name}</h2>
      <img src={picture} alt={name} />
    </div>
  );
}


function App() {
  return (<div>
      {foodILike.map(dish=>(<Food key={dish.id} 
      name={dish.name} picture={dish.image}/>
      ))}
    </div>);
}

export default App;

2.4 Protection with PropTypes

• prop-types : 내가 전달받은 props가 내가 원하는 props인지 확인
  import PropTypes from "prop-type";

• Check Props by requiredness OR propTypes
  rating : Proptypes.number.isRequired : rating prop은 반드시 number 타입
  rating : Proptypes.number : rating prop은 반드시 number 또는 undefined
  -> 에러 X : rating Prop이 없는 경우 또는 number인 경우
  -> 에러 O : rating Prop이 String인 경우

• object.propTypes로 선언

import React from "react";
import Proptypes from "prop-types";

const foodILike=[ 
  {id:1,
  name: "Kimchi",
  image:
    "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg",
  rating:4.3}, 
  ~~~~~~~~~ 
  ];


function Food({ name, picture,rating }) {
  return (
    <div>
      <h2>I like {name}</h2>
      <h4> rating {rating} out of 5</h4>
      <img src={picture} alt={name} />
    </div>
  );
}

Food.propTypes={
  name:Proptypes.string.isRequired,
  picture:Proptypes.string.isRequired,
  rating:Proptypes.number.isRequired
};


function App() {
  return (<div>
      {foodILike.map(dish=>(<Food key={dish.id} 
      name={dish.name} picture={dish.image} rating={dish.rating}/>
      ))}
    </div>);
}

export default App;

3.0 Class Components and State

• class component : react component를 상속받음
• react는 자동적으로 rendet method 실행
• state는 객체로 변경 원하는 data 넣기
• prop인 onClick을 button에 붙이고 this.add로 연결해 함수 호출

import React from "react";
/*import Proptypes from "prop-types";*/

class App extends React.Component{
  state={
    count:0
  };
  add=()=>{
    console.log("add");
  };
  minus=()=>{
    console.log("minus");
  };
  render(){
    return <div>
      <h1>The number is {this.state.count}</h1>
      <button onClick={this.add}>Add</button>
      <button onClick={this.minus}>Minus</button>
    </div>
  }
}

export default App;

3.1 All you need to know about State

• react는 render Method를 refresh 하지 못함
• setState() 통해 state가 바뀌었을 때 render method에서 현재/새로운 state 받아옴

import React from "react";
/import Proptypes from "prop-types";/

class App extends React.Component{
state={
count:0
};
add=()=>{
this.setState(current=>({count:current.count+1}));
/this.setState({count : this.state.count+1 }); /
};
minus=()=>{
this.setState(current=>({count:current.count-1}))
/this.setState({count : this.state.count-1 }); /
};
render(){
return

  <h1>The number is {this.state.count}</h1>
  <button onClick={this.add}>Add</button>
  <button onClick={this.minus}>Minus</button>
</div>

import React from "react";
/*import Proptypes from "prop-types";*/

class App extends React.Component{
  state={
    count:0
  };
  add=()=>{
    this.setState(current=>({count:current.count+1}));
    /*this.setState({count : this.state.count+1 }); */
  };
  minus=()=>{
    this.setState(current=>({count:current.count-1}))
    /*this.setState({count : this.state.count-1 }); */
  };
  componentDidMount(){
    console.log("compent rendered!");
  }
  componentDidUpdate(){
    console.log("I just updated! ");
  }
  componentWillUnmount(){
    console.log("Good bye");

  }
  render(){
    console.log("I'm rendering");
    return <div>
      <h1>The number is {this.state.count}</h1>
      <button onClick={this.add}>Add</button>
      <button onClick={this.minus}>Minus</button>
    </div>
  }
}

export default App;

import React from "react";
/*import Proptypes from "prop-types";*/

class App extends React.Component{
  state={
    isLoading:true
  };
  componentDidMount(){
    setTimeout(()=>{
      this.setState({isLoading:false});  
    },60000);
  }
  render(){
    const {isLoading}=this.state;
    return <div>{isLoading ? "Loading.." : "We are ready"}</div>

  }
}
 
export default App;