实现React18加TS,解决通用后台管理系统,实战方案落地有效实践经验

news2024/11/16 5:34:30

随着前端技术的不断发展和更新,使用React 18结合TypeScript(TS)来构建通用后台管理系统已成为一种常见的选择。本文将介绍如何在项目中应用React 18和TS,并分享一些实战方案的有效实践经验。

一、搭建React 18 + TS项目
首先,我们需要创建一个新的React 18 + TS项目。可以使用脚手架工具如Create React App或者Vite来快速搭建基础项目结构。

使用Create React App:

npx create-react-app my-admin --template typescript
cd my-admin

使用Vite:

npm init vite@latest my-admin --template react-ts
cd my-admin

二、组件开发与类型定义
在React 18 + TS项目中,组件的开发需要注意以下几点:

  1. 使用函数式组件:
import React from 'react';

type Props = {
  name: string;
};

const HelloWorld: React.FC<Props> = ({ name }) => {
  return <div>Hello, {name}!</div>;
};

export default HelloWorld;

  1. 类型定义和传递:
import React from 'react';
import HelloWorld from './components/HelloWorld';

type User = {
  id: number;
  name: string;
};

const App: React.FC = () => {
  const user: User = {
    id: 1,
    name: 'John',
  };

  return (
    <div>
      <HelloWorld name={user.name} />
    </div>
  );
};

export default App;

三、路由和权限控制
在一个通用后台管理系统中,路由和权限控制是非常重要的。我们可以使用react-router-dom库来实现路由功能,结合TS的类型定义,可以更好地做到静态检查和减少潜在的错误。

  1. 安装并配置路由:
npm install react-router-dom @types/react-router-dom

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import HomePage from './pages/HomePage';
import LoginPage from './pages/LoginPage';
import NotFoundPage from './pages/NotFoundPage';

const App: React.FC = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/login" component={LoginPage} />
        <Route component={NotFoundPage} />
      </Switch>
    </Router>
  );
};

export default App;

  1. 实现权限控制:
import React from 'react';
import { Redirect, Route, RouteProps } from 'react-router-dom';

type PrivateRouteProps = {
  isAuthenticated: boolean;
  redirectPath: string;
} & RouteProps;

const PrivateRoute: React.FC<PrivateRouteProps> = ({
  isAuthenticated,
  redirectPath,
  ...rest
}) => {
  return isAuthenticated ? (
    <Route {...rest} />
  ) : (
    <Redirect to={redirectPath} />
  );
};

export default PrivateRoute;

四、状态管理与数据请求
在React 18 + TS项目中,状态管理一般使用Redux或者Mobx来实现。同时,数据请求可以使用axios等库来发送HTTP请求。

  1. 安装并配置Redux:
npm install redux react-redux @types/react-redux

  1. 创建Store:
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

  1. 发送数据请求:
import axios from 'axios';

const fetchData = async (url: string): Promise<any> => {
  const response = await axios.get(url);
  return response.data;
};

以上是一个基于React 18和TypeScript的通用后台管理系统的实战方案。通过合理地搭建项目结构、定义类型、实现路由和权限控制以及进行状态管理和数据请求,我们可以高效地开发出

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1303751.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

科技提升安全,基于YOLOv5系列模型【n/s/m/l/x】开发构建商超扶梯场景下行人安全行为姿态检测识别系统

在商超等人流量较为密集的场景下经常会报道出现一些行人在扶梯上摔倒、受伤等问题&#xff0c;随着AI技术的快速发展与不断普及&#xff0c;越来越多的商超、地铁等场景开始加装专用的安全检测预警系统&#xff0c;核心工作原理即使AI模型与摄像头图像视频流的实时计算&#xf…

开箱即用的C++决策树简单实现

一个数据结构期末作业&#xff08;有兴趣用的话可以高抬贵手star下⭐~&#xff09;GitHub - mcxiaoxiao/c-Decision-tree: 决策树c简单实现 &#x1f333; c-Decision-tree 附大作业/课设参考文档.doc &#x1f333; c-Decision-tree Introduction &#x1f64c; c-Decision…

spider小案例~https://industry.cfi.cn/BCA0A4127A4128A4141.html

一、获取列表页信息 通过抓包发现列表页信息非正常返回&#xff0c;列表信息如下图&#xff1a; 通过观察发现列表页信息是通过unes函数进行处理的&#xff0c;我们接下来去看下该函数 该函数是对列表页的信息先全局替换"~"为"%u"&#xff0c;然后再通过…

中伟视界:煤矿行业借力人工智能,防控灾害风险迈出新步伐 《“十四五”矿山安全生产规划》(应急(2022)64号),煤矿重大灾害风险防控系统

随着煤矿行业的发展&#xff0c;煤矿重大灾害风险防控成为了行业关注的重点之一。为了更好地预防和应对灾害风险&#xff0c;煤矿行业开始引入人工智能分析算法和检测场景&#xff0c;以提高灾害风险的识别和预警能力。 在煤矿的重大灾害风险防控中&#xff0c;AI算法发挥着重要…

【Regulatory Genomics】Part3 GENOMICS AT NVIDIA、ATACWORKS

文章目录 Enchancing epigenomic data with deep learningAtacWorks: Improving the quality of ATAC-seq signals1 model structure2 training strategy Performance of AtacWorks 来自Manolis Kellis教授&#xff08;MIT计算生物学主任&#xff09;的课 油管链接&#xff1a;…

MyBatis:缓存

MyBatis 缓存一级缓存二级缓存注 缓存 缓存&#xff0c;是数据交换的缓冲区&#xff08;临时保存数据的地方&#xff09;。即将数据&#xff08;数据一般为频繁查询且不易改变&#xff09;保存在计算机内存中&#xff0c;下次读取数据时直接从内存中获取&#xff0c;以避免频繁…

