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 技術周刊 #

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

每周二更新，歡迎「關注」或者「訂閱」。大家也可以在評論處留言自己感興趣的主題，推薦主題相關的優秀文章。

? 本文版權歸作者 SegmentFault 所有，文中提及所有文章版權歸原文作者所有，任何形式轉載請聯繫作者。