从0学习React(11)

1. 引言

上个星期的工作内容是写IT资产管理的前端页面。其实,尽管我之前有一些前端开发的经验,但并不是很多。这次让我独立完成一个页面的开发,刚开始时我感到无从下手。

2. 初期的困惑和焦虑

我记得在星期一和星期二的时候,那两天真的非常焦虑。我找到了设备入库的代码,想参考着这个页面来写,发现内容非常多,而且很多文件之间是相互关联的,并不是完全独立的。我就很困惑,思路也很混乱,不知道该从哪里开始。

3. 思维混乱的原因

其实在周二晚上,我反复思考,最后觉得,我在思维上太过混乱,始终没有理清页面的代码框架。此外,我写的时候很急躁,没有明确的方向,只是东一榔头西一棒槌地写了一些代码,这样的方式显然是不可行的。

4. 决定理清代码框架

周三早上,我决定不再急于写代码,而是花了整个上午的时间来理清我要模仿的页面的代码框架,并构建一个IT资产管理中IT设备列表页面的框架。

5. 设备入库页面的代码框架

设备入库的代码框架包括一个主页面和一个子页面。主页面负责总体布局和导航,而子页面则由多个组件组成,每个组件处理特定的功能。子页面中的各个部分用方框框住,并将其作为Components目录下的各个文件。

5.1 设备入库页面(主页面)

主页面负责总体布局和导航,包括页面的基本结构和主要导航功能。

5.2 设备入库的子页面

子页面由多个组件组成,每个组件处理特定的功能。

6. 构建IT设备列表页面的框架

当我知道了要模仿的页面的框架后,我就可以参考这个框架来编写我需要的页面的框架了。我的框架打算写成这样:

  • 主页面:负责总体布局和导航。
  • 子页面:由多个组件组成,每个组件处理特定的功能。

7. 代码编写的经过

现在回顾上个星期的工作,我发现,当我把页面的框架搭建出来之后,后续的工作基本上就没有太大的难度了。我只需要按照设备入库页面的文件结构来编写新的页面即可。具体来说,我先将设备入库的代码拷贝过来,然后逐行进行修改。这种修改基本上没有太大的技术难度,只是一些重复性的工作。再加上有AI的帮助,整个过程变得更加高效。我记得只用了一个下午的时间,就顺利完成了这个任务。

8. 深度思考

因为React是组件化编程,所以在开发过程中,理清框架是至关重要的。如果没有一个清晰的框架,代码就会变得非常混乱。只要你把框架捋清楚了,之后的工作就会变得相对简单。我之前一直没有什么思路,就是因为没有把框架搞懂。如果你搞不懂框架,就没有明确的目标,也不知道下一步该干什么,就像无头苍蝇一样乱撞。这样不仅写出来的代码质量很差,而且还容易越来越迷失方向。

正确的步骤应该是:

  1. 找到你要模仿的页面:首先,确定一个你想要模仿的页面,作为参考。
  2. 梳理好这个页面的框架:仔细分析并理解这个页面的结构和组件关系,理清其框架。
  3. 写出你自己要写的页面的框架:根据你对模仿页面的理解,搭建你自己的页面框架。
  4. 粘贴和修改代码:将要模仿页面的代码粘贴到你自己的页面中,一个文件一个文件地进行粘贴和修改。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

边缘计算与推理算力:智能时代的加速引擎

在数据量爆炸性增长的今天,边缘计算与推理算力正成为推动智能应用的关键力量。智能家居、自动驾驶、工业4.0等领域正在逐步从传统的云端计算转向边缘计算,而推理算力的加入,为边缘计算提供了更强的数据处理能力和实时决策能力。本文将探讨边缘…

基于开源 AI 智能名片 S2B2C 商城小程序的视频号交易小程序优化研究

摘要:本文探讨了完善适配视频号交易小程序的重要意义,重点阐述了开源 AI 智能名片 S2B2C 商城小程序在这一过程中的应用。通过分析其与直播间和社群的无缝衔接特点,以及满足新流量结构下基础设施需求的能力,为门店在视频号直播交易…

深度学习知识点2-SENet(Squeeze-and-Excitation Networks)

作者的动机:希望显式地建模特征通道之间的相互依赖关系。 具体方法:并未引入新的空间维度来进行特征通道间的融合,而是采用了一种全新的「特征重标定」策略。通过学习的方式来自动获取到每个特征通道的重要程度,然后依照这个重要…

vue2.x elementui 固定顶部、左侧菜单与面包屑,自适应 iframe 页面布局

