背景概述

React是一门优秀的前端框架，并且在移动端，PC桌面端都有涉及。而且市场前景比较广阔。所以我建议不论是移动开发工程师，还是前端工程师，都可以来学习下React。学习React技术栈可以适用于各种小，中，大型前端应用。希望各位谨记，学习任何技术，刚开始入门容易，想深入掌握，还需要靠项目经验和日常的日积月累。这里整理了我平时学习React用到的技术资料，我会持续不定期更新，一是为了帮助各位，另外就是为了方便日后自己来查阅。

如果你有好的技术资料补充或者想参与本文维护，都可以联系我。前端框架React目前是世界级的前端框架，接触前端从React开始吧！

技术资料

官方权威

• React【React官方学习文档·英文】
• React-中文文档【React官方学习文档·中文 中国程序员的福利】
• React github【React Github地址】
• ReactNative【ReactNative Github地址】
• react-router【React 路由框架 Github地址】
• Redux 【Redux Github地址+附带学习Example】
• dva【dva Github地址：基于Redux封装简化的轻量级状态管理框架】
• next.js 【next Github地址：服务端渲染框架】
• awesome-react-components【Github地址：收藏了大部分的React组件库】
• react-developer-roadmap【React技能学习路线指南，一览react技能众多的知识点，你可以在下面找到一张图，该图展示了你可以选取的路径及你想学习的库，从而成为一名 React 开发者。“作为 React 开发者，我接下来应该学习什么？”，我把这张图作为建议给每个问过我这一问题的人】
• redux-logger 【Redux日志中间件】
• redux-saga【Redux中间异步库】
• redux-thunk【Redux中间异步库】
• redux-promise【Redux中间异步库】
• redux-actions 【】
• redux-persist【React数据持久化】
• electron-react-boilerplate 【React跨平台桌面应用脚手架项目】
• ant-design mobile 【ant-design mobile 官网】
• ant.design 【ant-design 官网】
• lesscss
• sasscss

著名社区

• React中文
• ReactNative中文
• React Native中文社区 http://bbs.react-native.cn/
• React Native Tools http://www.rntools.co/

开发工具

• WebStorm 【开发前端技术必备的IDE，需要激活码，激活码网上自行查找】
• create-react-app 【目前React最流行的脚手架框架】
• ES6在线转ES5

教程专栏

• 简书-React学习资源
• 简书-专题-React
• 阮一峰+React 入门实例教程
• 阮一峰+React 技术栈系列教程
• 从零开始学习ReactJS
• react-native-guide
• React Native专题 江清清的技术专栏
• 《深入理解ES6》教程学习笔记
• JavaScript深入系列、JavaScript专题系列、ES6系列、React系列
• React全家桶入门教程
• 【精选推荐】React 性能优化，你需要知道的几个点 性能优化全方位总结

在线书籍

• ECMAScript 6 入门
• Redux State设计规范 Redux Store State设计规范，一个合理的Redux state树设计，可以让应用有更高效的性能
• React小书 预览
• 深入理解JavaScript系列
• React入门指南
• A Compact React Cookbook【这是一本非常 campact 的 React 煮书，收集了在实践 React 时的一些问题和解决方法】
• CSS参考手册
• React入门教程

开源资料

综合源码

• awesome-react
• Redux-todolist 帮助你理解Redux，其实Redux就是借助高阶组件与全局Context（Store）通信
• react-pxq【一个 react + redux 的完整项目 和 个人总结】预览
• react-demo【React 示例项目 · 简易留言板。本项目拥有完善的文档说明与注释，让您快速上手 React 开发 SPA。Webpack / ES6 + Babel / Redux / React Router —— An Excellent React Starter，可能是东半球最佳的 React Starter，基于 Vue Cli 二次开发】
• react_home【这是一个react得demo/脚手架项目，包含react16+redux+antd+webpack4+react-router4+sass/less+axios+immutable+proxy技术栈】
• react-projects【React实践与React教程】
• react-redux
• react-lesson
• react-curd
• react-redux【React+Redux 入门示例项目】

技术笔记

• react-native-guide【React Native指南汇集了各类react-native学习资源、开源App和组件】
• knowledge【文档着重构建一个完整的「前端技术架构图谱」，方便 F2E(Front End Engineering又称FEE、F2E) 学习与进阶。】

完整项目

• react-music 2019-07-17 13:57:17 星期三
• react-music-webapp 一个综合练习项目，前端技术栈：react全家桶，antd-mobile 预览 2019-07-17 13:59:03 星期三

后台管理

