#头条创作挑战赛#

最近一直在学习react结合vite构建项目模板。

目前react稳定版本为18.2.0。官方推荐了好几种创建react项目方法，都试了一下，构建速度慢，而且还有一些异常警告信息。

于是想到了比较热门的vite构建工具，vite不仅仅可以构建vue3项目，还能构建react、svelte等其它前端项目。

# 使用vite构建工具创建项目
yarn create vite vite-react

# 选择react模板

# 进入项目文件夹
cd vite-react

# 安装依赖
yarn

# 运行
yarn dev

react路由使用的是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新特性

好了，今天的分享就到这里吧。