vue elementui 固定顶部、左侧菜单与面包屑,自适应 iframe 页面布局 疑问点:iframe无法高度100%,如果写了100%就会有滚动条,所以只写了99.5% 【效果图】 路由示例 const routes [{title: Index,path: /,name: "Index"…

在配置环境变量之后使用Maven报错 : mvn : 无法将“mvn”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。

最近,我在 Windows 系统上安装和配置 Apache Maven 时遇到了一些问题,想在此记录下我的解决历程,希望对遇到类似问题的朋友有所帮助。 问题描述 我下载了 Maven 并按照常规步骤配置了相关的环境变量。然而,在 PowerShell 中输入…

java数据结构与算法:栈

栈 1、栈的基本概念2、Java模拟简单的顺序栈实现3、增强功能版栈4、利用栈实现字符串逆序5、利用栈判断分隔符是否匹配6、总结 1、栈的基本概念 **栈(英语:stack)**又称为堆栈或堆叠,栈作为一种数据结构,是一种只能在…

【Linux篇】面试——用户和组、文件类型、权限、进程

目录 一、权限管理 1. 用户和组 (1)相关概念 (2)用户命令 ① useradd(添加新的用户账号) ② userdel(删除帐号) ③ usermod(修改帐号) ④ passwd&…

java/SpingBoot

后端:使用MyBatis与数据库相连。 下载安装apache-maven 配置apache-maven管理工具

基于yolov8、yolov5的番茄成熟度检测识别系统(含UI界面、训练好的模型、Python代码、数据集)

摘要:番茄成熟度检测在农业生产及质量控制中起着至关重要的作用,不仅能帮助农民及时采摘成熟的番茄,还为自动化农业监测提供了可靠的数据支撑。本文介绍了一款基于YOLOv8、YOLOv5等深度学习框架的番茄成熟度检测模型,该模型使用了…

从“大吼”到“轻触”,防爆手机如何改变危险油气环境通信?

众所周知,在加油站用手机打电话是被明令禁止的,这是因为手机内部会产生静电或射频火花,可能点燃空气中的油气混合物,导致爆炸或火灾。那么加油站的工作人员如何交流呢?以前他们靠吼,现在有了防爆手机&#…

PICO+Unity MR空间锚点

官方链接:空间锚点 | PICO 开发者平台 注意:该功能只能打包成APK在PICO 4 Ultra上真机运行,无法通过串流或PICO developer center在PC上运行。使用之前要开启视频透视。 在 Inspector 窗口中的 PXR_Manager (Script) 面板上,勾选…

OneRestore: A Universal Restoration Framework for Composite Degradation 论文阅读笔记

这是武汉大学一作单位的一篇发表在ECCV2024上的论文,文章代码开源,文章首页图如下所示,做混合图像干扰去除,还能分别去除,看起来很牛逼。文章是少见的做混合图像干扰去除的,不过可惜只包含了3种degradation…

2.vue编写APP组件

二、编写APP组件 2.1基本语法 1&#xff09;先把src里的默认文件删掉 2&#xff09;创建main.ts和App.vue这两个文件 <!--App.vue--><!-- 组件结构 --> <template><div class"app"><h1>Hello Vue</h1></div> </temp…

工业相机选取

1.相机分类&#xff1a; 1.1 在相机曝光方式中&#xff0c;全局曝光和卷帘曝光是两种主流技术。CCD相机通常采用全局曝光方式&#xff0c;而CMOS相机则可能采用卷帘曝光。 面阵相机与全局曝光关联与区别 关联&#xff1a;面阵相机可以使用全局曝光作为曝光方式&#xff0c;但…

进入未来城:第五周游戏指南

欢迎来到 Alpha 第 4 季第五周&#xff01; 走进霓虹闪烁的未来城街道&#xff0c;这是一座科技至上的赛博朋克大都市。鳞次栉比的摩天大楼熠熠生辉&#xff0c;拥挤的街道下则是阴森恐怖的地下世界。在这里&#xff0c;像激光鹰队长这样的超级战士正在巡逻&#xff0c;而 Ago…

C++ 错题本 MAC环境下 unique_lock try_lock_for函数爆红问题

下方是一个非常简单的&#xff0c;尝试使用unique_lock去尝试加锁的示例代码&#xff0c;在调用try_lock_for函数的时候爆红。这个函数本来就是按照编辑器提示点出来的&#xff0c;不可能没有这个方法 &#xff0c;比较奇怪。 报错如图所示&#xff1a; 运行的时候编译器报错…

华为大咖说 | 浅谈智能运维技术

本文分享自华为云社区&#xff1a;华为大咖说 | 浅谈智能运维技术-云社区-华为云 本文作者&#xff1a;李文轩 &#xff08; 华为智能运维专家 &#xff09; 全文约2695字&#xff0c;阅读约需8分钟 在大数据、人工智能等新兴技术的加持下&#xff0c;智能运维&#xff08;AI…

ollama+springboot ai+vue+elementUI整合

1. 下载安装ollama (1) 官网下载地址&#xff1a;https://github.com/ollama/ollama 这里以window版本为主&#xff0c;下载链接为&#xff1a;https://ollama.com/download/OllamaSetup.exe。 安装完毕后&#xff0c;桌面小图标有一个小图标&#xff0c;表示已安装成功&…

python数据写入excel文件

主要思路&#xff1a;数据 转DataFrame后写入excel文件 一、数据格式为字典形式1 k e &#xff0c; v [‘1’, ‘e’, 0.83, 437, 0.6, 0.8, 0.9, ‘好’] 1、这种方法使用了 from_dict 方法&#xff0c;指定了 orient‘index’ 表示使用字典的键作为行索引&#xff0c;然…

借助 Pause 容器调试 Pod

借助 Pause 容器调试 Pod 在 K8S 中&#xff0c;Pod 是最核心、最基础的资源对象&#xff0c;也是 Kubernetes 中调度最小单元。在介绍 Pause 容器之前需要先说明下 Pod 与容器的关系来理解为什么需要 Pause 容器来帮助调试 1. Pod 与 容器的关系 Pod 是一个抽象的逻辑概念&…