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

使用React-route和Webpack快速构建一个react程序

2016-09-10 12:49 986 查看

https://segmentfault.com/a/1190000004543791


初始化项目

我们先创建个空文件夹，然后初始化 package.json ,填写一些基本信息。
$ npm init


接下来我们开始安装依赖项，我的 
package.json
 的依赖项如下
"devDependencies": {
"babel": "^5.5.6",
"babel-core": "^5.5.6",
"babel-loader": "^5.1.4",
"history": "^1.13.1",
"react": "^0.13.3",
"react-hot-loader": "^1.2.7",
"react-router": "^0.13.3",
"webpack": "^1.12.6",
"webpack-dev-server": "^1.12.1"
}


运行命令:
$ npm install


项目创建好后，我们接下来创建一些必要的文件和目录；
$ mkdir js css && touch index.html webpack.config.js


webpack

webpack （更多）是一款模块处理器，他会将你所有的代码打包成静态文件，放到你的开发的App中。

打开webpack.config.js，然后添加下面的代码:
var webpack = require('webpack');
module.exports = {
entry: [
'webpack/hot/only-dev-server',
"./js/app.js"
],
output: {
path: __dirname + '/build',
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
{ test: /\.css$/, loader: "style!css" }
]
},
plugins: [
new webpack.NoErrorsPlugin()
]
};


这份文件大概有四个配置项
entry
, 
output
, 
module
,
 plugins
.

entry
:指定打包的入口文件，每有一个键值对，就是一个入口文件。

output
：配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称，filename里面的[name]会由entry中的键替换,例子中的
/build/bundle.js
便是生成的文件。

resolve
：定义了解析模块路径时的配置，常用的就是extensions，可以用来指定模块的后缀，这样在引入模块时就不需要写后缀了，会自动补全.

module
：定义了对模块的处理逻辑，这里可以用loaders定义了一系列的加载器，以及一些正则。当需要加载的文件匹配test的正则时，就会进行处理。这里我们使用了
react-hot
 和 
babel
。
babel-loader
是我们使用ES-6进行开发时用于生成JS文件。

最后我们生成了一个style.css仅仅做个例子，告诉我们如何引入样式文件，实际上我们可以加载诸如
sass-loader
这样的加载器。

loader
对文件进行处理，这正是webpack强大的原因。比如这里定义了凡是.js结尾的文件都是用babel-loader做处理，而.jsx结尾的文件会先经过jsx-loader处理，然后经过babel-loader处理。当然这些loader也需要通过npm
install安装。

plugins
: 这里定义了需要使用的插件，比如commonsPlugin在打包多个入口文件时会提取出公用的部分，生成common.js。

NoErrorsPlugin
: 定义代码出现错误时的时受否自动重新加载。

这个时候我们再
package.json
中加入script 字段，
"scripts": {
"start": "webpack-dev-server --hot --progress --colors",
"build": "webpack --progress --colors"
}


这个时候我们输入一个
npm start
命令时候我们会启动一个webpack server这个时候你可以访问
localhost:8080/webpack-dev-server/#/
;如果你使用
npm
run build
时候可以将文件自动生成到
bulid/
下。

接下来我们新建
index.html
文件
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>New React App</title>
</head>
<body>
<section id="react"></section>
<script src="bundle.js"></script>
</body>
</html>


现在我们访问浏览器可以便会引进新创建的
bundle.js
,实际上你可以引进任何你想要的资源。


React-router

完成项目的基本创建，接下来我们创建
app.js
项目的入口文件。代码如下:
import React from 'react';
import Router from 'react-router';
import { DefaultRoute, Link, Route, RouteHandler } from 'react-router';

import LoginHandler from './components/Login.js';

let App = React.createClass({
render() {
return (
<div className="nav">
<Link to="app">Home</Link>
<Link to="login">Login</Link>

{/* this is the importTant part */}
<RouteHandler/>
</div>
);
}
});

let routes = (
<Route name="app" path="/" handler={App}>
<Route name="login" path="/login" handler={LoginHandler}/>
</Route>
);

Router.run(routes, function (Handler) {
React.render(<Handler/>, document.body);
});


文章头部是我们将要用的
react
和
react-router
的插件包引进来。同事我们还引入login.js作为我们的Login
React 组件。接着，我们使用React 创建一个类。这个例子中，其实就是一个简单的导航条会出现所有的子组件中。我们简单的
Link
到我们的路由:
App
和
Login
.然后React
route将会被
RouteHandler
组件初始化。

在这个App中，我们定义路由并且指定了相应的处理程序（React 组件）。我们定义了我们的根路径为app，并且其他的地址将会是App的子组件。这个例子中，我们添加了一个登录页面，用于用户登录到App中。

最后，React-router会将我们定义的一切加载到document.body中来。这就是index.html转变成我们React App.


Components

弄到这了，我们需要添加组件(Components).在我们的 /js 目录下，我们需要开始创建组件。我们创建Login.js：
import React from 'react';

let Login = React.createClass({

render() {
return(<div>Welcome to login</div>);
}
});

export default Login;


其实那只是一个非常简单的组件，内容为显示"Welcaome to Login"。这个时候我们可以运行下我们的app。
npm start
 然后访问http://localhost:8080/webpack-dev-server/#

这个时候，你可以见到一个导航条上有两个链接Home 和 Login.如果点击Login这个时候可以显示我们刚刚创建的内容。

如果上面一切顺利，那么现在你可以自己创建更多内容来充实自己App.如果你项目中使用Flux(强烈推荐，地址),你可以在你的js 文件夹下使用任何结构。Facebook 官方也有一个使用flux聊天Demo可供学习。


发布

实际上我们有很多方法可以上线你的服务，但是非常好的一件事情是webpack 可以轻松的使用生成的文件。其中你可以快速的将这些资源文件放到cdn上，然后将index.html放到主机上，更新我们的脚本路径就可以了。

博客地址:http://www.jackpu.com/shi-yong-react-routehe-webpackkuai-su-gou-jian-ge-reactcheng-xu/

如果有什么问题可以发送邮件给我 kakashjack@gmail.com 以及原作者
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航