[初探] React+Vite4创建项目模板（react vigil）
最近一直在学习react结合vite构建项目模板。
目前react稳定版本为18.2.0。官方推荐了好几种创建react项目方法，都试了一下，构建速度慢，而且还有一些异常警告信息。
于是想到了比较热门的vite构建工具，vite不仅仅可以构建vue3项目，还能构建react、svelte等其它前端项目。
# 使用vite构建工具创建项目
yarn create vite vite-react
# 选择react模板
# 进入项目文件夹
cd vite-react
# 安装依赖
yarn
# 运行
yarn devreact路由使用的是react-router-dom，目前已经升级到了v6。
https://reactrouter.com/en/main经过一番对比之后，react状态管理选择了Zustand。用法一些类似Vue3状态管理工具Pinia。
https://docs.pmnd.rs/zustand/getting-started/introduction另外Zustand还内置了persist本地持久化存储功能。
import { create } from 'zustand'
import { persist, createJSONStorage } from 'zustand/middleware'
export const useAuthStore = create(
persist(
(set, get) => ({
isLogged: false,
token: null,
setUserInfo: (data) => set({isLogged: data.isLogged, token: data.token})
}),
{
name: 'authStore',
// name: 'food-storage', // name of the item in the storage (must be unique)
// storage: createJSONStorage(() => sessionStorage), // (optional) by default, 'localStorage' is used
}
)
)package.json
{
"name": "vite-react",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.14.2",
"zustand": "^4.3.9"
},
"devDependencies": {
"@types/react": "^18.2.14",
"@types/react-dom": "^18.2.6",
"@vitejs/plugin-react": "^4.0.1",
"eslint": "^8.44.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.1",
"vite": "^4.4.0"
}
}
这次学习主要是想了解以下知识点。
- 学习React Hook相关 Api
- 掌握Vite4插件机制、构建配置
- 学习 Ract-router-dom v6新特性
好了，今天的分享就到这里吧。