SegmentFault 技术周刊 Vol.11 - React 应用与实践

优质阅读感受及更多讨论，请查看原文：
https://segmentfault.com/a/1190000007345731

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

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

每周二更新，欢迎「关注」或者「订阅」。大家也可以在评论处留言自己感兴趣的主题，推荐主题相关的优秀文章。