YOLOv8独家原创改进:轻量化自研设计双卷积,重新设计backbone和neck结构,完成涨点且计算量和参数量显著下降

💡💡💡本文自研创新改进:双卷积由组卷积和异构卷积组成,执行 33 和 11 卷积运算代替其他卷积核仅执行 11 卷积,YOLOv8 Conv,从而轻量化YOLOv8,性能如下表,GFLOPs 8.1降低至7.6,参数量6.3MB降低至5.8MB layers parametersGFLOPsMBYOLOv8n16830068188.16.3MByolov8_…

销售技巧培训之如何提升房地产销售技巧

在房地产销售这个竞争激烈的行业中&#xff0c;要想获得成功&#xff0c;不仅需要熟练掌握销售技巧&#xff0c;还需要不断地提升自己的能力。下面&#xff0c;我们将从以下几个方面探讨如何提升房地产销售技巧。 一、了解客户需求 倾听客户&#xff1a;在与客户沟通时&#x…

据房间Id是否存在,判断当前房间是否到期且实时更改颜色

重点代码展示&#xff1a; <template><el-col style"width: 100%;height: 100%;"><el-col :span"20"><el-card class"room_info"><avue-data-icons :option"option"></avue-data-icons></el-…

【截图版本】Linux常用指令详解

———————————————— 版权声明&#xff1a;本文为CSDN博主「小呆瓜历险记」的原创文章&#xff0c;遵循CC 4.0 BY-SA版权协议&#xff0c;转载请附上原文出处链接及本声明。 原文链接&#xff1a;https://blog.csdn.net/m0_58963318/article/details/134713282

亚信科技AntDB携手蓝凌软件,助推企业数字化办公转型升级

随着企业数字化转型的深入&#xff0c;企业对于协同办公、移动门户、数字运营、智能客服等方面的需求越来越高&#xff0c;数智化正成为催生新动能和新优势的关键力量。数字化的办公平台可以帮助企业实现各类信息、流程的集中化、数字化和智能化管理&#xff0c;为企业管理者提…

【代码随想录】算法训练计划48

dp 1、198. 打家劫舍 题目&#xff1a; 输入&#xff1a;[2,7,9,3,1] 输出&#xff1a;12 偷窃到的最高金额 2 9 1 12 。 思路&#xff1a; 只有两种情况&#xff0c;递推公式就好说了,dp[i]永远都是题意&#xff0c;就是当前偷到的最大金额 func rob(nums []int) int…

HarmonyOS自定义抽奖转盘开发(ArkTS)

介绍 本篇 Codelab 是基于画布组件、显式动画&#xff0c;实现的一个自定义抽奖圆形转盘。包含如下功能&#xff1a; 1. 通过画布组件 Canvas&#xff0c;画出抽奖圆形转盘。 2. 通过显式动画启动抽奖功能。 3. 通过自定义弹窗弹出抽中的奖品。 相关概念 ● Stack组件…

制作一个RISC-V的操作系统五-RISC-V汇编语言编程一

文章目录 RISC-V汇编语言入门汇编语言概念简介 汇编语言语法介绍&#xff08;GNU版本&#xff09; RISC-V汇编语言入门 汇编语言概念简介 高级&#xff1a;可以理解就是更贴近人的理解 低级&#xff1a;可以理解就是更贴近机器的 难移植&#xff1a;汇编指令基本上和机器指令…

线程安全的哈希表ConcurrentHashMap

1. HashTable 不推荐使用&#xff0c;无脑给各种方法加锁 2.ConcurrentHashMap 多线程下推荐使用 锁粒度控制 HashTable直接在方法上加synchronized&#xff0c;相当于对哈希表对象加锁&#xff0c;一个哈希表只有一把锁。多线程环境下&#xff0c;无论线程如何操作哈希表…

医疗设备智慧管理助力医院提质增效,阿基米德amp;健康界实践分享

近日&#xff0c;苏州阿基米德网络科技有限公司与医疗领域头部级媒体健康界&#xff0c;联合举办“数智为擎 提质增效——医学装备智慧管理创新发展论坛”的直播活动。 直播现场&#xff0c;来自上海交通大学医学院附属同仁医院、中华医学会航海医学分会、苏州阿基米德的专家们…

循序字符中插入数据(链表)

有一串已经从小到大排好序的数 2 3 5 8 9 10 18 26 32。现需要往这串数中插入 6 使其得 到的新序列仍符合从小到大排列。&#xff08;使用链表&#xff09;

Python:核心知识点整理大全14-笔记

目录 ​编辑 7.2.2 让用户选择何时退出 parrot.py 7.2.3 使用标志 7.2.4 使用 break 退出循环 cities.py 7.2.5 在循环中使用 continue counting.py 7.2.6 避免无限循环 counting.py 7.3 使用 while 循环来处理列表和字典 7.3.1 在列表之间移动元素 confirmed_user…

查询mysql服务器当前时区设置、session当前时区设置

使用命令SELECT global.time_zone;可以查询mysql服务器的当前时区设置&#xff0c;例如&#xff1a; 使用命令SELECT session.time_zone;可以查询session的当前时区设置&#xff0c;例如&#xff1a;

2023年全国职业院校技能大赛信息安全管理与评估赛项正式赛(模块一)GZ032

全国职业院校技能大赛高等职业教育组 信息安全管理与评估 任务书 模块一 网络平台搭建与设备安全防护 极安云科专注技能竞赛&#xff0c;包含网络建设与运维和信息安全管理与评估两大赛项&#xff0c;及各大CTF&#xff0c;基于两大赛项提供全面的系统性培训&#xff0c;拥…