【React】新建React项目

news2025/1/16 21:21:43

create-react-app基础运用

1、安装脚手架

//mac前面要设置sudo
 npm i create-react-app -g

2、查看版本

 create-react-app --version

3、新建React项目，项目名称要遵循npm包命名规范：使用“数字、小写字母、_”命名

create-react-app 项目名称

4、项目目录

      |- node_modules
      |- src：所以后续编写的代码，几乎都放在SRC下「打包的时候，一般只对这个目录下的代码进行处理」
         |- index.js
      |- public：放页面模板
         |- index.html
      |- package.json
      |-

React核心依赖

在React项目中，会默认安装下面的依赖：

react：React框架的核心
react-dom：React视图渲染的核心，其主要基于React构建WebApp(HTML页面)
react-scripts：脚手架为了让项目目录看起干净一些，把webpack打包的规则及相关插件/loader等都隐藏到了node_modules目录下，react-scripts就是脚手架中自己对打包命令的一种封装，基于它打包，会调用node_modules中的webpack等进行处理！！

React 核心思想：数据驱动

React核心思想：不在直接去操作DOM，而是改为“数据驱动思想”。然后操作DOM的思想：操作DOM比较消耗性能「主要原因就是：可能会导致DOM重排(回流)/重绘」，也比较麻烦。

数据驱动思想：

不会直接操作DOM
我们去操作数据「当我们修改了数据，框架会按照相关的数据，让页面重新渲染」
框架底层实现视图的渲染，也是基于操作DOM完成的
- 构建了一套虚拟DOM->真实DOM 的渲染体系
- 有效避免了DOM的重排/重绘
开发效率更高、最后的性能也相对较好

React 采用 MVC体系

在这里插入图片描述

React框架采用的是MVC体系；Vue框架采用的是MVVM体系；

MVC：model数据层 + view视图层 + controller控制层

React中是基于jsx语法来构建视图的
构建数据层：在视图中，需要“动态”处理的(需要变化的，不论是样式还是内容)，我们都要有对应的数据模型
控制层：当我们在视图中(或者根据业务需求)进行某些操作的时候，都是去修改相关的数据，然后React框架会按照最新的数据，重新渲染视图，以此让用户看到最新的效果！

总结：
1、数据驱动视图的渲染！！
2、视图中的表单内容改变，想要修改数据，需要开发者自己去写代码实现！！
3、“单向驱动”

MVVM：model数据层 + view视图层 + viewModel数据/视图监听层

数据驱动视图的渲染：监听数据的更新，让视图重新渲染
视图驱动数据的更改：监听页面中表单元素内容改变，自动去修改相关的数据

总结： “双向驱动”

package.json

其中scripts中的属性：

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

start: 用于开发环境，启动本地 Web 服务器。
build: 用于生产环境，生成静态资源文件，输出到 dist 目录。
test: 用于运行单元测试。
eject: 暴露 Webpack 配置文件，供开发者自定义。

 "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

在这里插入图片描述

browserslist 用于指定项目需要兼容的浏览器范围，通常被工具如 Autoprefixer 和 Babel 使用，以确保 CSS 和 JavaScript 能够适配所选的浏览器环境。比如：

使用场景：

postcss-loader + autoprefixer：
- 根据指定的浏览器环境自动添加 CSS 前缀（如 -webkit-、-ms- 等）。
- 确保 CSS 属性兼容旧版本浏览器。
babel-loader：
- 将 ES6+ 代码转译为目标浏览器支持的 ES5 代码。

属性配置：

browserslist 字段：包含两个环境配置：production 和 development。
production 环境：
- ">0.2%"：支持全球使用率超过 0.2% 的浏览器。
- "not dead"：排除不再维护或不更新的浏览器（如 IE）。
- "not op_mini all"：不考虑 Opera Mini 浏览器。
development 环境：
- "last 1 chrome version"：仅支持最新的一个 Chrome 版本。
- "last 1 firefox version"：仅支持最新的一个 Firefox 版本。
- "last 1 safari version"：仅支持最新的一个 Safari 版本。

在 production 配置中，通过规则如 "not dead" 和 "not ie <= 8"，明确排除了低版本的 IE 浏览器（包括 IE 8 及以下）。若需要兼容低版本 IE，可以在配置中添加如下规则：

"browserslist": {
  "production": [
    ">0.2%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
}

全部的package.json如下：

{
  "name": "demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4" // 性能检测工具
  },
  // 打包命令是基于 react-scripts 处理的
  "scripts": {
    "start": "react-scripts start", // 开发环境：在本地启动 Web 服务器，预览打包内容
    "build": "react-scripts build", // 生产环境：打包部署，打包的内容输出到 dist 目录
    "test": "react-scripts test",   // 单元测试
    "eject": "react-scripts eject"  // 暴露 Webpack 配置，可以修改默认配置
  },
  // 对 Webpack 中 ESLint 词法检测的相关配置
  // 词法检测
  // - 词法错误（不符合标准规范）
  // - 不符合标准（代码本身不报错，但不符合 ESLint 的检测规范）
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  // 基于 browserlist 规范设置浏览器的兼容情况
  // - postcss-loader + autoprefixer 会给 CSS3 设置相关的前缀
  // babel-loader 会把 ES6 编译为 ES5
  "browserslist": {
    "production": [
      ">0.2%",          // 使用率超过 0.2% 的浏览器
      "not dead",       // 不考虑 IE
      "not op_mini all" // 不考虑欧朋浏览器
    ],
    "development": [ // 不兼容低版本和 IE 浏览器
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

index.html

public目录下会生成index.html，index.html 是 React 项目的静态模板文件，public目录用于存放不会被打包的静态资源，而 %PUBLIC_URL% 提供了动态路径占位功能，在构建过程中被替换为public 目录的路径。
在这里插入图片描述

好书推荐

《微前端之道，从理论到实践》：链接直达

全面介绍微前端技术：本书涵盖微前端的各个方面，包括微前端的起源与发展、适用场景、解决的问题、缺点以及解决方案，让读者对微前端有一个全面的了解。
深入剖析微前端解决方案：《微前端之道:从理论到实践:视频教学版》详细介绍iframe方案、动态script方案、webComponent以及社区微前端解决方案，并通过实例来帮助读者更好地理解和应用。结合实践：《微前端之道:从理论到实践:视频教学版》不仅介绍微前端的基础知识，还结合实践，手把手地指导读者如何构建微前端项目，解决SSR问题，优化性能，进行服务器部署和老旧项目改造等。