关于 Redux 中间件

redux 的中间件是定义一个函数，对 dispatch 进行改造，在发出 action 与执行 reducer 之间添加其他功能，这是对 Redux 进行功能拓展的方式。那么这个中间件的实现原理是什么呢？如何写一个 Redux 的中间件呢？

从 react-start 到 co 源码 (一)

这是一个系列文章。主要分为三篇，讲述了 react 开发环境的简单搭建，脚手架的开发以及 co 源码的分析。对读者了解 react 和 generator 有一定的帮助。这是第一篇简单的讲述了 react 开发环境的搭建。

React 全家桶实现一个简易备忘录

前言 总括： 本文采用 react+redux+react-router+less+es6+webpack, 以实现一个简易备忘录 (todolist) 为例尽可能全面的讲述使用 react 全家桶实现一个完整应用的过程。 代码地址：React 全家桶实现一个简易备忘录 原文博客地址：Rea…

redux 在 react 中的应用（基础篇）

依靠单枪匹马的 react 来构建应用的情况下，组件之间的通讯一直是个难题，借助于 redux，这个问题将迎刃而解，同时，redux 也使得构建一个复杂大型的应用成为可能，redux 是可选方案，但是作为学习对象，你千万不要错过！

12 步 30 分钟，完成用户管理的 CURD 应用 (react+dva+antd)

本文会一步步引导大家如何创建一个完整的 CURD 应用，包括列表、删除、编辑、创建，以及 loading 状态的自动处理等，基于 react, dva 和 antd 。

在 redux 上探索无需刷新前端页面的后端开发体验

后端应用为前端应用提供了状态（state）。借助 redux，我们可以在服务器重启后重新拉去数据，替换 action，构建相同条件下的新状态，从而不需要刷新页面来重启前端应用。这对于以重启非常迅速的脚本语言作为后端语言的应用，并且是同时进行前后端开发的场景来说，可以提供更好的开发体验。

简单几步助你优化 React 应用包体

本文从属于笔者的 Web 前端入门与最佳实践 中的 React 入门与最佳实践系列。本文首发于简单几步助你优化 React 应用包体 - 某熊的全栈之路 - SegmentFault，考虑到专栏知识体系的完善转发到了这里。

React 起手式: 来写个 TodoList 吧

一个简单 TodoList 的教程，让初学者能够快速上手并且对 React 有个大概的了解 :D

正确掌握 React 生命周期 (Lifecycle)

1 React 用了这么久，经常遇到的问题是 setState 在这里写合适吗？
2 为什么 setState 写在这里造成了重复渲染多次？
3 为什么你的 setState 用的这么乱?
4 组件传入 PRops 是更新呢？重新挂载呢？还是怎样？

