React 后台管理项目 入门项目 简洁清晰保姆级内容讲解

序章

React Hook的后台管理项目,从0到1搭建,内容非常丰富涵盖项目搭建、路由配置、用户鉴权、首页报表、用户列表、前后端联调等功能,推荐指数:5颗星!

视频学习链接: React 通用后台管理-零基础从0到1详细的入门保姆级别教程------哔哩哔哩bilibili


环境配置

node版本:需要 Node.js 版本 18+

编辑器:VScode

技术栈:react react-redux axios dayjs echarts

项目搭建

创建命令

js 复制代码
npx create-react-app my-app // 创建项目
cd my-app
npm start  // 启动项目

生成目录如下

引入antd UI框架

js 复制代码
npm install antd --save

修改 src/App.js,引入 antd 的按钮组件。可以看到效果

js 复制代码
import React from 'react';
import { Button } from 'antd';

const App: React.FC = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);
export default App;

引入react-redux @reduxjs/toolkit

js 复制代码
npm i react-redux @reduxjs/toolkit

讲到这里,整个项目搭建过程就完成了,由于篇幅有限,详情的视频教学 推荐视频学习链接:链接: vue3通用后台管理-零基础从0到1详细的入门保姆级别教程------哔哩哔哩bilibili

相关推荐
147API2 分钟前
多模型路由规则设计实战:第一版系统别做成黑盒
服务器·前端·javascript
xcjbqd011 分钟前
CSS中隐藏元素的多重技巧与应用场景
前端·css
Ruihong11 分钟前
你的 Vue 3 <script setup>,VuReact 会编译成完整的 React 组件
vue.js·react.js·面试
chenbin___14 分钟前
检查hooks依赖的工具(转自千问)
开发语言·前端·javascript·react native·react.js
阿凤2128 分钟前
uniapp运行到app端怎么打开文件
android·前端·javascript·uni-app
久爱@勿忘30 分钟前
vue/uniapp H5页面截图
开发语言·前端·javascript
渔舟小调40 分钟前
P12 | 标签体系:灵活的多维标签设计与前端联动
前端
小李子呢02111 小时前
前端八股浏览器网络(2)---cookie,localStorage,sessionStorage
前端·网络
小李子呢02111 小时前
前端八股Vue---插槽
前端·javascript·vue.js