React 필기1

React 프로젝트 생성

npm install -g create-react-app
create-react-app 앱이름
해당 앱으로 Open folder

React로 Component상속받아 사용하기

App.js

import React, { Component } from 'react';
class App extends Component {}

src/에 *.js로 컴포넌트 만들어서 사용한다. 각 파일 안에도

import React, { Component } from 'react';

필수

constructor(props) --> class 안에 넣어주는 code임

제일 먼저 실행돼서 초기화를 담당한다.
ex)

constructor(props){
super(props);
this.state = {
이름:{title:'내용', sub:'내용'}
이름:[ //여러개일 경우
{id:1, title:'내용', desc:'내용'},
{id:2, title:'내용', desc:'내용'},
]
}
}

this.state사용방법

class App extends Componenet {
constructor(props) {
... }
render(){
return(

    	<div className="App">

<src/에 생성한 컴포넌트 클래스이름 title={this.state.이름.title} sub={this.state.이름.sub}>
</src/에 생성한 컴포넌트 클래스이름>

); } } export default 클래스명; --> 클래스 밖에 꼭 써줘야함

render() {
return (

  <div className="App">
    <Subject title={this.state.subject.title}
    sub={this.state.subject.sub}>    
    </Subject>
    <Subject title="React" sub="For UI"></Subject>
    <TOC data={this.state.contents}></TOC>
    <Content title="HTML" desc="HTML is HyperText Markup Language."></Content>
  </div>
);

}