============ webpack + create-react-app ===================
1, 安装react代码行工具(脚手架), 基于webpack工具构建项目
npm install -g create-react-app
2,创建一个react应用程序, my-app是自定义项目名
create-react-app my-app
3,启动react项目 (需要cd进入项目my-app根目录)
npm start
注意: 在使用 create-react-app 来创建一个新的React应用,在拉取各种资源时,往往会非常慢,一直卡在那,因为资源还是使用了 npm下载的, 我们可以换成淘宝的资源, 执行指令
npm config set registry https://registry.npm.taobao.org
可以把npm指令替换成cnpm指令
问题: 安装脚手架报错: The fs.promises API is experimental
原因: npm版本过高或node版本过低
解决: npm i npm@6.4.1 -g
============= 使用 vite工具构建项目 ================
1, 安装vite构建工具
cnpm i vite create-vite -g
2, 使用vite构建项目, 选择react
npm init vite
3, 切换到项目根目录, 安装依赖包
cnpm i / npm i / yarn install
4, 运行,启动vite项目
npm run dev
2配置代理
2.1vite构建react项目配置代理
使用vite构建vue项目和react项目,配置代理等信息的方式是一样的
在vite.config.js中加入以下代码 (针对react,可全选替换)
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { fileURLToPath, URL } from "node:url";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
base: "./",
server: {
host: "localhost",
open: true,
port: 3000,
proxy: {
"/myDouyu": {
target: "http://open.douyucdn.cn/api/RoomApi",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/myDouyu/, ""),
},
},
}
})
2.22.1 webpack构建react项目配置代理
1, 下载安装代理模块
cnpm install http-proxy-middleware --save
2, 在src目录中新建setupProxy.js文件,在文件中放入如下代码(注意是src目录,不是根目录):
const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (app) {
app.use(createProxyMiddleware('/api',
{
target: 'http://127.0.0.1:3000',
changeOrigin: true,
pathRewrite: {
"^/api": ""
}
})
)
}
附加:
设置项目端口号: node_modules/react-scripts/scripts/start.js
也可以通过指令 npm run eject 把服务器配置暴漏出来, 修改scripts/start.js (这个指令不可逆)
3.图片懒加载
vite版本
官方地址: https://www.npmjs.com/package/react-lazy-load-image-component
// 适用于vite构建的react项目
1, 下载安装懒加载模块
cnpm i react-lazy-load-image-component
2, 在src/assets/目录下放入懒加载占位图 placeholder.gif
3, 在需要使用懒加载的组件中导入懒加载模块和占位图(blur.css虚化样式)
import { LazyLoadImage } from "react-lazy-load-image-component";
import 'react-lazy-load-image-component/src/effects/blur.css';
import placeholder from "@/asset/placeholder.jpg"
4, 在组件rander函数中创建占位图片标签img
var holderImg = <img src={placeholder} />
5, 在组件模板中给需要懒加载的图片替换成LazyLoadImage
<LazyLoadImage
placeholder={holderImg}
alt="图片"
src={item.room_src}
effect="blur"
/>
webpac版本:
// 此模块适用于webpack构建的项目
1, 下载安装懒加载模块
cnpm i react-lazyload --save
2, 在src/assets/目录下放入懒加载占位图 placeholder.gif
3, 在需要使用懒加载的组件中导入懒加载模块和占位图
import LazyLoad from 'react-lazyload';
import placeholder from "../../asset/placeholder.gif"
4, 在组件rander函数中创建占位图片标签img
var holderImg = <img src={placeholder} />
5, 在组件模板中给需要懒加载的图片添加LazyLoad父标签
<LazyLoad placeholder={holderImg}>
<img src={item.room_src} alt="这是一个图片" />
</LazyLoad >