Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
R
react
项目
项目
详情
活动
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
图表
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
学习小组
react
Commits
faaafb36
提交
faaafb36
authored
2月 09, 2022
作者:
张颂恩
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
添加 README.md
上级
显示空白字符变更
内嵌
并排
正在显示
1 个修改的文件
包含
159 行增加
和
0 行删除
+159
-0
README.md
README.md
+159
-0
没有找到文件。
README.md
0 → 100644
浏览文件 @
faaafb36
# React学习资源汇总
> React是如今最热门的前端框架,它设计思路独特,性能卓越,逻辑简单,受到了广泛开发者的喜爱。一旦接触她,你就会被她深深吸引。
> 我断断续续的学了将近两个月,今天终于有时间把自己学习React的一些学习资料总结一下。
**React 官方**
-
官网地址:http://facebook.github.io/react/
-
Github地址:https://github.com/facebook/react
## 设计思想
学习React之前,我们先了解一下它的设计思想,它与如今其他热门的前端框架有什么不同?它能为我们的开发解决哪些痛点?
1.
[
React 设计思想
](
https://github.com/react-guide/react-basic
)
2.
[
React的设计哲学 - 简单之美
](
http://www.infoq.com/cn/articles/react-art-of-simplity/
)
3.
[
颠覆式前端UI开发框架:React
](
http://www.infoq.com/cn/articles/subversion-front-end-ui-development-framework-react/
)
## 初学者入门
### 文章
可以结合一些简单demo去看文章,例如你在看阮一峰的React 入门实例教程时,可结合他写的入门demo,或官方给的demo。当然你也要边学习边自己去写一些简单demo,去改改别人写的一些React 项目。一定要多动手。
1.
[
React 入门实例教程-阮一峰
](
http://www.ruanyifeng.com/blog/2015/03/react.html
)
:建议先看demo
2.
[
一看就懂的ReactJs入门教程(精华版)
](
http://www.cocoachina.com/webapp/20150721/12692.html
)
3.
[
React 教程-菜鸟教程
](
http://www.runoob.com/react/react-tutorial.html
)
:安装那节好像有点错
4.
[
React 入门,5个常用DEMO展示
](
http://blog.csdn.net/iambinger/article/details/51803606
)
5.
[
如何学习React
](
http://www.360doc.com/content/16/0129/07/13518188_531384175.shtml
)
6.
[
给新手的 React&Webpack 上手教程
](
https://github.com/theJian/build-a-hn-front-page
)
7.
[
ReactJS 傻瓜教程
](
https://zhuanlan.zhihu.com/p/19896745?columnSlug=FrontendMagazine
)
8.
[
React 最简单的入门应用项目
](
http://guodavid.tk/2016/08/29/React-Message-board/
)
### 入门 demo
1.
[
官方入门 demo
](
https://github.com/facebook/react/tree/master/examples
)
:可结合官方的入门文档
2.
[
入门 demo-阮一峰
](
https://github.com/ruanyf/react-demos
)
:结合入门文章
3.
[
模仿知乎界面的一个简单React demo
](
https://github.com/tsrot/react-zhihu
)
:结合
[
ReactJS中文基础视频教程-爱酷
](
http://www.icoolxue.com/album/show/262
)
### 入门视频教程
一定要边看边写,不要囫囵吞枣的看一遍就好了。
1.
[
React入门-慕课网
](
http://www.imooc.com/learn/504
)
2.
[
ReactJS中文基础视频教程-爱酷
](
http://www.icoolxue.com/album/show/262
)
3.
[
ReactJS中文视频教程
](
http://react-china.org/t/reactjs/584
)
4.
[
React教程- 汇智网
](
http://www.hubwiz.com/course/552762019964049d1872fc88/?ch=alloyteam
)
### 入门实战视频
了解React开发流程,作者的编码思路,写作规范。
1.
[
React实战--打造画廊应用(上)
](
http://www.imooc.com/learn/507
)
2.
[
React实战--打造画廊应用(下)
](
http://www.imooc.com/learn/652
)
3.
[
ReactJS中文基础视频教程
](
http://zexeo.com/course/56753a22b2b8de861c0d281a
)
4.
[
构建实时聊天应用
](
http://zexeo.com/course/5672c2bd52b470c02bc28b6c
)
## 开发文档
开发其实不用详细去全看,在你做项目时,遇到不懂的就去查看一下文档,我认为这样效率更高一点。当然你有时间也可以一步步去阅读。
1.
[
官方文档
](
https://facebook.github.io/react/docs/hello-world.html
)
2.
[
中文文档
](
http://reactjs.cn/react/docs/getting-started-zh-CN.html
)
## 学习网站
在学习中我们会遇到 一些问题,可以去社区或一些网站寻找答案,下面推荐一些好的React 社区和学习网站。
1.
[
React中文社区
](
http://react-china.org/
)
2.
[
React 中文索引
](
http://nav.react-china.org/
)
2.
[
React知识库
](
http://lib.csdn.net/base/react
)
3.
[
A quick start to React
](
https://codepicnic.com/posts/a-quick-start-to-react-0777d5c17d4066b82ab86dff8a46af6f
)
4.
[
stack overflow
](
http://stackoverflow.com/questions/tagged/reactjs
)
5.
[
知乎 React 话题
](
https://www.zhihu.com/topic/20013159/hot
)
6.
[
segmentfault React 话题
](
https://segmentfault.com/t/react.js
)
## React技术栈
React是一款非常优秀的前端框架,你要发挥它完全的性能,你就要结合其他一些技术,例如webpack、redux、react-router等。
1.
[
React 技术栈系列教程
](
http://www.ruanyifeng.com/blog/2016/09/react-technology-stack.html
)
2.
[
百度母婴技术团队—基于Reactjs实现webapp
](
https://github.com/my-fe/wiki/issues/1
)
3.
[
Building a React Universal Blog App
](
https://www.sitepoint.com/building-a-react-universal-blog-app-a-step-by-step-guide/
)
4.
[
React为啥非得使用immutable.js
](
http://react-china.org/t/react-immutable-js/3770
)
5.
[
React Server Side Rendering 解决 SPA 应用的 SEO 问题
](
https://blog.coding.net/blog/React-Server-Side-Rendering-for-SPA-SEO
)
6.
[
webpack官方文档
](
http://webpack.github.io/docs/
)
7.
[
Webpack 中文指南
](
http://webpackdoc.com/
)
8.
[
webpack一小时快速入门
](
http://www.w2bc.com/Article/50764
)
9.
[
使用webpack轻松构建你的第一个react开发框架
](
http://www.jianshu.com/p/c8a805145046
)
10.
[
入门Webpack,看这篇就够了
](
http://www.jianshu.com/p/42e11515c10f#
)
:写的很不错,逐级深入,适合入门,有点长,耐心看完
10.
[
react-router
](
https://github.com/ReactTraining/react-router
)
11.
[
React Router 中文文档
](
https://react-guide.github.io/react-router-cn/
)
12.
[
React Router 官方 demo
](
https://github.com/reactjs/react-router-tutorial/tree/master/lessons
)
13.
[
Redux官网
](
http://redux.js.org/
)
14.
[
Redux 中文文档
](
http://cn.redux.js.org/index.html
)
15.
[
Redux 官方 demo
](
https://github.com/reactjs/redux/tree/master/examples
)
16.
[
Redux 莞式教程
](
https://github.com/kenberkeley/redux-simple-tutorial
)
17.
[
Redux 视频教程
](
https://egghead.io/courses/getting-started-with-redux
)
18.
[
redux 大法好
](
http://qiutc.me/post/redux-%E5%A4%A7%E6%B3%95%E5%A5%BD-%E2%80%94%E2%80%94-%E5%85%A5%E9%97%A8%E5%AE%9E%E4%BE%8B-TodoList.html
)
19.
[
Flux 傻瓜教程
](
https://zhuanlan.zhihu.com/p/19900243?columnSlug=FrontendMagazine
)
20.
[
react+redux渲染性能优化原理
](
http://foio.github.io/react-redux-performance-boost/
)
21.
[
React开发社区
](
https://react.ctolib.com/
)
22.
[
数据流管理架构之 Redux 介绍
](
http://www.alloyteam.com/2015/09/react-redux/
)
23.
[
React同构直出优化总结
](
http://www.alloyteam.com/2016/06/react-isomorphic/
)
24.
[
前端路由实现与 react-router 源码分析
](
http://www.alloyteam.com/2016/05/router/
)
25.
[
如何开发一个 Webpack Loader ( 一 )
](
http://www.alloyteam.com/2016/01/webpack-loader-1/
)
26.
[
服务器端渲染实践小结
](
http://www.alloyteam.com/2015/10/8783/
)
27.
[
听说你需要这样了解 Redux
](
https://github.com/rccoder/blog/issues/18
)
28.
[
学习Redux刷新了我的前端App状态管理观
](
http://www.jianshu.com/p/94d8f8a36ab0
)
29.
[
Learn React & Webpack by building a hacker news front page
](
https://github.com/theJian/build-a-hn-front-page
)
## 开发工具
-
[
react-devtools
](
https://github.com/facebook/react-devtools
)
-
[
React DevTools 正式发布,完全支持 React Native
](
http://www.oschina.net/news/65837/react-devtools-2-0
)
-
[
redux-devtools
](
https://github.com/gaearon/redux-devtools/blob/master/docs/Walkthrough.md
)
-
[
Redux超酷的开发工具Redux-Devtools
](
http://www.zhufengpeixun.cn/article/151
)
## redux 常用中间件或工具
-
[
redux-thunk
](
https://github.com/gaearon/redux-thunk
)
-
[
redux-gen
](
https://github.com/weo-edu/redux-gen
)
-
[
redux-undo
](
https://github.com/omnidan/redux-undo
)
-
[
react-router-redux
](
https://github.com/reactjs/react-router-redux
)
-
[
react-redux-form
](
https://github.com/davidkpiano/react-redux-form
)
## React 开源项目
介绍一些国内外比较好的 React 开源项目。
国内:
-
[
阿里的 React 组件库
](
https://github.com/react-component
)
-
[
Ant Design
](
https://github.com/ant-design/ant-design
)
-
[
简易留言板
](
https://github.com/tsrot/react-demo
)
-
[
react-zhihu
](
https://github.com/tsrot/react-zhihu
)
-
[
React的扫雷游戏
](
https://github.com/cjohansen/react-sweeper
)
-
[
在线聊天室
](
https://github.com/redsx/CR
)
-
[
使用React技术栈开发SPA
](
https://github.com/JasonBai007/reactSPA
)
-
[
阔论留言评论
](
https://github.com/NumerHero/kuolun
)
-
[
React版cnode社区
](
https://github.com/lzxb/react-cnode
)
-
[
适合新手学习的Demo, React + react-router + webpack + babel + Node + express + mongodb
](
https://github.com/rongchanghai/justForYou
)
国外:
-
[
Relax
](
https://github.com/relax/relax
)
-
[
SoundRedux
](
https://github.com/andrewngu/sound-redux/
)
-
[
Gatsby
](
https://github.com/gatsbyjs/gatsby
)
-
[
isomorphic500
](
https://github.com/gpbl/isomorphic500
)
-
[
NuclearMail
](
https://github.com/ianobermiller/nuclearmail
)
-
[
Picard
](
https://github.com/Automattic/Picard
)
-
[
React Color
](
https://github.com/casesandberg/react-color
)
-
[
Sentry
](
https://github.com/getsentry/sentry/
)
-
[
react-hn
](
https://github.com/insin/react-hn
)
-
[
Perseus
](
https://github.com/khan/perseus
)
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论