⼿把⼿教你从零开始react+antd搭建项⽬
之前的⽂章都是⾃⼰的学习⽇志，主要是防⽌⾃⼰遗忘之前遇到的坑。这次将从最基础的项⽬搭建开始讲起，做⼀个基于react和antd的后台管理系统。我会⼀步步进⾏下去，所以看完本⽂你哪怕不了解react，应该也会使⽤react做⼀个简单的项⽬。话不多少，直接开始。完整项⽬请前往查看，体验请。如果觉得可以请给⼀颗star，谢谢各位。
1、开发环境：
node.js -v 12.16.3
create-react-app -v 3.4.1
antd -v 4.3.3
项⽬开始前请⾃⾏全局安装create-react-app，macos请在指令前加上sudo不然会有报错说没有权限访问硬盘。
npm install -g create-react-app
2、项⽬构建：
初始化项⽬直接使⽤脚⼿架⼯具create-react-app的指令，本⽂接下来使⽤的是tsx。如需jsx版本，请跳过模板设置。这⾥简单介绍⼀下jsx，jsx是javascript的语法糖。他是react打造的，react为了做到多平台⾃⼰在js的基础上封装了⼀些合成事件。例如react中的onClick事件其实和原⽣js的click事件是不太⼀样的。
jsx版本的指令为：
npx create-react-app project-name
tsx版本如下：
等待安装完成后，项⽬的初始化⼯作已经完成了。
现在进⼊项⽬⽬录：cd react-admin（这⾥替换为你的项⽬名称），执⾏指令进⼊开发模式吧。
npm start
接下来我们进⼊正题，由于react默认没有router功能，所以需要安装react-router、react-router-dom。
如果需要状态管理的同学可以安装redux、react-redux、redux-actions。
需要按需加载的同学可以安装@loadable/component，注意ts版本可能会报错，创建⼀个loadable.d.ts的⽂件⾥⾯写上以下代码即可解决。
declare module '@loadable/component'
需要使⽤loadash的同学⾃⾏安装loadash。
接下来安装antd组建库。
npm i antd react-router react-router-dom redux react-redux redux-actions @types/redux-actions @types/react-router-dom @loadable/component axios loadash --save
create-react-app默认是使⽤sass的，如需使⽤less等其他css预处理器，请⾃⾏安装。
另外这⾥简单说个题外话。create-react-app默认使⽤的是react-scripts，是不能修改webpack配置的。如果需要修改webpack配置，有两种解决⽅案：
1、使⽤社区的第三⽅库⽐如等。
2、执⾏指令：npm run eject这样会在当前⽬录⽣成scripts和config⽂件夹。你可以修改webpack的配置。注意：该操作为永久性的，不可逆。
话归正题，安装完这些基础库以后。初始化你的项⽬⽬录，这⾥可以根据⾃⼰的喜好设置⽬录结构，我的⽬录结构如下：
接下来打开router⽬录写router.tsx的代码。这⾥只展⽰主要代码：
接下来就可以使⽤数组来完成route的配置了，例如：
import loadable from '@loadable/component';
import { RouteComponentProps } from 'react-router';
const Index = loadable(() => import('../pages/index'));
const Login = loadable(() => import('../pages/login'));
export interface RouteConfigProps {
path: string,
exact: boolean,
component: React.ComponentType<RouteComponentProps<any>> | React.ComponentType<any>,  id: number,
name?: string,
routes?: Array<RouteConfigProps>
}
export const routeConfig: Array<RouteConfigProps> = [
{
path: '/login',
exact: true,
component: Login,
id: 1,
name: '登陆',
routes: []react router6
},
{
path: '/index',
exact: false,
component: Index,
id: 2,
name: '⾸页',
routes: []
}
]
接下来就去app.tsx⾥⾯引⼊路由配置吧，顺便把antd的⼀些配置也整理⼀下。
import React from 'react';
import { Provider } from 'react-redux'; // redux提供的provider。
import zhCN from 'antd/es/locale-provider/zh_CN'; // antd的中⽂包
import { HashRouter } from 'react-router-dom';
import { MyRouter } from './router'; // 刚才的router.tsx
import { ConfigProvider, message, notification } from 'antd';
import storeConfig from './store'; // redux的仓库
import moment  from 'moment'; // momentjs。
import 'moment/locale/zh-cn'; // 中⽂包moment.js
import 'antd/dist/antd.css'; // 引⼊antd的样式表
import './App.css'
moment.locale('zh-cn'); // 将moment.js设置为中⽂
const store = storeConfig(); // 初始化redux的store，如不需要状态管理器，redux相关可以忽略。
duration: 2,
maxCount: 2
});
placement: 'topRight', // antd的通知组件配置，placement弹出位置。bottom距离底部的距离，during持续时间单位为秒
bottom: 50,
duration: 2,
});
function App() {
return (
<Provider store={store}>
<ConfigProvider locale={zhCN}>
<HashRouter>
<MyRouter />
</HashRouter>
</ConfigProvider>
</Provider>
);
}
export default App;
这样就⼤功告成了，接下来就是编写⾃⼰需要的组件了。
到此这篇关于⼿把⼿教你从零开始react+antd搭建项⽬的⽂章就介绍到这了，更多相关react+antd搭建项⽬内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！