零基础学习antd+ts+react-app-rewired+react-router+mobx的开发实操

2023-12-08 00:10:54

一、项目需求分析与技术选型

首先，我们需要明确项目需求，了解需要实现的功能和效果，在此基础上进行技术选型。我们希望项目能够实现数据可视化、数据报表、图表展示等功能，同时还要考虑到代码的可维护性和可扩展性。经过对比和评估，我们选择了antd、ts、react-app-rewired、react-router和mobx这五种技术。

二、搭建项目脚手架

接下来，我们需要搭建项目脚手架。这里，我们使用create-react-app工具来创建项目。create-react-app是一个官方提供的脚手架工具，能够快速创建一个新的React项目，并且内置了许多开箱即用的配置。

在终端中执行以下命令即可创建项目：

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

三、安装依赖包

在项目根目录下，执行以下命令安装所需依赖包：

npm install antd react-router-dom mobx mobx-react

四、配置项目

接下来，我们需要对项目进行一些配置。

配置tsconfig.json

在tsconfig.json文件中，我们需要添加以下配置：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react-jsx",
    "strict": true
  }
}

配置webpack

在webpack.config.js文件中，我们需要添加以下配置：

module.exports = {
  // ...
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx']
  },
  module: {
    rules: [
      // ...
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  }
};

配置react-app-rewired

在package.json文件中，我们需要添加以下配置：

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build"
  },
  "devDependencies": {
    "react-app-rewired": "^2.0.0"
  }
}

五、开发项目

现在，我们可以开始开发项目了。

创建组件

在src目录下，创建组件文件夹，并在其中创建组件文件。例如，我们可以创建一个名为MyComponent的组件，代码如下：

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      Hello, World!
    </div>
  );
};

export default MyComponent;

使用组件

在App.tsx文件中，我们可以使用MyComponent组件，代码如下：

import React from 'react';
import MyComponent from './components/MyComponent';

const App = () => {
  return (
    <div>
      <MyComponent />
    </div>
  );
};

export default App;