創(chuàng)建項(xiàng)目

npm init vite

復(fù)制依賴

dependencies: {
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-redux": "^7.2.8",
  "react-router-dom": "^6.3.0",
  "redux": "^4.1.2"
}

樣式初始化

可以安裝css庫來進(jìn)行樣式的初始化，有reset-css、normalize.css,這里安裝reset-css

npm i reset-css
// 在main.tsx中引入
// 初始化樣式放在最前面
import 'reset-css'
// UI組件庫的樣式
// 自定義組件自身的樣式
import App from './App'

路徑別名配置

在vite.config.ts中配置@符號

import path from 'path'
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, './src')
    }
  }
})

path是node的內(nèi)置模塊爱态，安裝好node就安裝好了path，如果此時(shí)path爆紅骏融，是因?yàn)槿鄙賢s的一些聲明箭跳，所以安裝ts的這些聲明即可

npm i -D @types/node

安裝成功后就不爆紅了析苫，如果import 后面的path爆紅就把引入改成

import * as path from 'path'

這個(gè)和vite的版本有關(guān)系

路徑別名提示

在tsconfig.json文件中配置如下信息

"compilerOptions": {
  ...
  "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
}

react 樣式模塊化

樣式模塊化的方法有很多這里記錄一下module.css的方法

• 首先需要將樣式文件后綴修改為 .module.css 我項(xiàng)目中使用的是scss因此樣式文件命名為xxx.module.scss
• 在組件中引入相應(yīng)的樣式文件

import styles from './comp1.module.scss' // 此時(shí)的樣式文件好像js中的對象
function Comp1() {
  return (
    <div className={styles.box}>
      <p>我是comp1組件</p>
    </div>
  )
}

export default Comp1

配置vite-plugin-style-import按需引入樣式

npm i vite-plugin-style-import@1.4.1

在vite.config.ts中的配置

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import * as path from 'path'
import styleImport, { AntdResolve } from 'vite-plugin-style-import'
export default defineConfig({
  plugins: [
    react(),
    styleImport({
      resolves:[
        AntdResolve()
      ]
    })
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, './src')
    }
  }
})

因?yàn)閍ntd默認(rèn)引入的是less文件兜叨，因此還需要安裝一下less

npm i less@2.7.1

React 中的路由

react18走之前的寫法

// src\router\index.tsx
import App  from "@/App";
import Home from "@/views/Home";
import About from "@/views/About";
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";

// 兩種路由模式的組件： BrowserRouter{History 模式} 穿扳、HashRouter{hash模式}
const baseRouter = () => (
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App/>}>
         {/*Navigate 重定向  */}
        <Route path="/" element={<Navigate to="/home"/>}></Route>
        <Route path="/home" element={<Home/>}></Route>
        <Route path="/about" element={<About/>}></Route>
      </Route>
    </Routes>
  </BrowserRouter>
)

export default baseRouter

// src\main.tsx
import Router from './router'
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <Router />
  </React.StrictMode>,
)

// src\App.tsx
import { Outlet, Link } from 'react-router-dom'
// Outlet 是占位符類似于vue的router-view
function App() {
  return (
    <div className="App">
      {/* Link 類似于vue的route-link */}
      <Link to="/home">Home</Link>|
      <Link to="/about">About</Link>
      <Outlet></Outlet>
    </div>
  )
}

export default App

React18 路由新寫法

路由新寫法支持路由對象的形式編寫路由

// src\router\index.tsx
import Home from "@/views/Home";
import About from "@/views/About";
import { Navigate } from 'react-router-dom'
// Navigate 路由重定向
const routes = [
  {
    path: '/',
    element: <Navigate to="/home"/>
  },
  {
    path: '/home',
    element: <Home />
  },
  {
    path: '/about',
    element: <About />
  }
]

export default routes

// src\main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import 'reset-css'
import App from './App'
import { BrowserRouter } from 'react-router-dom'
import '@/assets/style/global.scss'
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <BrowserRouter>
      <App/>
    </BrowserRouter>
  </React.StrictMode>,
)

// src\App.tsx
import { useRoutes, Link } from 'react-router-dom'
import routes from './router'
function App() {
  const outlet = useRoutes(routes) // hook 形式的頁面占位符
  return (
    <div className="App">
      {/* Link 類似于vue的route-link */}
      <Link to="/home">Home</Link>|
      <Link to="/about">About</Link>
      { outlet }
    </div>
  )
}

export default App

路由懶加載

路由懶加載需要借助react的lazy 方法并且需要搭配react的Suspense組件

import React, { lazy } from 'react'
import { Navigate } from 'react-router-dom'
// 因?yàn)镠ome組件首頁需要顯示因此無需懶加載
import Home from "@/views/Home";
// 組件懶加載
const About = lazy(() => import("@/views/About"))
// 懶加載的組件需要用Suspense包裹
const withLoadingComponent = (comp:JSX.Element) => (
  <React.Suspense fallback={<div>Loading...</div>}>
    { comp }
  </React.Suspense>
)
const routes = [
  {
    path: '/',
    element: <Navigate to="/home"/>
  },
  {
    path: '/home',
    element: <Home />
  },
  {
    path: '/about',
    element: withLoadingComponent(<About />)
  }
]

export default routes