SegmentFault 技術週刊 Vol.11 - React 應用與實踐

前情提要

前面三期的社區週刊，咱們從一個最簡單的 To-do List 應用入手，完成了 React.js 學習三部曲的前兩部分

• Vol.8 - React，「5 分鐘快速入門」（什麼是 React、它的基本特性和源碼的解析）

• Vol.9 - 進階吧！React（深刻了解各種組件、Redux、性能優化，經過簡單的項目對每一個部分逐一深刻實踐）

以及一個番外篇 React Native

• Vol.10 - React Native丨Learn Once, Write Anywhere

結束了學習階段，意味着只剩最後的「大怪」——React 的具體應用和實踐，如今，咱們將結合 Webpack、Node.js、ES6 甚至 Vue.js，完成對學習成果的手動操做和增強。這就是本期週刊的內容。

應用與實踐

hantingting - 從零開始：使用 React+Webpack+Nodejs+Express 快速構建項目

React 官方文檔中，只有一個 TodoMVC 的範例，裏面上百行的代碼以及過多的新概念，對於不少初學者來講依然很複雜。因此做者以一個簡單的例子，講解如何使用 React、Webpack、Node.js、Express 來快速構建項目，將前端各種技術知識系統地引入實踐，爲後期的深刻學習鋪好道路。

二哲 - Vue 或 React 多頁應用腳手架

讓多頁應用如何能有一套像 SPA 同樣優雅的開發模式，不少人都在思考，不妨來看看做者是怎麼作的：MeCKodo / react-multipage，這是一篇使用 ES6 (7) + 組件化（.vue | .jsx）開發多頁應用的範文。

lhc - 手把手教你基於 ES6 架構本身的 React Boilerplate 項目

結束上篇 ES6 + 組件化的應用，再來看看如何加入 Webpack。做者從項目開發的蠻荒階段，搭建開發環境、配置和使用 webpack、搭建測試環境，一步一步構建適合本身的 React + Webpack 起始項目。很是詳盡，推薦閱讀。

xiaoyann - 使用 Webpack + React + Redux + ES6 開發組件化前端項目

文如其題，前端開發者本身常備一個 boilerplate 項目的重要性不言而喻，做者這個項目在 Webpack 配置上作了很多優化和總結。這是複雜性 React 項目實踐必看的一篇。

supnate - 使用 React + Redux + React-router 構建可擴展的前端應用

不管使用什麼樣的技術，一個理想中的 Web 項目大概都須要考慮這麼幾個方面：易於開發、易於擴展、易於維護、易於測試和易於構建。這些方面並非互相獨立，而是互相依賴互相制約，當某個方面作到極致，其它點就會受到影響。本文這個點出發，講述如何利用 React + Redux + React-router 來構建可擴展的前端應用，其核心思路就是

• 以功能（feature）爲單位組件文件夾結構

• 採用每一個 action 單獨文件的模式

這樣可以讓代碼更加模塊化，增長和刪除功能都不會對其它模塊產生太大影響。同時使用 React-router 來幫助實現頁面的概念，讓單頁應用（SPA）也擁有傳統 Web 應用的 URL 導航功能，進一步下降了功能模塊間的耦合行，讓應用結構更加清晰直觀。

kenberkeley - 多是東半球最好的 React + Redux 啓動器，基於 Vue Cli 二次開發

這是一個基於 Vue Cli 開發的 React 簡易留言板 + 待辦事項，項目架構優雅，且能夠快速上手 React 開發 SPA。項目地址：kenberkeley / react-demo

whatif - feWorkflow - 使用 electron, react, redux, immutable 構建桌面 App

feWorkflow 是一套完整的 Gulp 工做流，以 electron 爲基礎將 gulpfile.js 以及所依賴的 node_modules 封裝在一塊兒的一個圖形界面，能夠進行一鍵式的開發和壓縮。做者在這裏就項目的開發框架及其技術，作了一個總結，包括基本的操做流程和一些心得體會。

項目地址：whatifhappen / feWorkflow

還有幾個 React 作成的項目，咱們已經在第八期週刊（Part.4 - 簡單的應用）中作了簡單介紹，如今，你能夠去深刻的研究下他們具體是怎麼作了。

系列的結束

本期週刊只有 7 篇內容，但這些內容所包含的實踐例子，已徹底可讓你對如何在實際中使用 React 有一個很是明確的瞭解。隨之，React 系列的週刊也將告一段落。

一個題外話，忽然想起來，前段時間很火的《在 2016 年學 JavaScript 是一種什麼樣的體驗？》，各種前端技術層出不窮、更新不斷的狀況，着實被熱辣地調侃了一番。其實每三四年作一個階段來看，產量與質量都是在指數型的增加，因此，與其說是亂革命，不如看做這是技術還在不斷成熟。由於不管規範程度怎樣，站在不斷累積的前輩們的肩上，天然就會跑得愈來愈快。

固然，貴圈華麗也是須要剋制的。

---

# SegmentFault 技術週刊 #

「技術週刊」是社區特別推出的技術內容系列，一週一主題。週刊篩選的每篇內容，是做者的獨到看法，踩坑總結和經驗分享。

每週二更新，歡迎「關注」或者「訂閱」。你們也能夠在評論處留言本身感興趣的主題，推薦主題相關的優秀文章。