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

相關標籤/搜索

react+webpack+redux+react

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。