React
文章平均质量分 74
Python私教
收徒弟,接私活,有直播课和私教课,可以做家教和川渝线下教学,包教会 18010070052。
展开
-
React + TypeScript 组件的状态和构造 React Hooks
这是一个有效的React API,当我们需要以前的状态值来计算新的状态时,我们可以通过回调,其中第一个参数是当前或“以前”的状态值,我们应该从这个回调中返回新的状态值来更新我们的状态。在React中,组件状态指的是组件持有的内部数据。组件使用的状态值从一个状态开始,就像我们在上一节看到的那样,然后在响应某个事件时发生变化——例如,服务器用新数据响应API请求,或者用户单击了一个按钮或更改了一个表单字段。很有可能,在某个时候,你的用户会浏览你的应用程序,并导致组件在对他们的API请求的响应到达之前卸载。原创 2024-05-30 14:29:35 · 811 阅读 · 0 评论 -
React+TypeScript 声明组件的属性和默认值
在React中,组件属性(通常称为props)允许我们将数据从父组件传递给它的子组件。相反,父组件可以更新props值,并用更新后的数据触发子组件的重新呈现。React组件属性是通过在呈现组件时将JSX属性传递给组件来设置的。在第6章,TypeScript类型检查和验证中,我将更详细地介绍如何验证传递给组件的属性值。当我们有一个有很多道具的大组件时,它更清晰,更容易看到。正如你所看到的,这种方法更加简洁,并且还允许我们使用另一个解构特性,默认值,我们将在本章中讨论。新增:src/MyList.tsx。原创 2024-05-30 09:40:18 · 808 阅读 · 1 评论 -
React 使用JSX或者TSX渲染页面
在本节中,我们将实现必需的“Hello, World”JSX应用程序。在这一点上,我们只是把脚趾伸进水里;后面会有更深入的例子。我们还将讨论是什么使这种语法能够很好地用于声明性UI结构。原创 2024-05-29 22:02:56 · 1412 阅读 · 2 评论 -
什么是React?
在我们深入了解React代码之前,我想在高层次上介绍的另一个主题是抽象。在上一节中,您看到了JSX语法如何转换为更新UI的低级操作。了解React如何转换声明式UI组件的一个更好的方法是,我们不必关心渲染目标是什么。渲染目标恰好是使用React的浏览器DOM,但它并不局限于浏览器DOM。React有潜力用于任何我们想要创建的UI,在任何可以想象的设备上。在React Native中,我们才刚刚开始看到这一点,但可能性是无限的。原创 2024-05-29 20:13:11 · 855 阅读 · 0 评论 -
apexcharts数据可视化之圆环柱状图
/ 数据序列// 图表选项chart: {},startAngle: 0, // 开始角度endAngle: 270, // 结束角度hollow: { // 中间图标margin: 5,},name: {},value: {},useSeriesColors: true, // 使用和对应图表相同颜色margin: 8,},},},labels: ['苹果', '橘子', '香蕉', '葡萄'],options: {legend: {}]return (原创 2024-05-29 09:39:04 · 578 阅读 · 0 评论 -
apexcharts数据可视化之雷达图
apexcharts数据可视化之雷达图有完整配套的Python后端代码。原创 2024-05-29 09:35:50 · 505 阅读 · 0 评论 -
apexcharts数据可视化之极坐标区域图
apexcharts数据可视化之极坐标区域图有完整配套的Python后端代码。原创 2024-05-28 10:20:24 · 742 阅读 · 0 评论 -
apexcharts数据可视化之饼图
apexcharts数据可视化之饼图有完整配套的Python后端代码。原创 2024-05-28 10:15:47 · 1016 阅读 · 0 评论 -
React18 apexcharts数据可视化之甜甜圈图
apexcharts数据可视化之甜甜圈图。有完整配套的Python后端代码。原创 2024-05-27 10:07:39 · 522 阅读 · 0 评论 -
React18 apexcharts数据可视化之折线图
apexcharts数据可视化之折线图原创 2024-05-27 09:31:33 · 440 阅读 · 0 评论 -
Slash后台管理系统代码阅读笔记 如何实现环形统计图表卡片?
在这个代码中,有个自定义的Card组件,这个我们之前没有详细的分析,那么这次我们追踪一下代码,看看,Card这个组件是如何实现的。这里有个问题,就是这个环形图有四种属性,但是看上去只有两种颜色,不太好区分,那么能不能自定义颜色呢?这个自定义的卡片实现了根据主题模式动态切换样式的效果。背景颜色,阴影也是动态计算出来的。目前,工作台界面的上半部分已经基本梳理完毕了。接下来,我们看看这个环形图卡片是怎么实现的?采用的是一行两列的布局,而且是响应式的。原创 2024-05-26 09:30:06 · 257 阅读 · 0 评论 -
Slash后台管理系统源码阅读笔记 实现环形图统计卡片
目前在梳理工作台相关的代码。首先我们看看转化率组件。原创 2024-05-25 18:55:18 · 289 阅读 · 0 评论 -
React18+TypeScript搭建通用中后台项目实战04 封装常用工具函数
此时,访问 http://localhost:5173/ 进行测试。此时,访问 http://localhost:5173/ 进行测试。此时,访问 http://localhost:5173/ 进行测试。修改 src/api/request.ts。修改 src/page/Index.tsx。修改 src/page/Index.tsx。修改 src/page/Index.tsx。原创 2024-05-25 13:46:03 · 439 阅读 · 0 评论 -
React18+TypeScript搭建通用中后台项目实战03 自定义加载状态组件
修改 src/components/loading/index.tsx。修改 src/api/request.ts。修改 src/api/request.ts。修改 src/api/request.ts。原创 2024-05-25 12:19:15 · 387 阅读 · 0 评论 -
React18+TypeScript搭建通用中后台项目实战02 整合 antd 和 axios
此时访问:http://localhost:5173/404。此时访问:http://localhost:5173/403。修改 src/page/Error404.tsx。修改 src/page/Error403.tsx。新增 src/api/request.ts。原创 2024-05-25 10:41:15 · 539 阅读 · 0 评论 -
React18+TypeScript搭建通用中后台项目实战01 项目环境搭建
此时,访问:http://localhost:5173/#/404 或者 http://localhost:5173/#/abc 等任意不存在页面,会自动重定向到404路由指定的页面。注意,这里将hash路由变成了浏览器路由,此时访问:http://localhost:5173/403。修改 src/router/index.tsx。修改 src/router/index.tsx。修改 src/router/index.tsx。原创 2024-05-25 09:44:26 · 483 阅读 · 0 评论 -
React环境搭建
这一步很重要,因为我们全局安装的可执行文件会被存放在这个目录中,如果不配置,全局安装的可执行文件会找不到,就会报错。下载:https://github.com/coreybutler/nvm-windows/releases。将D:\web\nvm\global添加到环境变量的Path路径下。原创 2024-05-24 14:35:39 · 274 阅读 · 0 评论 -
Django5+React18前后端分离开发实战14 React-Router6 入门教程
先访问首页,在点击左侧菜单的链接,会自动跳转:http://localhost:5173/contacts/1。浏览器访问:http://localhost:5173/contacts/1。此时,访问:http://localhost:5173/404。此时访问:http://localhost:5173/原创 2024-05-20 20:41:01 · 741 阅读 · 0 评论 -
Django5+React18前后端分离开发实战13 使用React创建前端项目
先将nodejs的版本切换到18:接着,使用webstorm打开这个刚创建的项目:添加一个npm run start的配置:通过start启动服务:浏览器访问:http://localhost:3000/原创 2024-05-19 15:23:58 · 386 阅读 · 0 评论 -
React的JSX使用入门案例
JSX支持像写HTML一样写JavaScript,是一种JavaScript+HTML混合编程的形式。3、使用函数声明一个React的组件。// 使用JSX语法改写。原创 2024-05-09 08:54:59 · 386 阅读 · 0 评论 -
React开发环境搭建教程
这一步很重要,因为我们全局安装的可执行文件会被存放在这个目录中,如果不配置,全局安装的可执行文件会找不到,就会报错。下载:https://github.com/coreybutler/nvm-windows/releases。将D:\web\nvm\global添加到环境变量的Path路径下。原创 2024-05-09 07:58:48 · 416 阅读 · 0 评论 -
zdpreact_antdesginpro 继续优化Ant Design开发的后台管理系统
今天的优化就先到这里吧。想要源码的同学留言或私信即可。如果对您有帮助,麻烦打赏一些。原创 2024-04-06 12:35:00 · 331 阅读 · 0 评论 -
zdpreact_antdesginpro 研究一下react里面比较流行的一个UI框架,开发后台管理系统
首先看一下最开始的代码:这里面大部分的东西都可以删掉,比如README,只留下中文的那个就可以了。之后看看README.md中介绍的特性。原创 2024-04-05 09:35:11 · 1108 阅读 · 0 评论 -
FastAPI+React全栈开发21 探索React路由器和其他好东西
我们可以通过React Motion通过微妙的动画来增强我们的用户体验,我们可以通过一些优秀的表单库(如Formik或React Hook form)来加速表单的开发。然而,单页应用程序并不局限于单一的URL,如果你导航到你的Gmail帐户,你会看到URL,事实上,随着你可能采取的每一个操作而改变。虽然有几种解决方案可以让我们在单页应用程序(spa)中实现路由,但React Router是事实上的标准解决方案,它是一个经过良好测试的成熟包,最近进行了一次重大更新(版本6)。原创 2024-04-02 07:35:23 · 750 阅读 · 0 评论 -
FastAPI+React全栈开发20 使用useEffect与api通信
在你的项目中还有一些其他的钩子,用于记忆函数值的useMemo书可以帮助我们避免不必要的重复的昂贵的函数调用。一些副作用可能是在本地存储或会话存储中设置或获取数据值(可能我们想要保存登录用户的数据直到下一个会话),测量某些DOM元素的尺寸(例如,我们想要为不同的浏览器大小显示不同的布局),最明显的是从外部系统获取或获取数据,可能以REST API调用的形式。就像某种魔法一样,页面似乎以我们想要的方式显示我们的数据,用户电子邮件列表,总共六个(我们的API不会给我们更多,但对于我们的目的来说已经足够了)。原创 2024-04-02 07:34:38 · 1155 阅读 · 0 评论 -
FastAPI+React全栈开发19 React Hooks事件和状态
FastAPI+React全栈开发19 React Hooks事件和状态React或其组件的一个重要定义是,它本质上是一个将状态转换为用户界面的函数,React组件实际上是一个函数,正如我们所看到的,它接受props作为参数。函数的输出(实际上是组件!)是一个JSX元素。从本质上讲,React钩子是功能结构,它使我们能够进入组件的生命周期并扰乱其状态。原创 2024-04-01 19:39:09 · 815 阅读 · 0 评论 -
FastAPI+React全栈开发18 JSX和组件
FastAPI+React全栈开发18 JSX和组件我们可以肯定地说,JSX是将整个React概念结合在一起的粘合剂。React页面或应用程序中最小的构建块是所谓的React元素。一个简单元素可能如下所示。这是一个有趣的概念,它看起来像一个H1 HTML元素,但它也肯定看起来像JavaScript。你是对的,JSX使我们能够创建React元素,这些元素可以插入到React的虚拟DOM树中,这与实际的HTML不同。原创 2024-04-01 19:37:03 · 1411 阅读 · 0 评论 -
FastAPI+React全栈开发17 让我们创建一个React应用
FastAPI+React全栈开发17 让我们创建一个React应用正如我之前提到的,create-react-app在开始一个项目时省去了很多繁重的工作,我们将在本书中使用它。但是,请记住,还有其他方法可以设置React,例如,如果您想要老式的jQuery,您可以通过CDN将其包含在内!让我们创建一个简单的应用程序,我们将在此基础上进行构建。找到一个文件夹,我的名为chapter4, cd进去,然后从你选择的终端输入下面的内容。现在看魔术发生在你眼前!原创 2024-03-31 07:56:47 · 1061 阅读 · 0 评论 -
FastAPI+React全栈开发16 设置一个React工作流
在本章中,我们将创建一个非常简单的React应用程序,或者更好的是,一个应用程序的前端,通过它我们将展示主要特性和最突出的概念,这些将使React值得你花时间使用。我已经涵盖了我认为足够开始的主题。在本章结束时,你将创建一个最小的,但功能齐全的React web应用程序,你将成为前端开发人员大军的一员,他们重视简单的工具,能够实现复杂的功能,而不受严格框架的限制。最后,我提到了一些React库,它们将使您在开发自定义应用程序时更轻松,它们都有优秀的文档,并且经常更新,因此深入讨论它们将违背本章的目的。原创 2024-03-31 07:56:17 · 1073 阅读 · 0 评论 -
FastAPI+React全栈开发15 让我们构建一个展示API
FastAPI+React全栈开发15 让我们构建一个展示APIREST api都是关于HTTP请求和响应的循环,它是为web提供动力的引擎,并且在每个web框架中实现,使用web的语言,HTTP协议。我觉得展示FastAPI功能的最好方法是直接进入并创建简单的端点,并专注于实现所需功能的代码的特定部分。与我们将在接下来的章节中实现的常规CRUD操作不同,我想重点关注检索和设置请求和响应元素的过程。原创 2024-03-30 07:16:11 · 1087 阅读 · 0 评论 -
FastAPI+React全栈开发14 FastAPI如何开发REST接口
我使用术语端点来指定URL(始终是相同的,在我们的示例中,是我们的开发服务器,即localhost:8000)、路径(斜杠后面的部分)和HTTP方法的唯一组合。这似乎是显而易见的,但我相信在开始时将事情分解成最小的部分是有用的。这只是一个Python类,它提供了我们API的所有功能,并公开了一个ASGI兼容的应用程序,这是我们必须传递给我们选择的服务器(Uvicorn)的应用程序。之后,我们使用了@get装饰器,它对应于GET方法,我们传递了一个URL,在我们的例子中,我们使用了/,这是根路径。原创 2024-03-30 07:15:35 · 1345 阅读 · 0 评论 -
FastAPI+React全栈开发13 FastAPI概述
FastAPI+React全栈开发13 FastAPI概述在第一章“我们开发和FARM栈”中,我已经提到了为什么FastAPI是我们在FARM栈中选择的REST框架。FastAPI与其他解决方案的不同之处在于它的编码速度和干净的代码,这使得开发人员能够更快、更早地发现bug。该框架的作者Sebastian Ramirez经常谦虚地强调FastAPI只是Starlette和Pydantic的混合,同时严重依赖于现代Python功能,特别是类型提示。原创 2024-03-29 07:03:36 · 900 阅读 · 0 评论 -
FastAPI+React全栈开发12 搭建FastAPI开发环境
FastAPI+React全栈开发12 搭建FastAPI开发环境让我们更详细地看看它们。原创 2024-03-29 07:01:55 · 1229 阅读 · 0 评论 -
《Django+React前后端分离项目开发实战:爱计划》 03 理解项目结构
Django+React前后端分离项目开发实战:爱计划》 03 理解项目结构让我们看看为我们创建的项目文件,在代码编辑器中打开项目文件夹backend。原创 2024-02-09 09:10:01 · 1354 阅读 · 0 评论 -
《Django+React前后端分离项目开发实战:爱计划》 02 安装Python和Django
Django+React前后端分离项目开发实战:爱计划》 02 安装Python和Django由于 Django 是一个 Python 网络框架,我们首先要安装 Python。原创 2024-02-07 17:28:17 · 1549 阅读 · 0 评论 -
《Django+React前后端分离项目开发实战:爱计划》 01 项目整体概述
Django+React前后端分离项目开发实战:爱计划》 01 项目整体概述欢迎阅读 Beginning Django API wih React!本书重点介绍了一些关键任务和概念,帮助您开始学习并使用 Django REST 框架构建 RESTFul Web API,这是构建 Web API 的最流行、最可定制的方法之一。在本书的第二部分,我们将展示如何使用 React 创建前端来连接 API。原创 2024-02-07 17:12:19 · 1617 阅读 · 0 评论