• create-react-app【React最流行的脚手架项目】
• coreui-free-react-admin-template 效果预览
• Bootstrap3【Bootstrap3 帮助说明文档,介绍栅格系统,全局样式】
• ant.design【ant.design 帮助说明文档】
• ant-design-pro 后台管理系统
• antd-admin 一套优秀的中后台前端解决方案
• React脚手架市场 【挖掘更多二次开发的脚手架】
• react-admin【React+AntD+Redux后台管理系统解决方案–终极版】预览
• react-antd-admin【React+AntD+Redux】 预览
• dva-boot-admin【React+ReactRouter+Dva+AntD】 react admin dashboard ui LANIF-ADMIN — react 16 + react-router 4 + dva 2 + antd 3 后台管理 脚手架 支持主题颜色切换 预览
• cms_community_e_commerce react+redux+antd+dva+react-router4 一个简易的后台管理系统
• react-antd
• react-antd-dva

架构方案

• Redux异步方案选型【精选文章】 本文会从一些常见的Redux异步方案出发，介绍它们的优缺点，进而讨论一些与异步相伴的常见场景，帮助你在选型时更好地权衡利弊。
• React常用插件介绍：React中我们为什么要用 redux-thunk,它能做什么？【精选文章】
• 为什么要用Redux-thunk？英文 一定要使用redux-thunk处理异步吗？
• react-demo【Webpack / ES6 + Babel / Redux / React Router —— An Excellent React Starter，可能是东半球最佳的 React Starter】
• reactSPA
• React-SPA
• react-pxq
• winterfall【react 生态体系架构，结合 react、router、redux、saga 实现】
• react-antd-redux-webpack-es6-spa-boilerplate【管理系统架构，基于 antd + react + redux + webpack + ES6 的单页面应用】
• Tomatobean【集成react + react-router + react-redux的轻量级前端框架。提供keep-live功能，快速构建项目。在构建中大型项目时优势明显。】
• youme-education【React构建桌面应用】

开源框架

• fetch
• axios
• redux-alita 简化redux的使用

常用控件

进度条

• react-laser-beam 浏览器顶部横向进度加载条
• react-loading
• react-spinkit 效果预览 A collection of loading indicators animated with CSS for React

列表刷新

• react-touch-loader [支持移动列表下拉和上拉刷新，支持嵌套其它布局，头布局，底部布局]

轮播图

• antd和antd-mobile中的Carousel组件
• swiper【非常强大的轮播控件，支持多种效果定制】 预览 中文网
• react-slick 预览

骨架屏

• react-loading-skeleton

视频教学

基础篇

• 视频：诱人的 react 视频教程-基础篇【该网站有更多进阶的React视频】
• 视频：React基础语法
• 视频：React基础入门
• 视频：React基础知识
• 视频：React进阶之详解Redux
• 视频：手把手教React Native实战开发
• 视频：React Native移动开发技术
• 视频：React Native-跨平台APP开发
• 视频：18年9月React+React-router4.x+Ant Design+Flux视频教程【链接: 提取码: c8gw 复制这段内容后打开百度网盘】

功能专栏

移动原生滚动效果

典型的案例是移动网页的下拉刷新和上拉加载滚动效果 2019-07-17 11:41:57 星期三

• better-scroll BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。 查看在线演示DEMO
• cube-ui 滚动列表，提供了优质的原生滚动体验，便捷的配置项和事件，是一个基于better-scroll进行封装的组件。【基于 Vue.js 实现的精致移动端组件库】 该库实现了移动网页下拉刷新和上拉加载效果，研究源码对了解相关实现原理有帮助。
• mescroll 原生js, 不依赖jquery,zepto支持vue。精致的下拉刷新和上拉加载JS框架。
• react-touch-loader React component for web pull to refresh and load more, 下拉刷新, 加载更多
• Scroller React版iScroll并且集成下拉刷新，上拉加载更多，Sticky等功能

技术文献

项目环境

搭建项目开发环境和核心技术安装配置问题

• create-react-app 修改端口号
• 深入浅出React之第四章：推荐的Redux目录结构
• create-react-app中安装使用antd-mobile:按需加载
• NPM和Yarn添加淘宝镜像

异常错误

记录项目中安装和开发过程中遇到的异常问题，方便下次绕过弯路

• create-react-app按需引入antd报错 问题报错：Cannot find module 'XXXXXXXXXXXXXXX\node_modules\react-scripts/config/webpack.config.dev' 原因分析： react-scripts 升级到 2.1.2 以后破坏了 react-app-rewired。react-app-rewired需要和react-scripts保持同步升级。
• react16.8 版本中使用less更改antd主题报错：.bezierEasingMixin();
• less项目编译后报错.bezierEasingMixin()

