react学习 - 构建工程化项目_react工程化-优快云博客

本文链接：https://blog.youkuaiyun.com/violetta521/article/details/130711700

文章介绍了create-react-app作为React开发的脚手架，如何快速创建项目，包括npx命令的使用，项目目录结构，以及package.json文件的内容。还讨论了Webpack在打包优化中的作用，以及在React18中由ReactDOM.render转向使用createRoot的新变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

create-react-app的基础运用

为什么需要脚手架？

未来趋势肯定是组件化/模块化开发

有利于团队协作
便于组件复用，提高效率、方便维护、减少冗余代码

组件划分：业务组件（不同的人做不同的组件）；功能组件（ui组件库）

因为组件库开发，就要带来“工程化”处理，使用打包工具

webpack vite rollup turbopack
实现组件的打包、合并、压缩、打包
代码编译、兼容、校验
网络跨域，搭建临时服务器

create-react-app的基础运用

安装脚手架

create-react-app react官方脚手架

方法1：直接创建项目

npx create-react-app 项目名  //npx不能用的话，升级nodejs版本

npx

npm的附带产物
用npx 执行命令首先看第一个参数（一个空格就是一个参数）有没有被安装
- 如果没有安装，npx让npm临时安装一下；当安装成功npx会执行整段命令

方法2

//将脚手架安装全局
npm i create-react-app -g [mac前面设置sudo]

//创建项目
create-react-app 项目名

//项目名规范
小写、数字、_下划线

 npm start //启动项目
 npm test //测试
 npm run build //打包上线

项目目录

README.md 项目说明文档
node_modules 所有的依赖安装的目录
package-lock.json 锁定安装时的包的版本号,保证团队的依赖能保证一致。
package.json 配置文件
public 静态公共目录
- index.html
src 开发用的源代码目录，打包时只对这个目录的代码进行处理
- index.js 主入口

package.json页面

一个React项目中，默认会安装

react：React框架的核心（语法、状态处理）
react-dom：React视图渲染的核心（用于构建h5页面）
react-native：构建和渲染App（应用）
react-scripts：对打包命令的封装；调用node_modules中的打包命令，实现对项目打包编译

index.html

//index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <!-- 指定页签的icon -->
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <!-- 开启理想视口，移动端的适配， -->
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- 只针对手机浏览器页签、地址栏的颜色，兼容性不好 -->
  <meta name="theme-color" content="#000000" />
  <!-- 用于网页添加到手机主屏幕后的icon图标 -->
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  <!-- 应用加壳，页面文件套壳成为app应用,可以生成.apk包。manifest.json为app的配置文件 -->
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <meta name="description" content="Web site created using create-react-app" />
  <link />
  <title>React App</title>
</head>

<body>
  <!-- 如果浏览器不支持js的运行这段文字就会出现在界面上 -->
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>

</html>

index.js

reportWebVitals(); 做性能指标
webvitals是国外用来做性能指标的，lcp fcp之类的，国内我们自己有自己的性能监控方式

webpack打包优化

暴露webpack配置规则

npm run eject

// or

yarn eject

暴露成功！

"@babel/core" es6转es5
"@pmmmwh/react-refresh-webpack-plugin" 刷新插件
"@svgr/webpack"
单应用测试
"@testing-library/jest-dom"
"@testing-library/react"
"@testing-library/user-event"
babel处理
"babel-jest"
"babel-loader"
"babel-plugin-named-asset-import"
"babel-preset-react-app" 对@babel/preset-env重写，实现ES6转为ES5
"browserslist" 浏览器兼容列表

关于报错

//src-index.js
//创建小demo

import React from "react"; //jsx 17版本之后默认引入，可不写
import ReactDom from "react-dom";//react渲染到页面

//render方法 将组件渲染指定节点
//参1：用jsx语法写的html
//参2：指定节点
ReactDom.render(<div>1111
</div>, document.getElementById('root'))

然后就报错啦！！！

因为我安装的是18.2.0版本，已经不支持 react-dom

警告:ReactDOM。渲染在React 18中不再被支持。请使用createRoot。在你切换到新的API之前，你的应用程序会像运行React 17一样运行。

然后就去官网尝试新的写法

import { createRoot } from "react-dom/client";

// 清除现有的 HTML 内容
document.body.innerHTML = '<div id="app"></div>';

// 渲染你的 React 组件
const root = createRoot(document.getElementById("app"));
root.render(<h1>Hello, world</h1>);

页面就成功出现想要内容啦