使用 React、Umi 和 dva.js 搭建和启动项目

本文将介绍如何使用 React、Umi 和 dva.js 框架来搭建和启动一个基本的前端项目，并演示如何调用接口 API。

## 引言 随着前端技术的日新月异，React和Umi作为前端领域中的佼佼者，它们的结合为我们提供了一种构建高效Web应用的新思路。React作为Facebook开发的一款JavaScript库，用于构建用户界面，具有声明式、组件化、高效等特点；而Umi则是一款可扩展的企业级前端应用框架，它基于React，提供了路由、构建、部署等一系列开发体验的优化。

目录结构

在使用 Umi 和 dva.js 搭建项目时，通常会遵循以下目录结构：

- src/
  - models/        # 存放 dva.js 的模型文件
  - services/      # 存放接口 API 的服务文件
  - pages/         # 存放页面组件
  - layouts/       # 存放布局组件
  - components/    # 存放通用组件
  - utils/         # 存放工具函数
  - app.ts         # Umi 应用程序配置文件
  - global.less    # 全局样式文件

步骤 1：安装 Node.js 和 npm

首先，确保你的计算机上已经安装了 Node.js 和 npm。你可以从官方网站（nodejs.org）下载并安装最新版本的 Node.js。

步骤 2：创建新项目

打开终端或命令提示符，并进入你想要创建项目的目录。

运行以下命令来创建一个新的 Umi 项目：

$ npx create-umi@latest init

按照提示选择你想要的项目配置，例如选择 TypeScript、Ant Design 等。

步骤 3：安装依赖

进入新创建的项目目录，并运行以下命令来安装项目的依赖：

$ npm install

这将安装项目所需的所有依赖项。

步骤 4：编写代码

在项目目录中，你可以开始编写你的 React 组件和页面。

在 src/models 目录下创建 dva.js 的模型文件，例如 src/models/user.ts：

import { Effect, Reducer } from 'umi';
import { getUserInfo } from '@/services/user';
export interface UserModelState {
  name: string;
  age: number;
}
export interface UserModelType {
  namespace: 'user';
  state: UserModelState;
  effects: {
    fetchUserInfo: Effect;
  };
  reducers: {
    saveUserInfo: Reducer<UserModelState>;
  };
}
const UserModel: UserModelType = {
  namespace: 'user',
  state: {
    name: '',
    age: 0,
  },
  effects: {
    *fetchUserInfo(_, { call, put }) {
      const response = yield call(getUserInfo);
      yield put({
        type: 'saveUserInfo',
        payload: response,
      });
    },
  },
  reducers: {
    saveUserInfo(state, action) {
      return {
        ...state,
        ...action.payload,
      };
    },
  },
};

export default UserModel;

在 src/services 目录下创建接口 API 的服务文件，例如 src/services/user.ts：

import request from '@/utils/request';
export async function getUserInfo() {
return request('/api/user');
}

在 src/pages 目录下创建页面文件，例如 src/pages/index.tsx：

import React, { useEffect } from 'react';
import { connect, Dispatch } from 'umi';
import { UserModelState } from '@/models/user';

interface HomePageProps {
  user: UserModelState;
  dispatch: Dispatch;
}

const HomePage: React.FC<HomePageProps> = ({ user, dispatch }) => {
  useEffect(() => {
    dispatch({
      type: 'user/fetchUserInfo',
    });
  }, [dispatch]);

  return (
    <div>
      <h1>Welcome to My App!</h1>
      <p>This is the home page.</p>
      <p>User Name: {user.name}</p>
      <p>User Age: {user.age}</p>
    </div>
  );
};

export default connect(({ user }: { user: UserModelState }) => ({ user }))(HomePage);

步骤 5：启动项目

在项目目录中，运行以下命令来启动项目：

$ npm start

这将启动开发服务器，并在浏览器中打开项目。

现在，你可以在浏览器中访问 http://localhost:8000，看到你的应用程序正在运行。

结论

恭喜！你已经成功使用 React、Umi 和 dva.js 搭建和启动了一个基本的前端项目，并演示了如何调用接口 API。

希望本文对你有所帮助，祝你在使用 React、Umi 和 dva.js 进行开发时取得成功！

以上就是使用 React、Umi 和 dva.js 搭建和启动项目的实操指南。祝你顺利进行项目开发！

请注意，这只是一个基本的示例，你可以根据实际需求进行更复杂的开发和配置。

```