最全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-saga【Redux中间异步库】
  • redux-thunk【Redux中间异步库】
  • redux-persist【React数据持久化】
  • electron-react-boilerplate 【React跨平台桌面应用脚手架项目】

著名社区

  • 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全家桶入门教程

在线书籍

  • ECMAScript 6 入门
  • 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-music-webapp【】预览
  • 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) 学习与进阶。】

后台管理

  • create-react-app【React最流行的脚手架项目】
  • Bootstrap3【Bootstrap3 帮助说明文档,介绍栅格系统,全局样式】
  • ant.design【ant.design 帮助说明文档】
  • ant-design-pro 后台管理系统
  • 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

架构方案

  • 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的使用

常用控件

轮播图

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

视频教学

基础篇

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

技术文献

项目环境

  • create-react-app 修改端口号
  • 深入浅出React之第四章:推荐的Redux目录结构

React

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

Router

  • Router官方demo示例

Redux

Redux是构建react应用的骨干架构技术,所以必须要重点掌握
  • Redux中文文档
  • 跟着例子一步步学习redux+react-redux
  • redux-simple-tutorial【Redux 简明教程】
  • Redux之combineReducers(reducers)详解 重点介绍了combineReducer函数的使用
  • Redux 入门教程(二):中间件与异步操作
  • Redux 入门教程(三):React-Redux 的用法
  • React中Redux的进阶玩儿法

Redux-persist

Redux状态持久化库
  • Redux-persist使用
  • Redux-persist详细使用说明

CSS&DIV

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

应用架构

主要涉及到React应用架构功能方面的知识
  • React Router 4.x 页面(路由)回退, 状态记忆功能
  • 异步方案选型redux-saga 和 redux-thunk(async/await)

跨域问题

  • 前后端分离项目,支持跨域,session不丢失
  • 跨域访问sessionid不一致问题

前端资讯

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

原文地址:http://cloud.yundashi168.com/archives/397

你可能感兴趣的:(最全React技术栈技术资料汇总(收藏))