创建react项目_新建react嘤嘤

1.创建项目

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. vite构建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/, ""),
      },
    },
  }
})

3.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         (这个指令不可逆)

4.react图片懒加载-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" 
    />

5.react图片懒加载-webpack

// 此模块适用于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 >

5.React中如何实现样式隔离

在react组件中,默认所有的样式文件都是全局作用域,不存在样式隔离
 
方法一: 根标签选择器限制
如果需要每个组件样式隔离, 在设置组件样式时, 每一个选择器都添加组件根标签选择器, 以区分不同组件中的样式
 
方法二: 使用CSS Modules   css模块化
1, 创建组件样式文件时以 xxx.module.css命名, 例如 Home.module.css 代替  Home.css 
2, 在组件jsx导入样式文件时使用 import styles from './xxx.module.css' 导入  代替  import './xxx.css'
3, 在组件中需要设置样式的标签上添加class值, className={styles.yyy}  其中yyy指的是css样式中的class值
4, 在xxx.module.css中通过 .yyy{} 设置样式,即为局部样式
 
 
一般建议:
    自定义组件的样式,自己写的样式使用方法一
    第三方导入的组件或样式文件,使用方法二