您的位置：首页 > Web前端 > React

SPA：React + React-router 入门demo

2016-05-27 09:11 375 查看
依赖Node.js、npm（或 cnpm）

0、基础代码文件结构：



1、初始化 package.json 文件： 
cnpm init


（设置入口文件为 index.js）

package.json （文件部分内容）:

...
"scripts": {
"start": "webpack-dev-server --inline --content-base ."
},
"dependencies": {
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-router": "^2.0.0"
},
"devDependencies": {
"babel-core": "^6.5.1",
"babel-loader": "^6.2.2",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"http-server": "^0.8.5",
"webpack": "^1.12.13",
"webpack-dev-server": "^1.14.1"
}
...


科普：dependencies 与 devDependencies区别：

dependencies：代码运行所需依赖，
cnpm install packageName --save


devDependencies：代码开发所需依赖， 
cnpm install packageName --save-dev


2、代码

index.html :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>


index.js :

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, hashHistory } from 'react-router'
//import { Router, browserHistory} from 'react-router'
import App from './modules/App'
import About from './modules/About'
import Repos from './modules/Repos'

render((
<Router history={hashHistory}>
{/*<Router history={hashHistory}> 此处若写成browserHistory，则以路径方式填写路由*/}
<Route path="/" component={App}>
<Route path="/repos" component={Repos}/>
<Route path="/about" component={About}/>
</Route>
</Router>
), document.getElementById('app'))


modules/App.js :

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>
{this.props.children}
</div>
)
}
})


modules/About.js :

import React from 'react'

export default React.createClass({
render() {
return <div>About</div>
}
})


modules/Repos.js :

import React from 'react'

export default React.createClass({
render() {
return <div>Repos</div>
}
})


webpack.config.js :

module.exports = {
entry: './index.js',

output: {
filename: 'bundle.js',
publicPath: ''
},

module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
]
}
}


3、运行

cnpm install
(没有下载依赖，执行此步，否则跳过)

cnpm start


浏览器打开地址： http://localhost:8080 即可看到运行结果。

webpack-server默认开启8080端口

4、运行结果截图：

首页：



子页：



参考文献

React + React-router 示例代码

React.js 中文文档

React-router 中文文档

React-router 英文文档
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航