flowke / react-learning

帮助 react 初学者成为 react 开发者的一份 react 教程. :tada::tada:

React 可变气门升程教程 ☀️☀️☀️

原谅我把标题写的这么拗口难读 😱. 但是本教程旨在帮助你从一个 react 初学者 变成一个合格的 react 开发者.

如果你是一个尚未接触 react 的前端人员, 并打算在 react 方向有所发展. 那么本教程将会对你有实质性的帮助. 🍭🍭🍭

什么是 React ?

你可以在众多的书籍, 视频和博客教程中能够找到 关于 react 的各种介绍, 有什么样的优势等等这些信息.

但是我并不打算在一开始就长篇大论 React 是什么.

时间宝贵, 你只要知道 React 是一个帮助你构建界面的库就好了. 现在的你还不需要了解除此以外更多其他的信息.

这是它的官网: English | 中文 🍟🍟

如何使用本教程 ❗❗❗

如果你是一位初学者:

• 按照课程大纲的指示, 一步一步, 循序渐进.
• 章节中有需要敲代码的地方, 不能偷懒, 不能跳过.
• 你有 99.9% 的可能需要全程打开编辑器, 以便随时调试.
• 记着以上三条, 严格遵守, 做好心理准备.

如果你已经有 react 使用经验:

• 可以把本教程当文档查阅.
• 直接到相应章节弥补自己需要的知识.

我有近两年的 react 实际使用经验, 一个库的语法和 API 学起来是很容易的, 最宝贵的是那些使用上的经验.

一般来说我会在某些地方谈到这些经验以及你需要避免的坑.

大多数的经验很难表达, 并且不经历过很难体会到那种心境, 但我会说出一些处理问题的原则和方式, 这些原则是普适的.

我有向 react 初学者群体 和 对react 有需求的前端从业人员面授 react 的经验. 带着他们从初学者到使用 redux 写项目.

教授 react 的经验对我非常宝贵. 💝💝💝

所以我知道你在学习的过程中在哪些地方会遇到困难和疑惑, 在内容的编排与撰写上, 我根据学习者反应进行多次了调整与修订.

即便这样, 你依然可能在学习的过程中遇到某些问题, 你务必相信随着你使用和开发的经验越多, 这些问题都会迎刃而解. 不必在某个时间点纠结太久.

最后要跟你说的是, 本教程不会让你成为一个 react 的大牛. 能够让你成为大牛是你那些无可替代的使用经验 和 碰到各种业务问题时的各种解决方案.

调试代码

大多数时候你需要调试代码, 查看代码运行的效果. 这一点非常重要.

你可以使用 create-react-app 生成项目, 在本机调试.

或者, 使用 codesandbox 在线调试: 👇👇

{:target:"_blank"}

学前要求

以下几点必须具备

1. 你必须具备 html, css, JavaScript 基础
2. 你必须 ES6 基础, 包括:
   • 声明: let, const
   • 函数扩展
   • 模板字符串
   • spread 与 rest
   • 变量的解构赋值
   • class 相关
   • ES6 模块化语法: import, export
3. CommonJS 模块化语法

ES6相关基础查看阮一峰的教程: ECMAScript 6 入门

以下几点拥有会更好

1. webpack 与 babel
2. npm 或 yarn

可以到这里查看相应信息:

webpack: English | 中文

babel: English | 中文

npm: English

yarn: 中文

提问与建议

直接到本项目提交 issue

课程大纲 🐶🐶🐶

最新动态

前置基础

ES6基本语法相关

1. 变量声明: let , const
2. 模板字符串
3. 变量解构赋值
4. 函数扩展
5. spread 和 rest
6. class 相关

常用数组方法

1. map()
2. filter()
3. every()
4. some()
5. reduce()

模块化基础

1. ES6 模块化语法
2. CommonJS 模块化语法

React 核心基础

1. 开始第一次尝试
2. React 运行起来最基本的组成
3. 初识 JSX
4. 理解 JSX
5. JSX 文档详情 (可选)
6. 组件
7. Props
8. State
9. State 的重要特性
10. 事件系统
11. 生命周期 ❗❗❗
12. defaultProps
13. 类型检查
14. Fragments
15. Portals
16. 错误边界
17. 高阶组件
18. Refs
19. ForwardingRefs

React 测试

1. 测试概述

React 同构