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

时间 2019-11-15

标签使用 react route webpack 快速构建一个程序栏目 React 繁體版

原文原文链接

初始化项目

咱们先建立个空文件夹，而后初始化 package.json ,填写一些基本信息。javascript

$ npm init

接下来咱们开始安装依赖项，个人 package.json 的依赖项以下css

"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"
  }

运行命令:html

$ npm install

项目建立好后，咱们接下来建立一些必要的文件和目录；java

$ mkdir js css && touch index.html webpack.config.js

webpack

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

打开webpack.config.js，而后添加下面的代码:react

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.webpack

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

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

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

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 以及原做者