利用React-router+Webpack快速構(gòu)建react程序
本文主要介紹的是使用React-router和Webpack如何快速構(gòu)建一個react程序，下面話不多說，感興趣的可以一起學(xué)習(xí)學(xué)習(xí)。
初始化項(xiàng)目
我們先創(chuàng)建個空文件夾，然后初始化 package.json ,填寫一些基本信息。
$ npm init
接下來我們開始安裝依賴項(xiàng)，我的 package.json 的依賴項(xiàng)如下
"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"
}
運(yùn)行命令:
$ npm install
項(xiàng)目創(chuàng)建好后，我們接下來創(chuàng)建一些必要的文件和目錄；
$ mkdir js css && touch index.html webpack.config.js
webpack
webpack 是一款模塊處理器，他會將你所有的代碼打包成靜態(tài)文件，放到你的開發(fā)的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()
]
};
這份文件大概有四個配置項(xiàng)entry, output, module,plugins.
entry:指定打包的入口文件，每有一個鍵值對，就是一個入口文件。
output：配置打包結(jié)果，path定義了輸出的文件夾，filename則定義了打包結(jié)果文件的名稱，filename里面的[name]會由entry中的鍵替換,例子中的/build/bundle.js便是生成的文件。
resolve：定義了解析模塊路徑時的配置，常用的就是extensions，可以用來指定模塊的后綴，這樣在引入模塊時就不需要寫后綴了，會自動補(bǔ)全.
module：定義了對模塊的處理邏輯，這里可以用loaders定義了一系列的加載器，以及一些正則。當(dāng)需要加載的文件匹配test的正則時，就會進(jìn)行處理。這里我們使用了react-hot 和 babel。babel-loader是我們使用ES-6進(jìn)行開發(fā)時用于生成JS文件。 最后我們生成了一個style.css僅僅做個例子，告訴我們?nèi)绾我霕邮轿募?，?shí)際上我們可以加載諸如sass-loader這樣的加載器。
loader對文件進(jìn)行處理，這正是webpack強(qiáng)大的原因。比如這里定義了凡是.js結(jié)尾的文件都是用babel-loader做處理，而.jsx結(jié)尾的文件會先經(jīng)過jsx-loader處理，然后經(jīng)過babel-loader處理。當(dāng)然這些loader也需要通過npm install安裝。
plugins: 這里定義了需要使用的插件，比如commonsPlugin在打包多個入口文件時會提取出公用的部分，生成common.js。
NoErrorsPlugin: 定義代碼出現(xiàn)錯誤時的時受否自動重新加載。
這個時候我們再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>
現(xiàn)在我們訪問瀏覽器可以便會引進(jìn)新創(chuàng)建的bundle.js,實(shí)際上你可以引進(jìn)任何你想要的資源。
React-router
完成項(xiàng)目的基本創(chuàng)建，接下來我們創(chuàng)建app.js項(xiàng)目的入口文件。
代碼如下:
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的插件包引進(jìn)來。同事我們還引入login.js作為我們的Login React 組件。接著，我們使用React 創(chuàng)建一個類。這個例子中，其實(shí)就是一個簡單的導(dǎo)航條會出現(xiàn)所有的子組件中。我們簡單的Link到我們的路由:App和Login.然后React route將會被RouteHandler組件初始化。
在這個App中，我們定義路由并且指定了相應(yīng)的處理程序（React 組件）。我們定義了我們的根路徑為app，并且其他的地址將會是App的子組件。這個例子中，我們添加了一個登錄頁面，用于用戶登錄到App中。
最后，React-router會將我們定義的一切加載到document.body中來。這就是index.html轉(zhuǎn)變成我們React App.
Components
弄到這了，我們需要添加組件(Components).在我們的 /js 目錄下，我們需要開始創(chuàng)建組件。
我們創(chuàng)建Login.js：
import React from 'react';
let Login = React.createClass({
render() {
return(<div>Welcome to login</div>);
}
});
export default Login;
其實(shí)那只是一個非常簡單的組件，內(nèi)容為顯示"Welcaome to Login"。這個時候我們可以運(yùn)行下我們的app。npm start 然后訪問http://localhost:8080/webpack-dev-server/#
這個時候，你可以見到一個導(dǎo)航條上有兩個鏈接Home 和 Login.如果點(diǎn)擊Login這個時候可以顯示我們剛剛創(chuàng)建的內(nèi)容。
如果上面一切順利，那么現(xiàn)在你可以自己創(chuàng)建更多內(nèi)容來充實(shí)自己App.如果你項(xiàng)目中使用Flux，你可以在你的js 文件夾下使用任何結(jié)構(gòu)。
發(fā)布
實(shí)際上我們有很多方法可以上線你的服務(wù)，但是非常好的一件事情是webpack 可以輕松的使用生成的文件。其中你可以快速的將這些資源文件放到cdn上，然后將index.html放到主機(jī)上，更新我們的腳本路徑就可以了。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。謝謝大家對腳本之家的支持。
相關(guān)文章
當(dāng)涉及到React框架時,了解受控組件和非受控組件是非常重要的概念,本文主要介紹了理解react中受控組件和非受控組件及應(yīng)用場景,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
React.js組件實(shí)現(xiàn)拖拽排序組件功能過程解析
這篇文章主要介紹了React.js組件實(shí)現(xiàn)拖拽排序組件功能過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04
React 條件渲染最佳實(shí)踐小結(jié)(7種)
這篇文章主要介紹了React 條件渲染最佳實(shí)踐小結(jié)(7種)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
這篇文章主要介紹了vue3中獲取ref元素的幾種方式總結(jié)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
在react中使用highlight.js將頁面上的代碼高亮的方法
本文通過 highlight.js 庫實(shí)現(xiàn)對文章正文 HTML 中的代碼元素自動添加語法高亮，具有一定的參考價(jià)值，感興趣的可以了解一下2022-01-01
這篇文章主要為大家介紹了React.js入門學(xué)習(xí)第一篇，詳細(xì)解析React.js基礎(chǔ)知識，全方位的了解React.js，感興趣的小伙伴們可以參考一下2016-03-03
當(dāng)我們使用React編寫組件時,組件的重新渲染是一個重要的概念,本文主要介紹了React組件在什么情況下會重新渲染,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
這篇文章主要介紹了深入理解react的原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2021-10-10
React+Spring實(shí)現(xiàn)跨域問題的完美解決方法
這篇文章主要介紹了React+Spring實(shí)現(xiàn)跨域問題的完美解決方法,非常不錯，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
前兩章講到了，react 在 render 階段的 completeUnitWork 執(zhí)行完畢后，就執(zhí)行 commitRoot 進(jìn)入到了 commit 階段，本章將講解 commit 階段執(zhí)行過程源碼2022-11-11