react入门篇

---

前言

提示：这里可以添加本文要记录的大概内容：

从 vue2到vue3,从webpack到vite,也是时候进入的react的大家庭了，废话不多说，开整~~~

---

提示：本篇将实现下面几个目标

一、目标

• 接入ArcoDesign
• 路由模块化
• 接入状态管理：zustand
• 接入axios
• 实现路由守卫

二、项目环境

react：v18.2.0
react-router-dom: v6.8.1
arco-design: v2.45.0
zustand: v4.3.3 【为什么不选redux? 哎 就是玩🤪🤪🤪】

三、实现过程（干货满满💥💥💥）

1.创建react项目

yarn create vite react_vite --template react
cd react_vite
yarn install

为了后续使用方便，可以设置alias，具体配置大家可参考vite官网配置

# vite.config.js
import path from 'path'
export default defineConfig({plugins: [react()],resolve: {alias: {'@': path.resolve(__dirname, './src'),'@layouts': path.resolve(__dirname, './src/layouts'),'@assets': path.resolve(__dirname, './src/assets'),'@pages': path.resolve(__dirname, './src/pages'),'@utils': path.resolve(__dirname, './src/utils'),'@stores': path.resolve(__dirname, './src/stores'),'@routers': path.resolve(__dirname, './src/routers'),'@apis': path.resolve(__dirname, './src/apis')}},
})

2.arco design UI库

yarn add @arco-design/web-react

arco design 组件默认支持 tree-shaking, 所以仅需全局注册一下Arco的样式即可, 然后就可以愉快的在页面中使用arco的组件了😃😃😃

---

# main.jsx...import '@arco-design/web-react/dist/css/arco.css'import { ConfigProvider } from '@arco-design/web-react'import enUS from '@arco-design/web-react/es/locale/en-US'...ReactDOM.createRoot(document.getElementById('root')).render(<React.StrictMode><ConfigProvider locale={enUS}><App /></ConfigProvider></React.StrictMode>
)

3.路由模块化

vue的路由组件不得不承认🐂🍺，替我们这些懒人带来了极大的便利. 习惯了vue-router,再使用react-router-dom感觉哪哪都别扭

# 安装react-router-domyarn add react-router-dom

# main.jsx...import { RouterProvider } from 'react-router-dom'import routes from '@routers/index'ReactDOM.createRoot(document.getElementById('root')).render(<React.StrictMode><ConfigProvider locale={enUS}><RouterProvider router={routes} /></ConfigProvider></React.StrictMode>
)...

新建router.jsx文件，用于统一管理路由，类似于vue的router.js。注意在布局文件layout中加入 标签， 类似于vue-router中的 ,有关react-router更详细的信息可参考 react-router官网

# routers/index.jsx
import { createBrowserRouter } from 'react-router-dom'
import Root from '@layouts/root'
import NotFound from '@/NotFound'
import App from '@pages/home/App'
import About from '@pages/about/About'const routes = createBrowserRouter([{path: '/',element: <Root />,children: [{index: true,element: <App />,meta: {title: '首页'}},{path: 'about',element: <About />,meta: {title: 'about'}}]},{path: '*',element: <NotFound />}
])
export default routes

4. 状态管理zustand

# 安装zustand
yarn add zustand

状态集中管理

# store/demo.jsximport { create } from 'zustand'export const useDemoStore = create((set) => ({bears: 0,addBears: () => set((state) => ({ bears: state.bears + 1 })),removeBears: () => set((state) => ({ bears: state.bears === 0 ? 0 : state.bears - 1 }))
}))

组件中使用

const bears = useDemoStore(state => state.bears)
const { addBears, removeBears } = useDemoStore()

5. axios

这个不在赘述，和大家平常使用的都一致，没什么好讲的

6. 路由守卫

未完，后续补充