手把手教你从零开始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 相关文章推荐
checkbox 复选框不能为空
Jul 11 Javascript
javascript判断用户浏览器插件安装情况的代码
Jan 01 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
Javascript 是你的高阶函数(高级应用)
Jun 15 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
JavaScript 数组的深度复制解析
Nov 02 Javascript
使用vue构建一个上传图片表单
Jul 04 Javascript
Vue 滚动行为的具体使用方法
Sep 13 Javascript
Vue 样式绑定的实现方法
Jan 15 Javascript
webpack+vue.js构建前端工程化的详细教程
May 10 Javascript
VSCode launch.json配置详细教程
Jun 18 Javascript
React Ant Design树形表格的复杂增删改操作
Nov 02 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将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
jQuery中读取json文件示例代码
2013/05/10 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
2013/06/06 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
javascript实现的网站访问量统计代码
2015/12/20 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
JS变量及其作用域
2017/03/29 Javascript
BootStrap的两种模态框方式
2017/05/10 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
js实现动态增加文件域表单功能
2018/10/22 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
浅谈layui 表单元素的选中问题
2019/10/25 Javascript
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
react 生命周期实例分析
2020/05/18 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
对Python发送带header的http请求方法详解
2019/01/02 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
Python @property原理解析和用法实例
2020/02/11 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
python 中的命名空间,你真的了解吗?
2020/08/19 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
HTML5如何实现元素拖拽
2016/03/11 HTML / CSS
Joules美国官网:出色的英国风格
2017/10/30 全球购物
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
struct和class的区别
2015/11/20 面试题
演讲稿开场白
2014/01/13 职场文书
市场营销计划书
2015/01/17 职场文书
冰峪沟导游词
2015/02/09 职场文书
财务会计求职信范文
2015/03/20 职场文书
《穷人》教学反思
2016/02/19 职场文书
大学生创业,为什么都会选择快餐饮?
2019/08/08 职场文书
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python
中国十大神话动漫电影排行榜 哪吒登顶 白蛇缘起排第七
2022/03/21 国漫