当前位置：首页 > news >正文

【react】react18的学习

news 2025/8/22 15:00:06

一、安装

$ create-react-app [Project name]

默认支持sass

二、核心依赖

react：react 核心

react-dom：用于开发渲染web 应用；

react-scripts：封装webpack服务；

    "start": "react-scripts start",// 开发环境"build": "react-scripts build",// 生产环境打包"test": "react-scripts test",// 单元测试"eject": "react-scripts eject"// 暴露配置，用于自定义修改

react-native：用于开发渲染 App 应用；

三、暴露配置文件

$ yarn eject

新增文件

config 文件夹：react框架webpack的配置
scripts 文件夹：项目运行的构建脚本文件

配置修改

1、解决严格模式eslint报错

// package.json 
"babel": {"presets": [["babel-preset-react-app",false],"babel-preset-react-app/prod"]}

常见配置修改

移除默认的 sass，使用 less 替换；config\webpack.config.js
增加别名：@==》src；config\webpack.config.js

alias: {'@': paths.appSrc,

修改端口号

// scripts\start.js
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || '0.0.0.0';
// 方式一：直接修改
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 9527;
const HOST = process.env.HOST || '127.0.0.1';
// 方式二：修改环境变量 process.env
// 安装：yarn add cross-env
// 修改启动脚本："start": "cross-env PORT=9527 node scripts/start.js",

修改浏览器兼容：package.json==>browserslist

// 这里可以实现对【postcss-loader:控制css3的前缀】生效
// 这里可以实现对【babel-loader:控制ES6的转换】生效
// 还有一个ES6内置API的转换需要额外配置【@babel/polyfill】；
方式一：在入口文件之间引入该依赖包；
方式二：使用提供的react-app-polyfill（react对上面依赖包的重写）
// 入口文件引入

配置开发环境代理

// src\setupProxy.js
// yarn add http-proxy-middleware
// vue 代理devServer: {port: 8080, // 本地跑的端口，默认是8080，proxy: {"/api": {  // 请求路径中含 /apitarget: "http://localhost:9000", 目标服务器},},}
//react 代理
const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (app) {app.use(createProxyMiddleware('/jian', {target: 'https://www.jianshu.com/asimov',changeOrigin: true,ws: true,pathRewrite: { '^/jian': '' },}));app.use(createProxyMiddleware('/zhi', {target: 'https://news-at.zhihu.com/api/4',changeOrigin: true,ws: true,pathRewrite: { '^/zhi': '' },}));
}