利用React-router+Webpack快速构建react程序
本文主要介绍的是使用React-router和Webpack如何快速构建一个react程序，下面话不多说，感兴趣的可以一起学习学习。
初始化项目
我们先创建个空文件夹，然后初始化package.json,填写一些基本信息。
$npminit
接下来我们开始安装依赖项，我的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"
}
运行命令:
$npminstall
项目创建好后，我们接下来创建一些必要的文件和目录；
$mkdirjscss&&touchindex.htmlwebpack.config.js
webpack
webpack是一款模块处理器，他会将你所有的代码打包成静态文件，放到你的开发的App中。
打开webpack.config.js，然后添加下面的代码:
varwebpack=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:[
newwebpack.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也需要通过npminstall安装。
plugins:这里定义了需要使用的插件，比如commonsPlugin在打包多个入口文件时会提取出公用的部分，生成common.js。
NoErrorsPlugin:定义代码出现错误时的时受否自动重新加载。
这个时候我们再package.json中加入script字段，
"scripts":{
"start":"webpack-dev-server--hot--progress--colors",
"build":"webpack--progress--colors"
}
这个时候我们输入一个npmstart命令时候我们会启动一个webpackserver这个时候你可以访问localhost:8080/webpack-dev-server/#/;如果你使用npmrunbuild时候可以将文件自动生成到bulid/下。
接下来我们新建index.html文件
<!doctypehtml> <htmllang="en"> <head> <metacharset="utf-8"> <title>NewReactApp</title> </head> <body> <sectionid="react"></section> <scriptsrc="bundle.js"></script> </body> </html>
现在我们访问浏览器可以便会引进新创建的bundle.js,实际上你可以引进任何你想要的资源。
React-router
完成项目的基本创建，接下来我们创建app.js项目的入口文件。
代码如下:
importReactfrom'react';
importRouterfrom'react-router';
import{DefaultRoute,Link,Route,RouteHandler}from'react-router';
importLoginHandlerfrom'./components/Login.js';
letApp=React.createClass({
render(){
return(
<divclassName="nav">
<Linkto="app">Home</Link>
<Linkto="login">Login</Link>
{/*thisistheimportTantpart*/}
<RouteHandler/>
</div>
);
}
});
letroutes=(
<Routename="app"path="/"handler={App}>
<Routename="login"path="/login"handler={LoginHandler}/>
</Route>
);
Router.run(routes,function(Handler){
React.render(<Handler/>,document.body);
});
文章头部是我们将要用的react和react-router的插件包引进来。同事我们还引入login.js作为我们的LoginReact组件。接着，我们使用React创建一个类。这个例子中，其实就是一个简单的导航条会出现所有的子组件中。我们简单的Link到我们的路由:App和Login.然后Reactroute将会被RouteHandler组件初始化。
在这个App中，我们定义路由并且指定了相应的处理程序（React组件）。我们定义了我们的根路径为app，并且其他的地址将会是App的子组件。这个例子中，我们添加了一个登录页面，用于用户登录到App中。
最后，React-router会将我们定义的一切加载到document.body中来。这就是index.html转变成我们ReactApp.
Components
弄到这了，我们需要添加组件(Components).在我们的/js目录下，我们需要开始创建组件。
我们创建Login.js：
importReactfrom'react';
letLogin=React.createClass({
render(){
return(<div>Welcometologin</div>);
}
});
exportdefaultLogin;
其实那只是一个非常简单的组件，内容为显示"WelcaometoLogin"。这个时候我们可以运行下我们的app。npmstart然后访问http://localhost:8080/webpack-dev-server/#
这个时候，你可以见到一个导航条上有两个链接Home和Login.如果点击Login这个时候可以显示我们刚刚创建的内容。
如果上面一切顺利，那么现在你可以自己创建更多内容来充实自己App.如果你项目中使用Flux，你可以在你的js文件夹下使用任何结构。
发布
实际上我们有很多方法可以上线你的服务，但是非常好的一件事情是webpack可以轻松的使用生成的文件。其中你可以快速的将这些资源文件放到cdn上，然后将index.html放到主机上，更新我们的脚本路径就可以了。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。谢谢大家对毛票票的支持。