React技术栈技术资料汇总(持续完善)

聚优云惠 2019-07-24

云栖社区 架构 javascript native react redux 中间件 html Blog github

背景概述

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

著名社区

开发工具

教程专栏

在线书籍

开源资料

综合源码

  • 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-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构建桌面应用】

开源框架

常用控件

进度条

列表刷新

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

轮播图

骨架屏

视频教学

基础篇


功能专栏

移动原生滚动效果

典型的案例是移动网页的下拉刷新和上拉加载滚动效果 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等功能

技术文献

项目环境

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

异常错误

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

React

ReactNative

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

Router

Redux

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

Redux中间件

Redux-persist

Redux状态持久化库

CSS&DIV

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

应用架构

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

网络请求

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


前端资讯

其它技术

前端

VUE

移动端

Android

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

登录 后评论
下一篇
冒顿单于
5230人浏览
2019-08-28
相关推荐
前端相关汇总
1104人浏览
2018-10-25 08:42:00
用vue实现简易的音乐webApp
463人浏览
2017-08-24 11:19:00
0
0
0
565