手把手教你从零开始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 相关文章推荐
js动态创建表格,删除行列的小例子
Jul 20 Javascript
Ext GridPanel加载完数据后进行操作示例代码
Jun 17 Javascript
jQuery中:image选择器用法实例
Jan 03 Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
Vue render深入开发讲解
Apr 13 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 Javascript
js数组去重的方法总结
Jan 18 Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 Javascript
JavaScript实现旋转木马轮播图
Mar 16 Javascript
Vue 请求传公共参数的操作
Jul 31 Javascript
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 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
目录,文件操作详谈―PHP
2006/11/25 PHP
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
javascript实现的动态文字变换
2007/07/28 Javascript
javascript入门基础之私有变量
2010/02/23 Javascript
javascript中的float运算精度实例分析
2010/08/21 Javascript
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
jQuery EasyUI提交表单验证
2016/07/19 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
vue-router传参用法详解
2019/01/19 Javascript
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
python对视频画框标记后保存的方法
2018/12/07 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
pytorch实现seq2seq时对loss进行mask的方式
2020/02/18 Python
Python中SQLite如何使用
2020/05/27 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
SAZAC的动物连体衣和动物睡衣:Kigurumi Shop
2020/03/14 全球购物
护理实习自我鉴定
2013/12/14 职场文书
手机被没收检讨书
2014/02/22 职场文书
消防工作实施方案
2014/06/09 职场文书
任命书怎么写
2015/03/02 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
oracle通过存储过程上传list保存功能
2021/05/12 Oracle
html实现弹窗的实例
2021/06/09 HTML / CSS
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python
Centos7 Shell编程之正则表达式、文本处理工具详解
2022/08/05 Servers