React技术栈技术资料汇总(持续完善)
背景概述
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-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全家桶入门教程
在线书籍
- 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
架构方案
- 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 视频教程-基础篇【该网站有更多进阶的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()")
React
- React 全局变量的定义及使用
- React项目配置1(如何管理项目公共js方法)
- React项目配置3(如何管理项目API接口)
- React学习(四)——样式设置和CSS文件引入
- React 中组件间通信的几种方式
- React中将带标签的字符串转义为html解析
- ES6新特性:Javascript中Generator(生成器)")
ReactNative
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
Redux
Redux是构建react应用的骨干架构技术,所以必须要重点掌握
- Redux中文文档
- 跟着例子一步步学习redux+react-redux
- redux-simple-tutorial【Redux 简明教程】
- Redux之combineReducers(reducers)详解 重点介绍了combineReducer函数的使用
- Redux 入门教程(三):React-Redux 的用法
- React中Redux的进阶玩儿法
- redux 终于搞明白store reducer action之间的关系
Redux中间件
- 深入理解 Redux 中间件
- Redux 入门教程(二):中间件与异步操作
- Redux与它的中间件:redux-thunk,redux-actions,redux-promise,redux-saga
Redux-persist
Redux状态持久化库
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网络请求,跨域处理
前端资讯
- npm 发布 2017 JavaScript 框架报告:React 占主导地位
- 2018 年React 将独占前端框架鳌头【相比 Angular 和 Vue, React 是 2017 年的主要 JS 框架,尤其是 React Native 以前所未有的速度提升自己】
- 2018 JavaScript现状调查报告火热出炉
其它技术
前端
VUE
移动端
Android
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
java版spring cloud微服务架构b2b2c电子商务平台-负载均衡(Load Balance)
负载均衡(Load Balance) 由于目前现有网络的各个核心部分随着业务量的提高,访问量和数据流量的快速增长,其处理能力和计算强度也相应地增大,使得单一的服务器设备根本无法承担。在此情况下,如果扔掉现有设备去做大量的硬件升级,这样将造成现有资源的浪费,而且如果再面临下一次业务量的提升时,这又将导致再一次硬件升级的高额成本投入,甚至性能再卓越的设备也不能满足当前业务量增长的需求。 负载均衡实现方式分类 1:软件负载均衡技术 该技术适用于一些中小型网站系统,可以满足一般的均衡负载需求。软件负载均衡技术是在一个或多个交互的网络系统中的多台服务器上安装一个或多个相应的负载均衡软件来实现的一种均衡负载技术。软件可以很方便的安装在服务器上,并且实现一定的均衡负载功能。软件负载均衡技术配置简单、操作也方便,最重要的是成本很低。 2:硬件负载均衡技术 由于硬件负载均衡技术需要额外的增加负载均衡器,成本比较高,所以适用于流量高的大型网站系统。不过在现在较有规模的企业网、政府网站,一般来说都会部署有硬件负载均衡设备(原因1.硬件设备更稳定,2.也是合规性达标的目的)硬件负载均衡技术是在多台服务器间安装...
- 下一篇
大润发:IT系统全面上阿里云,启动数据中台建设
7月24日,大润发透露,计划两年内将IT系统全面迁移到阿里云上,不再自建IDC。同时,为了更好地支撑线上线下业务一体化,大润发还与阿里云合作启动数据中台项目,将业务交易等相关数据和资源汇集到中台,进行精细维度的数据分析,更好地辅助业务决策。 大润发正在引领零售行业的创新实践。2013年,大润发开始投资建设综合零售购物网站飞牛网。如今,分布在全国的400多家数字化卖场已经宏图初现。 据统计,目前线上B2C业务日均可达30-40万单,B2B业务日均近1万单,这些线上业务核心系统已经搭载在阿里云上。同时,销售、营销、库存等业务系统也在迁移上云中。 大润发新零售总经理吴春相介绍,云服务是新零售的基础,云如何更好地服务业务创新,实现增量发展值得关注。大润发的数字化转型实践起步较早,过程中积累了不少经验,事实证明,迁上阿里云可以减少试错、降低人力成
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS关闭SELinux安全模块
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- Mario游戏-低调大师作品
- CentOS6,CentOS7官方镜像安装Oracle11G
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- Windows10,CentOS7,CentOS8安装Nodejs环境
- Docker安装Oracle12C,快速搭建Oracle学习环境
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- CentOS8编译安装MySQL8.0.19
- MySQL8.0.19开启GTID主从同步CentOS8