react 项目搭建前言目前公司一直使用的框架是 vue3+ts，对于我这种没实操过的 react 的孩子来说着实有些

前言

目前公司一直使用的框架是 vue3+ts，对于我这种没实操过的 react 的孩子来说着实有些难受。
我决定新项目用 react 来开发，特此踩坑之旅正式开始~~~

创建react项目

my-app 是项目名字，如果不使用ts后面这句可以不要 --template typescript

npx create-react-app my-app --template typescript

路由配置（懒加载）

需要安装依赖 yarn add react-router-dom

import { lazy, Suspense } from "react";
import { Routes, Route, BrowserRouter } from "react-router-dom";
import "./App.css";

const Home = lazy(() => import("/@/views/home"));
const Main = lazy(() => import("/@/views/main"));

function App() {
  return (
    <BrowserRouter>
      <Suspense>
        <Routes>
          <Route path="/home" element={<Home />}></Route>
          <Route path="/main" element={<Main />}></Route>
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

export default App;

store 状态管理

生态圈关于react状态管理库还是比较多的，这里就介绍一个比较经典的redux。

一、安装相关依赖

yarn add @reduxjs/toolkit react-redux

二、配置store文件

创建store文件,如下图在 user.js 里面加入

import { createSlice } from "@reduxjs/toolkit";

export const counterSlice = createSlice({
  name: "counter",
  initialState: {
    value: 0,
  },
  reducers: {
    setValue: (state, action) => {
      state.value += action.payload;
    },
  },
});

// 每个 case reducer 函数会生成对应的 Action creators
export const { setValue } = counterSlice.actions;

export default counterSlice.reducer;

三、app传递store

找到src目录下的 index.tsx 文件，添加 store

import { Provider } from "react-redux";
import store from "/@/store";

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

四、使用

import { Button } from "antd";
import styles from "./index.module.scss";
import { useSelector, useDispatch } from "react-redux";
import { setValue } from "/@/store/modules/user";

const Home = () => {
  const count = useSelector((state: any) => state.user.value);
  const dispatch = useDispatch();

  return (
    <div className={styles.home}>
      {count}
      <Button type="primary" onClick={() => dispatch(setValue(3))}>
        Primary Button
      </Button>
    </div>
  );
};

export default Home;

样式隔离

官方脚手架是提供了 module 来隔离样式的，如果需要使用css预处理器，就需要安装相关依赖，脚手架默认是配置的 sass, 这里我们只需要安装 sass 就可以了。

// js
import styles from "./index.module.scss";

export default function Main() {
  return (
    <div className={styles.main}>红色背景</div>
  );
}

// css
.main {
  background-color: red;
}

代理配置

在 src 目录下，新建文件 setupProxy.js，别写错了。

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    createProxyMiddleware("/ams-api", {
      target: "http://ams-webserver-test.cloud-dev.geega.com",
      changeOrigin: true, //控制服务器接收到的请求头中host字段的值
      pathRewrite: { "^/ams-api": "" }, //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
    })
  );
};

env文件，环境变量

目前官方提供的环境变量还是比较少的，对于某些情况来说远远不够。

一、安装依赖 `yarn add -D dotenv-cli`

二、根目录下创建文件

企业微信20230725-101011@2x.png

三、配置命令

找到 package.json 文件，在 scripts 下添加以下命令。

"build:test": "dotenv -e .env.test yarn build",
"build:demo": "dotenv -e .env.demo yarn build",
"build:prod": "dotenv -e .env.prod yarn build"

结语

目前更新的功能还不够完善，后续会持续更新...

react 项目搭建

前言