配置文件

• vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(),],

  base: '/PreView/',

  build: {
    outDir: 'PreView'
  },
  resolve: {
    alias: {

    },
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
  },


})

• tsconfig.node.json

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

• tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": [
      "ES2020",
      "DOM",
      "DOM.Iterable"
    ],
    "module": "ESNext",
    "skipLibCheck": true,
    /* Bundler mode */
    "moduleResolution": "Node",
    // "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "./src/**/*"  
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

• main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

scss与axios包引入

scss:   pnpm i sass 或者  pnpm i scss
axios: pnpm i axios

一个最基本的异步组件

此部分代码是react18最基本的异步请求并渲染，希望对大家有帮助

• ts部分

import { Component } from 'react'
import './renderImage.scss'
import axios from 'axios'
interface RenderImageState {
    list: any
    detail: any
}
class RenderImage extends Component<{}, RenderImageState> {

    constructor(props: {}) {
        super(props);
        this.state = {
            detail: {},
            list: []
        };
    }

    async componentDidMount() {
        const url = window.location.pathname;
        const regex = /\/(\d+)$/; // 正则表达式用于匹配路径中的数字部分
        const match = regex.exec(url);
        const id = match ? match[1] : null; // 提取匹配到的数字部分

        console.log(id);

        const baseURL = 'http://custom.con' // 地址
        const api = `/test/getUserID` // api接口
        const params = {
            userID: id,
            
        }

        const res = await axios.get(baseURL + api, { params })
        const data = res.data.data
        console.log(res.data);
        data.urls.sort();
        const list = []
        for (let i = 0; i < data.urls.length; i++) {

            list.push(data.base_url + data.urls[i])

        }
        console.log(list);
        this.setState({
            list: list,
            detail: data
        })





    }

    getImage = (): any => {
        // const list = this.state.list
        const img = this.state.list[0]
        return (
            <img src={img} ></img>
        )
    }
    test = (): any => {
        return this.getImage()
    }

    render() {
        return (
            <div>
                <div>
                    {/* {this.test()} */}
                </div>
                <div className='box'>
                    {
                        this.state.list.map((item: string, index: number) => {
                            return (
                                <div className='item'>
                                    <img src={item} className="img" ></img>
                                    <div className='index'>{index + 1}</div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        )
    }

}
export default RenderImage

• css 部分(renderImage.scss文件)

.box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 10px;

    .img {
        width: 240px;
        height: auto;
    }
    .index{
        font-size: 20px;
        font-weight:bold;
        text-align: center;
    }
}

• 引入这个react组件

import { } from 'react'
import '../src/index.scss'
import './App.css'
// 组件
import RenderImage from './page/render/RenderImage'


function App() {


  return (
    <div className="main_box">
      <RenderImage></RenderImage>
    </div>
  )
}

export default App

END

为什么要写这些？ 因为我用的是vite创建一个react项目，react的版本为18版本，在用vite创建好以后，项目会有很多的错误提示，这些错误提示需要通过一些配置文件的修改才可以消除，

还有就是react18的异步请求数据与渲染的基本使用

至于其他的UI库的引入与axios的封装与路由那些我这里就不做详细的代码演示了，如果有需要后面可以出一个完整版的给大家，但是如果懂项目搭建的朋友，通过上面的代码，就基本上可以满足80%的需求了，剩下的一些小需求都不难。

希望这些代码能帮助到大家，谢谢。