【React学习笔记】第三章：React应用

1.使用create-react-app创建 react 应用

1.1 react 脚手架

react提供了一个用于创建 react 项目的脚手架：create-react-app
项目的整体技术架构为：react + webpack + es6 + eslint

1.2 创建项目并启动

打开CMD
第一步： 全局安装react脚手架 npm install -g create-react-app
第二步： 创建hello-react项目：create-react-app hello-react
第三步： 进入项目文件夹：cd hello-react
第四步： 启动项目：npm start

---

也可以直接使用 npx(npm v5.2.0 引入的一条命令) 创建项目，无需安装脚手架
第一步： 初始化项目：npx create-react-app 项目名称
第二步： 启动项目： npm start

---

如果react安装的是19版本，可能因为版本不兼容问题报错：

npm install --no-audit --save @testing-library/jest-dom@^5.14.1

解决方式1：

npm install --no-audit --save @testing-library/jest-dom@^5.14.1
@testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1
@types/jest@^27.0.1 @types/node@^16.7.13 @types/react@^19.0.0
@types/react-dom@^19.0.0 typescript@^4.4.2 web-vitals@^2.1.0
–legacy-peer-deps\

方式2：
重新安装18版本的
npm install react@18 react-dom@18

1.3 react脚手架项目结构

项目目录结构分析：

• public —— 静态资源文件夹
  • favicon.icon —— 网站页签图标
  • index.html —— 主页面（只有一个html页面）
  • manifest.json —— 应用加壳的配置文件
  • robots.txt —— 爬虫协议文件
• src —— 源码文件夹
  • App.css —— App组件的样式
  • App.js —— App组件
  • App.test.js —— 用于给App做测试
  • index.css —— 通用的样式，也可以在public-index.html中引入
  • index.js —— 入口文件
  • logo.svg —— logo 图
  • reportWebVitals.js —— 页面性能分析文件（需要web-vitals 库的支持
  • setupTests.js —— 用于做应用的整体测试（需要 jest-dom 的支持）

---

主文件执行顺序：
首先来到 src/index.js文件，引入react核心库、reactDOM、样式、App组件……