使用React脚手架构建强大且可扩展的应用程序

2023-12-14 16:56:49

简介

React脚手架是一个用于快速创建React应用程序的工具，它可以帮助您轻松搭建项目结构、安装依赖项并配置各种工具。在本指南中，我们将使用React脚手架创建一个包含TypeScript、Ant Design、LESS、ESLint和Prettier的React应用程序。

前提条件

在开始之前，请确保您已安装了以下软件：

Node.js LTS
npm或yarn

创建项目

首先，创建一个新的React项目：

npx create-react-app my-app --template @typescript/minimal

这个命令将使用TypeScript的最小模板创建一个新的React应用程序。

安装依赖项

接下来，安装必要的依赖项：

cd my-app
npm install antd less less-loader eslint eslint-plugin-react eslint-plugin-prettier eslint-config-prettier eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y @typescript-eslint/eslint-plugin @typescript-eslint/parser babel-eslint eslint-config-airbnb-typescriptprettier --save-dev

配置代理服务器

为了使本地开发环境能够访问后端API，我们需要配置代理服务器。在package.json文件中，找到proxy属性，并将其设置为如下内容：

"proxy": "http://localhost:3000"

这将把对/api/*的所有请求代理到http://localhost:3000。

创建项目结构

React脚手架会自动创建一个基本的项目结构，但我们可以进一步优化它以适应我们的需求。

在src文件夹中，创建一个components文件夹，用于存放组件。
在src文件夹中，创建一个styles文件夹，用于存放LESS样式表。

安装config-overrides.js

为了自定义webpack配置，我们需要安装config-overrides.js。在命令行中运行以下命令：

npm install @react-app-rewired --save-dev

然后，在config文件夹中创建一个webpack.config.overrides.js文件，并将以下代码添加到其中：

const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
  }),
);