javaScript

• JS数组reduce()方法详解及高级技巧

react

• React 全局变量的定义及使用
• React项目配置1(如何管理项目公共js方法)
• React项目配置3(如何管理项目API接口)
• React学习（四）——样式设置和CSS文件引入
• React 中组件间通信的几种方式
• React中将带标签的字符串转义为html解析
• ES6新特性：Javascript中Generator(生成器)

react-native

 ReactNative是移动端跨平台开放的利器

• React-Native:从0.57.5升级到0.59.5，Android端遇到的错误以及解决办法
• 在react-native中使用redux
• RN学习笔记3-Redux + React Navigation
• RN学习笔记2-Redux
• React Native+react-navigation+redux开发实用教程
• React Native 精解与实战
• React-Native之fetch的使用
• react-fetch详谈

router

• Router官方demo示例

redux

Redux是构建react应用的骨干架构技术，所以必须要重点掌握

• Redux中文文档
• 跟着例子一步步学习redux+react-redux
• redux-simple-tutorial【Redux 简明教程】
• Redux之combineReducers(reducers)详解 重点介绍了combineReducer函数的使用
• Redux 入门教程（三）：React-Redux 的用法
• React中Redux的进阶玩儿法
• redux 终于搞明白store reducer action之间的关系
• Using the export keyword between a decorator and a class is not allowed（脚手架修饰器的问题）
• react-reudx之@connect 摆脱redux的繁琐操作

redux中间件

• 深入理解 Redux 中间件
• Redux 入门教程（二）：中间件与异步操作
• Redux与它的中间件：redux-thunk，redux-actions，redux-promise，redux-saga
• 一起学react(4) 史上最详细react-redux 源码分析

redux-thunk

• redux-thunk中间件源码”>浅析redux-thunk中间件源码
• JS函数式编程中compose的实现
• JS数组reduce()方法详解及高级技巧
• 函数式编程入门教程
• JavaScript函数柯里化的简单实现

redux-actions

• redux-actions学习笔记
• Redux之redux-actions的使用

redux-promise

• 使用redux-promise和redux-actions优化对redux的处理

redux-persist

Redux状态持久化库

• Redux-persist使用
• Redux-persist详细使用说明

css&div

主要讲解关于CSS布局方案，CSS新特性，CSS常用技巧

• sass/scss 和 less的区别
• Flex 布局教程：语法篇【阮一峰的编写的关于Flex超级详细的教程，图文并茂,非常推荐】
• 3分钟看懂flex布局【flex使用很频繁,是必须要掌握的一项技能】
• flex兼容性问题
• React实战环境篇(1)搭建开发环境-WebStorm+create-react-app
• React 实战环境篇(2)Autoprefixer CSS自动补全前缀-浏览器兼容
• 浅谈css中一个元素如何在其父元素居中显示
• CSS样式优先级问题【通用选择器（*） < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 < 内联样式】

应用架构

主要涉及到React应用架构功能方面的知识

• 重谈react优势——react技术栈回顾
• React应用架构设计指南
• React Router 4.x 页面(路由)回退, 状态记忆功能
• 异步方案选型redux-saga 和 redux-thunk（async/await）
• React 数据为什么要使用immutable方式？浅复制与深复制思考

网络请求

主要涉及到React网络请求，跨域处理

• react axios和ajax网络请求拦截（session过期跳转登录页）
• 前后端分离项目，支持跨域，session不丢失
• 跨域访问sessionid不一致问题

React新特性

• React Hooks

性能优化

shouldComponentUpdate

PureComponent

• PureComponent的使用指南
• 在React.js中使用PureComponent的重要性和使用方式
• Component和PureComponent的区别

ImmutableJS

• 当PureComponent遇上ImmutableJS ，让React应用性能发挥到极致

前端资讯

• npm 发布 2017 JavaScript 框架报告：React 占主导地位
• 2018 年React 将独占前端框架鳌头【相比 Angular 和 Vue， React 是 2017 年的主要 JS 框架，尤其是 React Native 以前所未有的速度提升自己】
• 2018 JavaScript现状调查报告火热出炉

其它技术

前端

VUE

• vue-news
• DCloud 插件市场

移动端

Android

• Android常用开源库汇总

联系方式

为了更好的分享和讨论React技术，特意创建了一个高级架构群。我希望进群的更多的是工作两三年的高级技术开发，当然新手也欢迎，严谨打广告，我们是纯技术交流讨论群！！！

• QQ群：React高级技术架构群（698841315）

文章来源：http://cloud.yundashi168.com/archives/397