入门 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

你可能感兴趣的:(入门 React 的相关资源)