React项目搭建流程

创建react项目

工具：React脚手架

create-react-app
同时配置TypeScript的支持
create-react-app 项目名称 --template typescript

基本配置

配置项目的icon

配置项目的标题

配置项目的别名

需要下载craco,同时还需要注意版本问题
npm i @craco/craco@alpha -D
创建craco.config.js文件

同时还需注意在tsconfig.json文件中的配置

配置tsconfig.json

对项目结构进行划分

对默认css样式进行重置

normalize.css

npm i normalize.css

reset.less

在react中使用less
npm i craco-less@2.1.0-alpha.0

在craco.config.js中的配置为

路由的配置

安装路由

npm i react-router-dom

创建index.tsx文件

import React,{lazy} from 'react'
import {Navigate,RouteObject} from 'react-router-dom'
//路由的懒加载
const Discover = lazy(()=>import('@/views/discover'))
const Album = lazy(() => import('@/views/discover/c-views/album'))
const Recommend = lazy(() => import('@/views/discover/c-views/recommend'))
const routes:RouteObject[] = [
{
  path:'/',
  element:<Navigate to="/discover"/>
},
  {
    path: '/discover',
    element: <Discover />,
    children: [
      {
        path: '/discover',
        element: <Navigate to="/discover/recommend" />
      },
      {
        path: '/discover/album',
        element: <Album />
      }
    ]
  },
]
export default routes

在组件中使用路由

        <Link to="/discover">发现音乐</Link>
        <Link to="/mine">我的音乐</Link>
        <Link to="focus">关注</Link>
        <Link to="download">下载客户端</Link>

使用useRoutes这个hook

        <Suspense fallback="">
          <div className="main">{useRoutes(routes)}</div>
        </Suspense>

在index.tsx中

import { HashRouter } from 'react-router-dom'
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
    <HashRouter>
      <App />
    </HashRouter>
)

redux的配置

安装

我们以使用toolkit工具为例
npm i @reduxjs/toolkit react-redux

创建store/index.ts文件

import {configureStore} from '@reduxjs/toolkit'

const store = configureStore({
  reducer:{}
})

export default store

在index.tsx中使用store

  <Provider store={store}>
   <HashRouter>
    <App/>
   </HashRouter>
   </Provider>

创建modules文件夹 以创建一个counter.ts文件为例

import {createSlice} from '@reduxjs/toolkit'
const counterSlice = createSlice({
  name:'counter',
  initialState:{
   count:0
   },
   reducers:{}
})
export default counterSlice.reducer

然后我们可以试着在App.tsx中获取一下counter中的数据

import {useSelector,shallowEqual} from 'react-redux'
//定义state的类型
type GetStateFnType = typeof store.getState
type IRootState = ReturnType<GetStateFnType>
fuction App(){
const {count} = useSelector(
(state:IRootState)=>({
  count:state.counter.count
}),
shallowEqual
)
...
}

但是我们可以进一步优化一下代码，将定义state的类型代码写入store中，同时我们可以创建一个useAppSelector这样的hook函数，这样我们使用它代替useSelector，其中的state类型就会自行推断了。

import { useSelector, TypedUseSelectorHook } from 'react-redux'
...
type GetStateFnType = typeof store.getState
type IRootState = ReturnType<GetStateFnType>
//useAppSelector的hook
export const useAppSelector:TypeUseSelectorHook<IRootState>=useSelector
...

这样在App.tsx文件中我们只需要将useSelector函数换成useAppSelector函数即可

import { shallowEqual } from 'react-redux'
import { useAppSelector } from './store'
...
function App() {
  const { count, message } = useAppSelector(
    (state) => ({
      count: state.counter.count,
      message: state.counter.message
    }),
    shallowEqual
  )
  ...
}