react설치: npm install -g create-react-app
프로젝트 생성: create-react-app hello-world REF
============= Form 예제 ===================
class Game extends React.Component {
constructor(props) {
super(props);
this.onSubmit = this.onSubmit.bind(this); //onSubmit등 이벤트를 쓸때는 생성자에서, 이 window로 onSubmit을 bind 함
}
onSubmit(event) {
event.preventDefault();
console.log(this.input.value) // this.input으로 바로 언급가능
//const data = new FormData(event.target);
let data={};
data.name = event.target[0].value;
data.value = event.target[1].value;
fetch('/api/form-submit-url', {
method: 'POST',
body: data,
});
}
onClick() { //각종 이벤트 정의 가능
console.log('test);
}
render() {
const list = [ 'test1', 'test2']; //여기서 변수 선언 가능. const나 let을 많이 쓴다. ES6문법.
return (
<div className="game"> //html에선 class를 쓰지만, JSX에서는 className을 쓴다.
<div className="game-board">
<Board />
</div>
<div className="game-info" onClick = {this.onClick}> //이벤트를 이런식으로 호출 가능
<div>{/* status */}</div>
<ol>{/* TODO */}</ol>
</div>
<form onSubmit={this.onSubmit}>
<input onChange={this.onChange} ref={input => this.input=input} />
</form>
</div>
);
}
}
============= setState 예제 ===================
class App extends React.Component {
constructor(props) {
super(props);
this.state= { //JSON포맷으로 state 지정
title: 'My Title'
};
this.onClick = this.onClick.bind(this);
}
onClick() {
this.setState( //state 수정시에는 꼭, setState() 함수로 수정
{title: 'New Title'}
);
}
render() {
return (
<div className="App">
<h1> {this.state.title} </h1> //state 사용
<div onClick = {this.onClick}> Click here </div>
<MyComponent /> //다른 Component 그리는 방법. 혹은
//혹은 아래처럼 변경하면서 사용가능 :
// 이경우 MyComponent render() 첫줄에는 const {title, name, onClick } = this.props;
<MyComponent
title =' __'
name = 'My Name'
onClick = {this.onClick}
/>
</div>
);
}
}
