# myreact

**Repository Path**: istaotao/myreact

## Basic Information

- **Project Name**: myreact
- **Description**: 记录学习 React 的相关知识
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-07-13
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 学习 React 的一些记录日志

## My Learning

### React 理论知识总结

我的文档 [React 理论知识点](https://www.yangtao.site/vuepress/advanced/react/doc-basic.html)，包含 React 的基础知识，以及 Router、Redux 等

### React 入门 DEMO

**[Demo 地址，戳我](./demo/)**

1. [ReactDOM.render()](https://github.com/yangtao2o/myreact/blob/master/demo/01/index.html)
1. [Use Array in JSX](https://github.com/yangtao2o/myreact/blob/master/demo/02/index.html)
1. [组件](https://github.com/yangtao2o/myreact/blob/master/demo/03/index.html)
1. [this.props.children](https://github.com/yangtao2o/myreact/blob/master/demo/04/index.html)
1. [PropTypes](https://github.com/yangtao2o/myreact/blob/master/demo/05/index.html)
1. [获取真实的 DOM 节点](https://github.com/yangtao2o/myreact/blob/master/demo/06/index.html)
1. [this.state](https://github.com/yangtao2o/myreact/blob/master/demo/07/index.html)
1. [表单](https://github.com/yangtao2o/myreact/blob/master/demo/08/index.html)
1. [组件的生命周期](https://github.com/yangtao2o/myreact/blob/master/demo/09/index.html)
1. [使用 Promise 获取 Github 的数据](https://istaotao.com/myreact/demo/10/)
1. [Todo List](https://istaotao.com/myreact/demo/11/)
1. [井字棋（Tic Tac Toe）](https://istaotao.com/myreact/demo/12/) - 官方文档练习 DEMO

### React Hooks

- [React Hooks 使用总结](https://github.com/yangtao2o/myreact/tree/master/myhooks/hooks-use-summary)

### Router

- [React-Router](https://github.com/yangtao2o/myreact/tree/master/myrouter/my-app)

### Redux

- [Redux 使用总结](https://github.com/yangtao2o/myreact/tree/master/myredux/make-redux)
- [动手实现 React-redux 练习](https://github.com/yangtao2o/myreact/tree/master/myredux/make-react-redux)
- [计数器 Redux-Counter](https://github.com/yangtao2o/myreact/tree/master/myredux/redux-counter)
- [计数器 React-Redux-Counter](https://github.com/yangtao2o/myreact/tree/master/myredux/react-redux-counter)

### Nextjs - 配合 React 打造静态化和服务端渲染应用

**[Nextjs](https://github.com/yangtao2o/myreact/tree/master/nextjs/01-hello-next)**

- Demo1: 学习官方文档

```bash
cd nextjs/01-hello-next
npm install
npm run dev
```

### Antd - 基于 Ant Design 设计体系的 React UI 组件库

[Ant Design of React](https://ant.design/docs/react/introduce-cn) -主要用于研发企业级中后台产品

[Ant Design 实战教程](https://www.yuque.com/ant-design/course/intro)

```bash
cd antd-course
npm i
npm run dev
```

## My Project

- [学习「井字游戏」](./product/01-ttt/)
- [学习体验 Ant Design of React](./product/02-news-app/)

## Document

- [React 官方文档](https://zh-hans.reactjs.org/docs/getting-started.html)
- [Ant Design 实战教程](https://www.yuque.com/ant-design/course/intro)
- [Ant Design of React](https://ant.design/docs/react/introduce-cn) --- antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。
- [Ant Design Pro](https://pro.ant.design/docs/getting-started-cn) --- 是一个企业级中后台前端/设计解决方案
- [Ant Design Mobile of React](https://mobile.ant.design/docs/react/introduce-cn) --- 是 Ant Design 的移动规范的 React 实现，服务于蚂蚁及口碑无线业务
- [webpack 官方文档](https://www.webpackjs.com/concepts/)
- [React 与 webpack](https://typescript.bootcss.com/tutorials/react-&-webpack.html)
- [Next.js](https://nextjs.org/learn/basics/getting-started) --- 是一个流行的、轻量级的框架，用于配合 React 打造静态化和服务端渲染应用。它包括开箱即用的样式和路由方案，并且假定你使用 Node.js 作为服务器环境。
- [Gatsby](https://www.gatsbyjs.org/docs/) --- 是用 React 创建静态网站的最佳方式。它让你能使用 React 组件，但输出预渲染的 HTML 和 CSS 以保证最快的加载速度。
- [UmiJS](https://umijs.org/zh/) --- 可插拔的企业级 react 应用框架。

## Video Course

### 初级

- [基于实例的 react16 傻瓜课程](https://www.imooc.com/learn/1045) --- 用一系列有趣的、简洁明快的实例由浅入深的阐述了 React 的特色，概念和基本使用
- [react16.4 快速上手](https://www.imooc.com/learn/1023) --- 通过 Todolist 功能的实现，给大家讲解了 React 组件间的通信方式

### 中级

- [react 16 实现订单列表及评价功能](https://www.imooc.com/learn/1061) --- 介绍了从项目创建、到组件划分、再到组件及页面逻辑实现的开发流程
- [react 组件](https://www.imooc.com/learn/944) --- 比较详细地讲解组件和生命周期

### 高级

- [react 响应用户输入](https://www.imooc.com/learn/953) --- 学习如何让数据逻辑与 UI 的结合使用、react 的事件处理机制以及 react 对 DOM 模型的操作
- [react 知识点综合运用实例](https://www.imooc.com/learn/971) --- 综合实例操作
- [react 高级教程之高阶组件](https://www.imooc.com/learn/1075) --- 高阶组件的应用：代理和继承

## Learning Materials

- [《react 入门教程》](https://hulufei.gitbooks.io/react-tutorial/content/index.html)
- [《react 入门实例教程》](http://www.ruanyifeng.com/blog/2015/03/react.html) --- 阮一峰
- [《typescript 热门教程》](https://ts.xcatliu.com/)
- [《6 周学习计划，攻克 javascript 难关(react/redux/es6 etc.)》](https://zhuanlan.zhihu.com/p/23412169)