手把手教你从零开始react+antd搭建项目


Posted in Javascript onJune 03, 2021

之前的文章都是自己的学习日志,主要是防止自己遗忘之前遇到的坑。这次将从最基础的项目搭建开始讲起,做一个基于react和antd的后台管理系统。我会一步步进行下去,所以看完本文你哪怕不了解react,应该也会使用react做一个简单的项目。话不多少,直接开始。完整项目请前往GitHub查看,体验请点击这里。如果觉得可以请给一颗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版本如下:

手把手教你从零开始react+antd搭建项目

等待安装完成后,项目的初始化工作已经完成了。

现在进入项目目录:cd react-admin(这里替换为你的项目名称),执行指令进入开发模式吧。

npm start

手把手教你从零开始react+antd搭建项目

接下来我们进入正题,由于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、使用社区的第三方库比如react-app-rewired等。

2、执行指令:npm run eject这样会在当前目录生成scripts和config文件夹。你可以修改webpack的配置。注意:该操作为永久性的,不可逆。

话归正题,安装完这些基础库以后。初始化你的项目目录,这里可以根据自己的喜好设置目录结构,我的目录结构如下:

手把手教你从零开始react+antd搭建项目

接下来打开router目录写router.tsx的代码。这里只展示主要代码:

手把手教你从零开始react+antd搭建项目

接下来就可以使用数组来完成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: []
  },
  {
    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相关可以忽略。

message.config({ // antd的message组件配置,during持续时间单位为秒,maxcount最多显示个数
  duration: 2,
  maxCount: 2
});
notification.config({
  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搭建项目内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery与js函数冲突的两种解决方法
Sep 09 Javascript
jquery操作select详解(取值,设置选中)
Feb 07 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
AngularJS constant和value区别详解
Feb 28 Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
VUE安装使用教程详解
Jun 03 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
Oct 12 Javascript
Vue项目利用axios请求接口下载excel
Nov 17 Vue.js
如何管理Vue中的缓存页面
Feb 06 Vue.js
react antd实现动态增减表单
react 项目中引入图片的几种方式
Jun 02 #Javascript
小程序wx.getUserProfile接口的具体使用
js实现自动锁屏功能
Jun 02 #Javascript
如何将JavaScript将数组转为树形结构
Jun 02 #Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
使用react+redux实现计数器功能及遇到问题
You might like
PHP也可以?成Shell Script
2006/10/09 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
页面装载js及性能分析方法介绍
2014/03/21 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
Bootstrap精简教程
2015/11/27 Javascript
Web开发必知Javascript技巧大全
2016/02/23 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
js原生实现FastClick事件的实例
2016/11/20 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
js验证手机号、密码、短信验证码代码工具类
2020/06/24 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
对vue下点击事件传参和不传参的区别详解
2018/09/15 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
使用python编写脚本获取手机当前应用apk的信息
2014/07/21 Python
django自定义模板标签过程解析
2019/12/14 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
python 下划线的不同用法
2020/10/24 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
Linux文件操作命令都有哪些
2015/02/27 面试题
小学校园文化建设汇报材料
2014/08/19 职场文书
商场周年庆活动方案
2014/08/19 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
公积金接收函格式
2015/01/30 职场文书
离开雷锋的日子观后感
2015/06/09 职场文书
为什么node.js不适合大型项目
2021/04/28 Javascript
图神经网络GNN算法
2022/05/11 Python