前端的花花世界更新太快,往往新框架一出总是引起一阵台风,可惜地是,除了官方的文档之外,Bug 处理或者资料少之又少。React 框架也是如此,新手往往投入学习成本的时候太纠结,“我能怎么办,我也 hin 绝望啊”。别急,我这儿有一些小小的建议和一些不错的资源,希望对你学习或者使用 React 重构项目过程中有所帮助。
React 文档及上手工具
没错,就是这么绝望,我们就要看一看 React文档 。
- 用力戳:https://reactjs.org/docs/installation.html
从这里开始,你将理解 React 的术语和概念。连概念和术语都不清楚的话,怎么问问题?怎么在生态环境中找到你的一席之地?
如果我想动手试试怎么办? CodePen
- 用力戳:https://codepen.io/gaearon/pen/rrpgNB?editors=0010
如果我想自己构建一个 React App 怎么办? Code SandBox
- 用力戳:https://codesandbox.io/s/new
我想在自己机器上搭建环境开始开发怎么办?参看 React 文档中的 Create React App
- 用力戳:https://github.com/facebookincubator/create-react-app
我不喜欢读文档怎么办?React 文档分为快速入门和高级指南,快速入门中包含你需要的基本概念和术语,请务必把快速入门阅读完毕。
React 教程
好了,现在了解了 React 的基本概念和术语,可是还是不知道从哪里开始,怎么办? Tyler 的教程
- 用力戳:https://tylermcginnis.com/courses/(现在收费了...)
没钱,没支付方式就不能学了吗? Joe 的教程和 Youtube上 的教程
- 用力戳:https://egghead.io/courses/react-fundamentals
- 用力戳:https://www.youtube.com/playlist?list=PLoYCgNOIyGABj2GQSlDRjgvXtqfDxKm5b
当然了,最好的还是 Tyler 大牛写的,讲的比较清楚,质量高,角度是从工程的角度。
React 知识点小补充
学习各种小知识点的小册子,定时更新,作者给出了很多建议。 ReactBits
- 用力戳: https://vasanthk.gitbooks.io/react-bits/
Redux 文档和视频
如果现在你写的 React App 已经慢慢开始庞大,我需要一个框架怎么办? Redux 或者 MobX
- Redux 文档用力戳: http://redux.js.org/
- Redux 视频教程:https://egghead.io/courses/getting-started-with-redux
- MobX 介绍用力戳:https://mobx.js.org/
对于大型项目来说,比较推荐 Redux,和 MobX 的对比网上有很多说明,举个栗子:
- 用力戳:https://www.youtube.com/embed/76FRrbY18Bs
我不想看文档,我就是不想看文档,怎么办? Redux 全解
- 用力戳: https://leanpub.com/redux-book
我想看视频,教练! 用 Idiomatic Redux 开发 React 应用程序
- 用力戳: https://egghead.io/courses/building-react-applications-with-idiomatic-redux
其他一些工具资源
Webpack,重要的 React 应用打包工具
- 用力戳:https://webpack.js.org/
服务器渲染(高级技巧),如果这种高级技巧一时间难以接受,可以考虑 Next.js
- 什么是服务器渲染:https://www.lullabot.com/articles/what-is-an-isomorphic-application
- Redux 架构如何进行服务器渲染:http://redux.js.org/docs/recipes/ServerRendering.html
- Next.js: https://github.com/zeit/next.js/
- Next.js 文档:https://learnnextjs.com/
Redux Sega,Redux 中间件(通常用在修改数据和保存数据的时候)
- 用力戳: https://github.com/redux-saga/redux-saga
Reselect,Redux 的选择器库(通常用在计算时防止不必要的重新渲染)
- 用力戳: https://github.com/reactjs/reselect