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

「技术周刊」是社区特别推出的技术内容系列，一周一主题。周刊筛选的每篇内容，是做者的独到看法，踩坑总结和经验分享。

每周二更新，欢迎「关注」或者「订阅」。你们也能够在评论处留言本身感兴趣的主题，推荐主题相关的优秀文章。