[[英] Netflix：使用 React 构建高性能的 TV 用户界面](https://juejin.im/entry/587ef...

Netflix 在 2015 年就选择 React 作为前端架构，这篇文章总结了 Netflix 在解决性能问题的经验。

[[译文] React： 一步一步搭建大型应用](https://juejin.im/entry/58785...

翻译自 https://www.fullstackreact.co...
讲述了，从安装开发环境测试环境，到搭建应用，一步一步如何搭建答应完整的 react 应用的。

主要一下几方面：

1. 环境配置
2. 项目结构设计
3. react 测试书写
4. 路由和组件的设计

涉及到的知识：

React，Postcss， Webpack， css modules， react-router， karma， mocha， enzyme， flexbox

基于 vue+vuex+localStorage 开发的本地记事本

本文采用 vue+vuex+localStorage+sass+webpack，实现一个本地存储的记事本。兼容 PC 端和移动端。

翻译 | 如何规模化 React 应用

译者： 朱乙（沪江前端开发工程师）

我们最近发布了 React Boilerplate 3.0，在发布前几个月，我们与数百位开发者进行了沟通，讨论了他们是如何构建和规模化 WEB 应用的。下面将我们从中学到的东西分享给大家。

React 实战：模仿卖座电影

一个使用 react、react-router、redux 高仿卖座电影网的项目

[[译] 在 setState 中使用函数替代对象](https://juejin.im/entry/5873b...

React 中 setState 的新用法！

一个 react+redux 工程实例

这篇文章主要实现一个简单的例子，难度不大，但是贯穿了 react+redux 基本思想。
他将会是一个连续教程，这只是第一篇，不涉及 redux 中间件，redux 处理异步等内容，也不涉及 react 性能优化，不可变数据 immutable.js 的内容。但这些不涉及到的内容，都会随着这个 demo 的复杂度一步一步提升，在后续章节有分析和使用。

React 的四个概念简单介绍

React 的四个概念简单介绍：Virtual DOM；React 组件；Jsx 语法；Data Flow（单向数据流）

CSS Modules 详解及 React 中实践

深入理解 React 高阶组件

高阶组件是一种很好的模式，很多 React 库已经证明了其价值。这篇文章中我们将会详细的讲解什么是 HOC，你能用它做什么，它有哪些局限，如何实现它。

React 中 setState 同步更新策略

我们在上文中提及，为了提高性能 React 将 setState 设置为批次更新，即是异步操作函数，并不能以顺序控制流的方式设置某些事件，我们也不能依赖于 this.state 来计算未来状态。典型的譬如我们希望在从服务端抓取数据并且渲染到界面之后，再隐藏加载进度条或者外部加载提示：

React 实现的 2048 小游戏 (新手入门~)

基于 React 和 Webpack 开发的一个 2048 小游戏，相对于枯燥的 TodoList，这个可能更有趣一点。

React.js: web 开发者的 14 个工具和资源

自从 FaceBook 在 2013 年发布了库之后，React.js 正在快速被广大开发者所接受。它现在已经成为了 GITHub 上被收藏次数排名第 5 的开源项目，越来越多的企业正在寻找 React.js 开发者。本文为广大开发者介绍了 14 个工具和资源，助力 web 开发。

可能是注释写的最详细的 React 脚手架 ─ 支持多入口及支持复杂业务分离

一个完善的 Koa+Webpack+React 集成开发环境, 实现了多页面应用入口

框架优点

· 支持多页面类型的 React 应用开发
· 实用 Koa 服务器进行构建, 扩展性更强
· 分为开发环境 (Dev) 和上线 (Prod) 环境, 可以自由选择并进行开发
· 支持 React 热加载, 可以实现 CSS 及 JS 的热加载效果
· 附加 Postcss 工具, 可实现 Sass 语法开发, 自动填充 CSS3 兼容方案及 CSS 雪碧图的自动化构建
· 使用了 CSS-Module 技术, 实现了样式的复用性和解决了样式污染

基于 React 的 fetch 请求测试工具 -- fetch-request

基于 dva antd 和 React 可以选择多种请求类型, 用于在开发中测试接口

在 React.js 中使用 PureComponent 的重要性和使用方式

如果你用 React，请学会使用 Purecomponent

前端学习指南 - 广度 + 深度的探索

一篇由浅入深、逐步递进的学习指南，遵循曲线，将带你涉足前端开发过程中方方面面。若想在前端领域有更深的思考，也提供了相应的进阶篇，介绍技术背后的原理阐述、架构思考、编程方法论等。

用 React+Redux 写一个 RubyChina 山寨版 (二)

React+redux+react-router-redux+antd+es6+redux-thunk 的 RubyChina 山寨版，适合初学 ReactJs，一边写代码一边写文档，记录成长的痕迹

一个简单的甘特图 React 组件封装 gantt-for-react

甘特图一般用来做任务、项目管理。直观的看出任务的时间安排以及依赖关系。

[[译] Netflix: 使用 React 构建高性能的电视用户界面](https://juejin.im/entry/589a9...

这篇文章总结了 Netflix 在使用 React 框架搭建其 UI 框架的过程中，性能优化方面的一些经验。

一张图学习 ES6 中的 React 生命周期与流程

为了理解 React 在学习生命周期的过程中想要一个生命周期的图，网上有一些流程，但是看着不够全，就尝试着画了一个，第一次弄，欢迎提意见

React 最少必要知识

去年 8 月左右，看到了 ThoughtWorks 发布的 2016 年技术雷达，里面重点推荐了 react.js 技术，加上前端技术栈三足鼎立中，react 也占据一席，其他两个分别是 vue.js 及 Angular.js，而 react 和其他两个的区别在于，它颠覆了整个技术栈，自成一派，抛弃了 HTML 和 DOM，引入了 JSX 语法，让程序员可以更专注于逻辑代码。这一切让我对 react.js 充满了好奇，决定花时间学习一下，一探究竟。

简谈 react + redux 架构的特点和挑战

本文分别从 react 和 redux 各自的特点出发，分析了架构中二者的特点和问题所在。

JS 全栈教程

本课程是基于阮一峰的 js 全栈教程的视频版本，免费供大家观看

React 开发流程——利用 React 构建简单的可检索产品数据表

React 开发流程——利用 React 构建简单的可检索产品数据表

基于 Webpack 2 的 React Router 懒加载路由配置

基于 Webpack 2 的 React Router 懒加载路由配置承接基于 Webpack 2 的 React 组件懒加载，主要是对上一篇文章中的部分论述进行补充和修正，从属于 Web 前端入门与工程实践。

UXCore 组件单测的一些事儿

UXCore 是 XUX 团队开源的 PC 端 React UI 套件，作为一个支持企业级应用的 React UI 开源套件，为了保持项目的持续集成，良好的单元测试必不可少。本文来分享一下在编写单元测试的过程中遇到的一些问题和总结。

React-Manga 一个以 React 实现的漫画 WebApp

使用 React 实现的 WebApp 版开源漫画阅读器。目前已实现用户登录注册、提供漫画推荐、漫画搜索、漫画收藏、漫画阅读、历史记录 等功能。

React Toolbox - 符合 Material Design 规范的 React 组件

符合 MATErial Design 规范的 React 组件

浅析 React 之事件系统（二）

文章介绍了 React 的事件系统，比较了与原始事件的区别和如何合理使用 React 合成事件与原生时间

打造 redux 同构应用

handcrafting-an-isomorphic-redux-application-with-love

React 服务端渲染缓慢原因浅析

缘何 React 服务端渲染的性能会如此之差；从设计理念的角度来看 React 本身专注于跨平台的界面库，其保证较好抽象层次的同时势必会付出一定的代价，并且 Facebook 在生产环境中并未大规模应用服务端渲染，也就未花费过多的精力来优化服务端渲染的性能。笔者也对比了下 React 与 Preact 有关服务端渲染的实现代码，确实高度的抽象需要额外的代码逻辑与对象创建，React 本身并没有冗余的部分，只是单纯地大量的毫秒级别额外对象操作的耗时的累加导致了最后性能表现的巨大差异。我们首先看下 Preact 的 renderToString 的函数实现，其紧耦合于 DOM 环境，以较低的抽象程度换取较少的代码实现：

基于 reactjs+redux+postcss+webpack2 的单页应用项目模板

基于 reactjs+redux+postcss+webpack2 的单页应用项目模板，webpack 已升级到 2.2.1。

使用 mobx 开发高性能 react 应用

react 作为模块化的 UI 层框架，在前端领域正处于如日中天的地位。但如果仅仅使用 react，往往需要在 UI 层中承载过多的业务逻辑，引入模块化的同时却破坏了分层。为此业界有很多解决方案，目前最流行的就是 redux，其适用于大型项目。而本文将详细介绍一种更灵活的、适合于中小型应用的数据层框架 mobx。

React 常用面试题目与分析 - 某熊的全栈之路

React 常用面试题目与分析从属于笔者的 Web 前端入门与工程实践，更多前端思考借鉴 2016 - 我的前端之路: 工具化与工程化

React Table - 适用于 React 的轻量级、可扩展的数据表格

亮点：轻量，压缩后 7kb；完全定制的 JSX 模板；支持客户端和服务器端的分页和多重排序；设计简洁，方便主题化；通过 props 和 callback 来高度定制。

React 爬坑记

趁年假研究了下 react，写了点坑

Rax 是阿里开源的一个通用的 JavaScript 库。它具备快速、轻量级的，并可跨浏览器、Weex 和 Node.js 的特点。同时，它有 React 兼容的 API ，便于了解 React 的朋友们快速上手。喜欢的朋友可以了解下。

用 React+Redux 写一个 RubyChina 山寨版 (一)

React+Redux+react-router-redux+antd+babell+es6 的 RubyChina 山寨版，适合初学 ReactJS，一边写代码一边写文档，记录成长的痕迹

React-Redux-Appointment

React-Redux 小应用：React-Redux-Appointment

从 react-start 到 co 源码 (二)

这是一个系列文章。主要分为三篇，讲述了 react 开发环境的简单搭建，脚手架的开发以及 co 源码的分析。对读者了解 react 和 generator 有一定的帮助。这是第二篇讲述了 react 开发环境脚手架的开发。

介绍 roadhog —— 让 create-react-app 可配的命令行工具

roadhog 是一个 cli 工具，提供 server 和 build 两个命令，分别用于本地调试和构建。命令行体验和 create-react-app 一致，配置略有不同，比如默认开启 css modules，然后还提供了 JSON 格式的配置方式。

基于 React.js + Node.js 的开源博客框架 phoenix-blog-framework

phoenix-blog-framework 是我开发的一款个人博客框架。使用 React.js + TyPEscript + CSS-Modules + pug 等技术做前端，用 Node.js + Mongodb + Typescript 做后台开发。用 Markdown 做文章写作系统。

使用 React、Node.js、MongoDB、Socket.IO 开发一个角色投票应用 | 闲散人生 | idlelife

在本教程里你将学习到如何使用 Node.js 构建一个 REST API、使用 MongoDB 保存和检索数据、使用 Socket.IO 跟踪在线的访问者，以及使用 React + Flux 和服务端渲染来构建单页面应用，最后将应用部署到云端。

[[译] 编写 React 组件的最佳实践](https://juejin.im/entry/58b3b...

当我一开始写 React 的时候，我记得有许多不同的方法来写组件，每个教程都大不相同。虽然从那以后 React 框架已经变得相当的成熟，但似乎仍然没有一种明确的写组件的 “正确” 方式......

React 开发中的 Provider 和 HOC 模式

React 开发中的 Provider 和 HOC 模式

将 React 应用优化到 60fps

作为 DOM 的抽象，React 自然也遵循了著名的抽象漏洞定理（详见 2016 - 我的前端之路: 工具化与工程化），引入 React 导致了在应用本身的性能消耗之外势必会增加额外的性能损耗。Dan Abramov 在 Twitter 上提到，React 并不能保证性能优于原生的 DOM 实现，但是它能够帮助大量的普通开发者构建大型应用的同时不必在初期就耗费大量的精力在性能优化上，在大部分用户交互界面上 React 已经能够帮我们进行合理的优化了。但是在应用开发的过程，特别是最后的细节优化阶段中，我们需要着眼于部分性能瓶颈页面，正确地认识这种限制的缘由以及相对应的处理方案。本文即是作者在构建自己的大型应用中经验的总结。