从零搭建React+TypeScript的后台项目(一)

react

这段特殊时期,在家闲暇时间比较多,就系统学习了React+Ts的语法逻辑,以及如何从零搭建一个简易的后台管理项目。技术栈包括React、React-router-dom、Redux、Axios、TypeScript、Ant Design。刚好公司项目重构也是基于React+ts开发的。话不多说,直接开撸。

一、create-react-app构建TypeScript项目

yarn create react-app react-admin-demos --template typescript

然后我们进入项目并启动

cd react-admin-demos/

yarn start

项目启动成功,浏览器会默认打开http://localhost:3000/,看到官方实例就算成功了。

二、引入antd并修改配置

下面我们引入相应的UI框架

yarn add antd

安装成功后,我们可以在项目中使用antd中组件,但是目前项目中引入了全部组件的样式,需要做按需加载。

按需加载

这里我们使用create-app-rewired对create-react-app 进行自定义配置,同时还需要安装customize-cra:

yarn add react-app-rewired customize-cra

修改package.json文件配置:

"scripts": {

- "start": "react-scripts start",

+ "start": "react-app-rewired start",

- "build": "react-scripts build",

+ "build": "react-app-rewired build",

- "test": "react-scripts test",

+ "test": "react-app-rewired test",

}

然后再安装babel-plugin-import,是一个按需加载组件和代码样式的babel插件。

yarn add babel-plugin-import

安装成功后,在根目录下新建config-overrides.js 用于修改默认配置。

const { 

override,

fixBabelImports,

} = require('customize-cra');

// 使用ant-design搭建React+ts项目,可在此重重定义antd全局样式

const overConfig = override(

fixBabelImports('import', {

libraryName: 'antd',

libraryDirectory: 'es',

style: 'css',

})

);

module.exports = function (config, env) {

return overConfig(config, env)

}

现在antd的组件的js和css代码都会在项目中按需加载。

自定义主题

自定义主题需要用到 less 变量覆盖功能。我们可以引入 customize-cra 中提供的 less 相关的函数 addLessLoader 来帮助加载 less 样式,同时修改 config-overrides.js 文件如下。

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

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

const overConfig = override(

fixBabelImports('import', {

libraryName: 'antd',

libraryDirectory: 'es',

- style: 'css',

+ style: true,

}),

+ addLessLoader({

+ javascriptEnabled: true,

+ modifyVars: { '@primary-color': '#009688' },

+ }),

);

根据报错安装less相关模块,然后启动项目,发现antd中组件的配色方案变成我们设置的颜色。

三、配置env环境及接口代理

一般项目在开发过程中,本地环境、测试环境、线上环境启动和打包的域名不同,线上也要关掉本地调试logger日志。这就需要我们配置环境变量,自动化控制打包启动命令。在根目录下新建如下三个文件,可自定义变量然后在项目中使用:

HOST=0.0.0.0

PORT=8888

REACT_APP_MODE=development

这里我们在.env.development中自定义启动端口,声明REACT_APP_MODE变量指定运行环境,作为逻辑判断。

接口代理

在React中我们使用http-proxy-middleware来解决接口代理的问题

yarn add http-proxy-middleware

然后在src下新建setupProxy.js文件,注意这里不能是ts文件,否则无法识别:

const proxy = require('http-proxy-middleware');

module.exports = function (app) {

app.use(proxy('/public', {

target:yourHost,

secure: false,

changeOrigin: true,

pathRewrite: {

"^/public": "/"

}

}))

}

配置成功后,前端发送的请求就会被代理到文件中配置的host域名下。

到现在为止,一个React+Ts+Ant Design+proxy的简易框架就搭建完毕,下面的章节会讲解如何将Route、Redux状态管理以及Ts语法的常规写法集成到项目中!

官方文档地址:在TypeScript中使用Ant Design

这是一个系列文章:

从零搭建React+TypeScript的后台项目(一)--构建基础React+TypeScript项目

从零搭建React+TypeScript的后台项目(二)--后台router实现方案

从零搭建React+TypeScript的后台项目(三)--Redux基本配置

以上是 从零搭建React+TypeScript的后台项目(一) 的全部内容, 来源链接: utcz.com/z/382934.html

回到顶部