手把手教你从零开始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 相关文章推荐
Javascript代码混淆综合解决方案-Javascript在线混淆器
Dec 18 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
Jquery 获取对象的几种方式介绍
Jan 17 Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 Javascript
AngularJS基础 ng-cloak 指令简单示例
Aug 01 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
Dec 08 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
Dec 20 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
vue axios请求超时的正确处理方法
Apr 02 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
Jul 10 Javascript
解决ele ui 表格表头太长问题的实现
Nov 13 Javascript
react antd实现动态增减表单
react 项目中引入图片的几种方式
Jun 02 #Javascript
小程序wx.getUserProfile接口的具体使用
js实现自动锁屏功能
Jun 02 #Javascript
如何将JavaScript将数组转为树形结构
Jun 02 #Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
使用react+redux实现计数器功能及遇到问题
You might like
3种平台下安装php4经验点滴
2006/10/09 PHP
jQuery 源码分析笔记
2011/05/25 PHP
深入解析php之apc
2013/05/15 PHP
PHP中feof()函数实例测试
2014/08/23 PHP
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
Javascript:为input设置readOnly属性(示例讲解)
2013/12/25 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
2018/07/26 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
Python中的map、reduce和filter浅析
2014/04/26 Python
Python KMeans聚类问题分析
2018/02/23 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
英国玛莎百货新西兰:Marks & Spencer New Zealand
2019/07/21 全球购物
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
2014年自我评价
2014/01/04 职场文书
《雨霖铃》教学反思
2014/02/22 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
催款通知书范文
2015/04/17 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
白银帝国观后感
2015/06/17 职场文书
五年级作文之想象作文
2019/10/30 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android