https://github.com/ziyi2/react-tutorial
React学习文档
https://github.com/ziyi2/react-tutorial
Last synced: 9 months ago
JSON representation
React学习文档
- Host: GitHub
- URL: https://github.com/ziyi2/react-tutorial
- Owner: ziyi2
- Created: 2019-09-18T00:11:46.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2021-03-12T09:44:42.000Z (over 5 years ago)
- Last Synced: 2025-01-29T04:01:35.732Z (over 1 year ago)
- Language: JavaScript
- Size: 629 KB
- Stars: 2
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React-Tutorial
这是一个刚从 Vue 转向 React 技术栈的小白学习教程。
## 创建应用程序
Vue 的开发者一般都知道开发的标准工具[Vue CLI](https://cli.vuejs.org/zh/)，在 React 中也有类似的开发工具[Create React App](https://www.html.cn/create-react-app/docs/getting-started/)用于创建 React 应用：
- [使用 Create React App 新建应用](https://github.com/ziyi2/react-tutorial/blob/master/docs/create.md)
## 设置编辑器
在这里加入了一些推荐的 VS Code 插件和 VS Code 配置，从而提供开发效率：
- [VS Code 设置](https://github.com/ziyi2/react-tutorial/blob/master/docs/setting.md)
## 集成开发工具
以前设计 Vue 脚手架时会在脚手架中集成一些提高开发效率的小工具（可以通过 Vue CLI 插件的形式集成），在 Create React App 中需要手动添加改善编辑器或者应用体验的这些工具：
- [在编辑器中自动修复 Lint](https://github.com/ziyi2/react-tutorial/blob/master/docs/tools.md#%E5%9C%A8%E7%BC%96%E8%BE%91%E5%99%A8%E4%B8%AD%E8%87%AA%E5%8A%A8%E4%BF%AE%E5%A4%8D-lint)
- [在编辑器中自动格式化代码](https://github.com/ziyi2/react-tutorial/blob/master/docs/tools.md#%E5%9C%A8%E7%BC%96%E8%BE%91%E5%99%A8%E4%B8%AD%E8%87%AA%E5%8A%A8%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%BB%A3%E7%A0%81)
- [在应用中加入提交代码的 ESLint 检查功能](https://github.com/ziyi2/react-tutorial/blob/master/docs/tools.md#%E5%9C%A8%E5%BA%94%E7%94%A8%E4%B8%AD%E5%8A%A0%E5%85%A5%E6%8F%90%E4%BA%A4%E4%BB%A3%E7%A0%81%E7%9A%84-eslint-%E6%A3%80%E6%9F%A5%E5%8A%9F%E8%83%BD)
- [在应用中加入提交说明规范工具](https://github.com/ziyi2/react-tutorial/blob/master/docs/tools.md#%E5%9C%A8%E5%BA%94%E7%94%A8%E4%B8%AD%E5%8A%A0%E5%85%A5%E6%8F%90%E4%BA%A4%E8%AF%B4%E6%98%8E%E8%A7%84%E8%8C%83%E5%B7%A5%E5%85%B7)
## 样式设置
在 React Create App 中支持预处理器和类似于 Vue Scoped CSS 功能的样式设置：
- [支持 Less](https://github.com/ziyi2/react-tutorial/blob/master/docs/style.md#%E6%B7%BB%E5%8A%A0-less)
- [支持 Scoped Css](https://github.com/ziyi2/react-tutorial/blob/master/docs/style.md#%E6%B7%BB%E5%8A%A0-scoped-css)
## 组件引入
> [antd](https://ant.design/docs/react/introduce-cn) 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。
这里引入 antd 组件来快速设计应用样式。
## 路由解决方案
Vue 的路由解决方案[`vue-router`](https://github.com/vuejs/vue-router)可以通过 Vue CLI 系统的`vue create`命令快速集成到项目中，但是在 React 中需要手动集成 React 的路由解决方案[`react-router`](https://github.com/ReactTraining/react-router)：
- [路由组件](https://github.com/ziyi2/react-tutorial/blob/master/docs/router.md#%E8%B7%AF%E7%94%B1%E7%BB%84%E4%BB%B6)
- [匹配组件](https://github.com/ziyi2/react-tutorial/blob/master/docs/router.md#%E5%8C%B9%E9%85%8D%E7%BB%84%E4%BB%B6)
- [匹配组件渲染方式](https://github.com/ziyi2/react-tutorial/blob/master/docs/router.md#%E6%B8%B2%E6%9F%93%E6%96%B9%E5%BC%8F)
- [导航组件](https://github.com/ziyi2/react-tutorial/blob/master/docs/router.md#%E5%AF%BC%E8%88%AA%E7%BB%84%E4%BB%B6)
- 服务端渲染
- 滚动还原
- 嵌套路由
- 静态路由
- 代码拆分
## React 语法
## React 调试工具
## React Redux
## Rxjs
## 中台前端/设计解决方案
- [ANT DESIGN PRO](https://pro.ant.design/index-cn)
## React Awesome
## React Static
## React Next
## 参考链接
- [Create React App](https://www.html.cn/create-react-app/docs/getting-started/)