入门 React 的相关资源

前端的花花世界更新太快，往往新框架一出总是引起一阵台风，可惜地是，除了官方的文档之外，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