搭建react项目简易框架

alwaysmove / 2025-02-21 / 原文

在公司实习的时候前端技术用的是react，但是我之前并没有系统的学习过这门技术，公司又有封装好的框架，所以心血来潮自己弄

个框架以便以后些项目用的到。

安装并创建项目

npm install -g create-react-app
create-react-app projectname

　　创建完项目以后使用react官方推荐的组件库（详细使用可以参考官网：在 create-react-app 中使用 - Ant Design，这里我用到的导航菜单组件）

 npm install antd --save

　　再App.js中放入显示的容器，为了方便，我将App.js当作根组件使用了

import "./App.css";
import { Layout, Menu } from "antd";
import React from "react";
import { Link, Outlet, Navigate } from "react-router-dom";
import { AppstoreOutlined } from "@ant-design/icons";
const { Header, Sider, Content } = Layout;
function App() {
  const items = [
    {
      key: "sub1",
      label: "Navigation Two",
      icon: <AppstoreOutlined />,
      children: [
        {
          key: "3",
          label: <Link to={"/home"}>Home</Link>,
        },
        {
          key: "4",
          label: <Link to={"/about"}>About</Link>,
        },
      ],
    },
  ];
  return (
    <Layout style={{ height: "100%", width: "100%" }}>
      <Header>Header</Header>
      <Layout>
        <Sider style={{ overflow: "auto" }}>
          <Menu
            theme="dark"
            defaultSelectedKeys={["1"]}
            defaultOpenKeys={["sub1"]}
            mode="inline"
            items={items}
          />
        </Sider>
        <Content>
          <Outlet></Outlet>
          <Navigate to="/home" replace={true} />
        </Content>
      </Layout>
    </Layout>
  );
}
 
export default App;

配置路由表

安装路由依赖

 npm i react-router-dom

　　然后在文件目录下新建route文件夹

1、在路由文件index.js下引入Reater Router中的两个组件createBrowserRouter和RouterProvider（其中，createBrowserRouter函数是

用于创建一个浏览器路由器对象，用来配置应用中的路由；RouterProvider则是一个组件，它主要是将创建的路由器对象提供个整个应用）

2、使用createBrowserRouter创建router实例对象并且配置路由对应关系

//router中使用createBrowserRouter创建浏览器路由对象router，配置好各页面路径
import { createBrowserRouter } from "react-router-dom";
import Home from "../home/home";
import About from "../about/about";
import App from "../../App";
const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    redirect: "/home",
    children: [
      {
        path: "/home",
        element: <Home />,
      },
      {
        path: "/about",
        element: <About />,
      },
    ],
  },
]);
export default router;

　　配置好路由表后在index.js中引入路由并使用RouterProvider注册路由，绑定路由router实例

这样路由就配置好了，如果你想做管理系统这一类型的项目，就去要使用嵌套路由的方式以及一个路由占位符，这里就不赘述了，可参考博客：React-Router路由基础篇（简单易学）-CSDN博客

配置持久化管理仓库（参考：React中的Redux状态管理使用_reac页面使用redux的state-CSDN博客）

npm i react-redux
npm i @reduxjs/toolkit

通常集中状态管理的部分都会单独创建一个'store'目录，而应用通常会有很多个子模块，所以创建一个'modules'目录，在内部编写业务分类的子store，store入口文件index.js的作用是组合modules中所有的子模块，并导出store;

在counter.js中：initialState是初始状态的数据，reducer是修改数据的方法，解构是为了生成action对象进而对数据进行修改

import { createSlice } from '@reduxjs/toolkit'
const counter = createSlice({
    name: 'counter',
    //初始状态数据
    initialState: {
        count: 0
    },
    //修改状态的方法，支持直接修改
    reducers: {
        inscrement (state) {
            state.count++
        },
        decrement (state) {
            state.count--
        }
    }
})
//解构出来actionCreater函数
const { inscrement, decrement } = counter.actions
//获取reducer
const reducer = counter.reducer
//以按需导出的方式导出actionCreater
export { inscrement, decrement }
//以默认导出的方式导出reducer
export default reducer

　　在store/index.js:

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './modules/counter.js'
//创建根store组合子模块
const store = configureStore({
    reducer: {
        counter: counterReducer
    }
})
export default store

　　再全局注入，scr/index.js:

在React组件中使用store的数据，需要用到一个钩子函数 useSelector，它的作用是把store中的数据映射到组件中

state.counter中的counter来自于组件中的name；接下来即可使用count拿到值。

如果需要修改store中的数据，需要用到另外一个hook函数-useDispatch，它的作用是生存提交action对象的dispatch函数，样例如下：

import React from "react";
import { useSelector, useDispatch } from "react-redux";
 
import { inscrement, decrement } from "../store/modules/counter";
 
export default function Home() {
  const { count } = useSelector((state) => state.counter);
  const dispatch = useDispatch();
  return (
    <div className="App">
      <button onClick={() => dispatch(decrement())}>-</button>
      {count}
      <button onClick={() => dispatch(inscrement())}>+</button>
    </div>
  );
}

　　路由和仓库都配好了其他的，用到的话再去搜

转自：搭建react项目简易框架_react框架-CSDN博客