npm start
: run servercomponent
Component
: function that return HTML
(Self-Closing Tag (</>), get information from Prop
JSX
: JavaScript -> HTMLimport React from "react";
: to make sure react understand jsx is using ComponentProp
: able to send information to Component
, attribution
go to Component
's argument as prop
{}
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;
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 functionconst 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;
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;
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;
class component
: react component
를 상속받음rendet
method 실행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;
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>
}
}
export default App;
setState
-> render()
-> componentDidUpdate()
Life cycle method
: react create and kill componentNounting
: created -> Constructor
Unmounting
: dying -> componentDidMount()
: component가 처음으로 생성됨을 알려줌Updating
: get updated by update
=> render
=> componentDidMount()
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;
componentDidMount()
:fetch dataimport 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;
className
이라고 함