역시 이번 예제를 하기 위하여 03-navigating-with-link 디렉토리로 이동하고 미리 npm install을 실행한다.
그런 다음 아래 모듈을 먼저 살펴보자
[binrang@binrang 03-navigating-with-link]$ cd modules/
[binrang@binrang modules]$ vi App.js
import React from 'react'
export default React.createClass({
render() {
return <div>Hello, React Router!</div>
}
})
|
별거 없다.. 단순히 Hello 를 찍는 것 밖에 안보인다.
이 파일을 수정 해 보자.
import React from 'react'
import { Link } from 'react-router'
export default React.createClass({
render() {
return (
<div>
<h1>React Router Tutorial</h1>
<ul role="nav">
<li><Link to="/about">About</Link></li>
<li><Link to="/repos">Repos</Link></li>
</ul>
</div>
)
}
})
|
이제 npm start를 해보자.
[binrang@binrang 03-navigating-with-link]$ npm start
> tutorial@1.0.0 start /home/binrang/react/react-router-tutorial/lessons/03-navigating-with-link
> webpack-dev-server --inline --content-base .
http://localhost:8080/
webpack result is served from /
content is served from /home/binrang/react/react-router-tutorial/lessons/03-navigating-with-link
Hash: 7575a63717a090a63b72
Version: webpack 1.13.2
Time: 2009ms
Asset Size Chunks Chunk Names
bundle.js 1.09 MB 0 [emitted] main
chunk {0} bundle.js (main) 1.03 MB [rendered]
[0] multi main 40 bytes {0} [built]
[1] (webpack)-dev-server/client?http://localhost:8080 3.97 kB {0} [built]
.......
[297] ./modules/About.js 454 bytes {0} [built]
[298] ./modules/Repos.js 454 bytes {0} [built]
webpack: bundle is now VALID.
|
이제 웹 화면을 확인 해 보자.
 |
| 이렇게 링크가 걸린 화면을 생성되었다. |
 |
| about 링크 |
 |
| repos 링크 |
아.. 이렇게 사용하는 거구만....
.
참고 URL : 03-navigating-with-link
댓글 없음:
댓글 쓰기