引言
作为一个拥有一年Vue项目开发经验的前端新人，在没学过React相关知识但突然接手React项目并要求两周内上线的情况下，我是如何通过项目来快速学习React相关知识的
- 注：本篇文章不会介绍React具体知识，而是以拥有Vue经验的开发人员视角，来了解如何快速搭建并开发React项目
- 注：因此下边的介绍均从Vue项目搭建角度出发
项目准备
- 通过脚手架直接创建React项目。在cmd中执行create-react-app命令
- 进入项目直接查看package.json文件了解项目的相关技术栈
- 选择包管理工具，按个人习惯来，我是用yarn
项目分析
- 查看创建好的项目的目录结构
- 了解每个文件，以及文件夹的作用
- 以下是典型的React项目目录结构树，可以发现和Vue项目非常相似
├── public # 公共文件
│ ├── index.html # 首页HTML文件
│ └── favicon.ico # 图标文件
├── src # 源代码
│ ├── components # 组件
│ │ ├── Header.js # 头部组件
│ │ ├── Navigation.js # 导航组件
│ │ ├── Footer.js # 底部组件
│ │ └── ... # 公共组件
│ ├── pages # 页面
│ │ ├── home # 主页
│ │ ├── login # 登录页
│ │ └── ... # 其他页面
│ ├── utils # 工具
│ │ ├── api.js # API请求工具函数
│ │ ├── config.js # 项目配置文件
│ │ └── ... # 其他工具函数（一些通用的工具函数，如格式化日期等）
│ ├── styles # 全局样式文件夹
│ └── index.jsx # 入口文件
├── package.json # 项目依赖和运行配置文件
├── yarn.lock # Yarn锁定文件，确保依赖项版本一致性
└── node_modules # Node.js模块文件夹，包含项目依赖项
项目启动
- 查看package中的script命令，通过yarn来执行即可，如果报错（先执行yarn来安装项目依赖）
- 对新手来说，通过脚手架创建的项目，项目的构建配置是开箱即用的，
- 项目启动与Vue一样也是通过构建工具来启动的，如webpack，启动的原理去了解webpack相关知识即可。
项目开发
！ 终于到了最关键的一步，拥有Vue项目开发经验的我们，肯定熟悉Vue项目的开发流程，我们可以对比分析出React如何开发，并学习相应部分的知识
- 找入口文件，在项目分析中我们知道了index.jsx是入口文件，找到主app
- 删除无用的代码和文件，比如删除脚手架创建时默认生成的页面，在pages中
- 配置路由，有路由才能跳转页面，分析package.json可推测react-route-dom是路由模块，去npmjs.com中查找该模块，学习如何配置
- 创建路由对应的页面，在pages中创建页面模块即可
- 引入UI组件库，比如耳熟能详的antd
- 引入css样式工具，比如sass，less，或者使用样式库，比如tailwindcss
- 页面搭建，实现一个最简单的页面，在浏览器中查看效果
- 封装请求工具，比如axios
页面开发
！ 通过梳理Vue页面开发需要编写的知识点来学习对于React的方式，具体有变量定义，方法定义，模板的编写，模板中属性和变量的书写方式，父子组件通信，全局状态管理，路由的访问，生命周期的钩子。
- 单文件组件：Vue页面开发时，我们的组件封装是通过.vue文件实现的，在React中没有这种格式，我们是通过jsx语法来封装
- jsx语法：其实Vue也支持jsx语法，如果学过直接上手即可
- React语言的编写规范：比如响应式变量和属性，方法等在jsx中如何编写
- 生命周期：学习React中组件的生命周期，了解各生命周期所能实现的操作
- 父子组件通信：与Vue相似通过props传值，通过自定义事件回传
- 全局状态管理：比如mobx库，或者直接使用官方提供的context钩子，但没有这种场景可暂不学习
- 路由访问：学习react-route-dom的路由访问方式，如通过官方提供的useHistory钩子来实现路由的访问
总结
- 基本上你会发现按照Vue的开发经验来了解React项目是很快的
- 除了React以及生态库的用法和编写方式需要学习之外，其余都是相通的，通过这种方式可以提升对项目的熟悉程度，同时不至于不知道从何处下手
