React 공부 (with nico 2장)

2.0 Setting up the Project

 

//파일 만들기
npx create-react-app JIWON(이름)

//그리고 App.js, index.js빼고 다 지우기

//index.js 내용
import React from 'react';
import ReactDOM from 'react-dom';
import App from './Components/App';

ReactDOM.render(<App />, document.getElementById("root"));


//App.js내용
import React, {Component } from "react";

class App extends Component {
	render() {
    	return <div className="App" />;
    }
}

//이후에 yarn add prop-types

 

 

2.1 React Router Part One

//yarn add react-router-dom 으로 돔 다움받기

//src안에 Components라는 폴더 만들고 Router.js + App.js 두개 넣기

// 나머지 파일들은 src및에 Routes라는 폴더 안에 있음

//App.js안에 render안에 return안에 어떤것을 보여줄지 1개의 컴포넌트로 넣어주셈

//Router.js를 만들고

import React from "react";
import {BrowserRouter as Router, Route, Redirect, Switch} from "react-router-dom";
import Home from "../Routes/Home";
import TV from "../Routes/TV";
import Search from "../Routes/Search";

export default () => (
    <Router>
        <Switch>
            <Route path="/" exact component={Home} />
            <Route path="/tv" exact component={TV} />
            <Route path="/tv/popular" render={() => <h1>PoPULAR</h1>} />
            <Route path="/search" exact component={Search} />
            <Redirect from="*" to="/" />
        </Switch>
    </Router>
);
//이런느낌으로 만들기

 

 

2.2 React Router Part Two

//Components에 Header.js 만들기 (이게 위에 슬라이드 인듯)

//내용은 이렇게

import React from "react";

export default () => (
    <header>
        <ul>
            <li>
                <a href="/">Movies</a>
            </li>
            <li>
                <a href="/TV">TV</a>
            </li>
            <li>
                <a href="/Search">Search</a>
            </li>
        </ul>
    </header>
)

//그리고 위에 2.1의 코드에서 Redirect는 아무것도 일치하지 않으면 저기로 가게 해둔다는 의미임
//exact붙이면 무조건 똑같이 타이핑 해야된다는거고