디렉토리 이동 후 기본적으론 npm install 을 해 준다.
1. index.js를 열어 아래와 같은 작업을 해보자
- Router, Route, hashHistory 를 import 한다.
- render 에 Router 를 추가하기로 한다.
현재 Code 는 아래와 같다.
[binrang@binrang 01-setting-up]$ cd ../02-rendering-a-route/
[binrang@binrang 02-rendering-a-route]$ ls -al
합계 28
drwxrwxr-x. 3 binrang binrang 4096 10월 21 14:22 .
drwxrwxr-x. 16 binrang binrang 4096 10월 21 14:22 ..
-rw-rw-r--. 1 binrang binrang 2041 10월 21 14:22 README.md
-rw-rw-r--. 1 binrang binrang 156 10월 21 14:22 index.html
-rw-rw-r--. 1 binrang binrang 140 10월 21 14:22 index.js
drwxrwxr-x. 2 binrang binrang 19 10월 21 14:22 modules
-rw-rw-r--. 1 binrang binrang 563 10월 21 14:22 package.json
-rw-rw-r--. 1 binrang binrang 252 10월 21 14:22 webpack.config.js
[binrang@binrang 02-rendering-a-route]$ vi index.js
import React from 'react'
import { render } from 'react-dom'
import App from './modules/App'
render(<App/>, document.getElementById('app'))
|
이 코드를 아래와 같이 수정한다.
import React from 'react'
import { render } from 'react-dom'
import { Router, Route, hashHistory } from 'react-router'
import App from './modules/App'
render((
<Router history={hashHistory}>
<Route path="/" component={App}/>
</Router>
), document.getElementById('app'))
|
2. npm start 를 한 후 브라우저에서 http://localhost:8080 을 열어보면 아래와 같은 화면을 볼 수 있다.
3. 이번에는 두 개의 컴포넌트를 추가 해보자.
아래 디렉토리로 이동하여 보면 App.js 파일만 있다. 여기에 두개의 파일을 생성할 것이다.
[binrang@binrang 02-rendering-a-route]$ cd modules/
[binrang@binrang modules]$ ls -al
합계 8
drwxrwxr-x. 2 binrang binrang 19 10월 21 14:22 .
drwxrwxr-x. 4 binrang binrang 4096 10월 21 15:43 ..
-rw-rw-r--. 1 binrang binrang 125 10월 21 14:22 App.js
[binrang@binrang modules]$
|
[binrang@binrang modules]$ vi About.js
import React from 'react'
export default React.createClass({
render() {
return <div>About</div>
}
})
|
[binrang@binrang modules]$ vi Repos.js
import React from 'react'
export default React.createClass({
render() {
return <div>Repos</div>
}
})
|
그 다음 상위 디렉토리로 이동해서 index.js를 수정하자.
[binrang@binrang 02-rendering-a-route]$ vi index.js
import React from 'react'
import { render } from 'react-dom'
import { Router, Route, hashHistory } from 'react-router'
import App from './modules/App'
import About from './modules/About'
import Repos from './modules/Repos'
render((
<Router history={hashHistory}>
<Route path="/" component={App}/>
<Route path="/repos" component={Repos}/>
<Route path="/about" component={About}/>
</Router>
), document.getElementById('app'))
|
4. npm start 쉘의 반응과 웹 화면을 살펴보자
webpack: bundle is now INVALID.
Hash: b647350ba7579dbe7dd0
Version: webpack 1.13.2
Time: 290ms
Asset Size Chunks Chunk Names
bundle.js 1.09 MB 0 [emitted] main
chunk {0} bundle.js (main) 1.03 MB [rendered]
[75] ./index.js 991 bytes {0} [built]
[297] ./modules/About.js 454 bytes {0} [built]
[298] ./modules/Repos.js 454 bytes {0} [built]
+ 296 hidden modules
webpack: bundle is now VALID.
|
 |
| 응?. 뭐야 변화를 못 느끼겠다. |
 |
| http://localhost:8080/#/about 입력하니 이런 화면을 만나게 된다. |
 |
| http://localhost:8080/#/repos 입력하니 이 화면을 만나게 된다. |
오... 이제 뭔가 필이 온다....ㅎㅎ
.
참고 URL : 02-rendering-a-route
댓글 없음:
댓글 쓰기