从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. 粘贴和修改代码:将要模仿页面的代码粘贴到你自己的页面中,一个文件一个文件地进行粘贴和修改。

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

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

相关文章

第3章 需求 3.3需求的有效传递与度量

3.3 需求的有效传递与度量 收集需求是需要投入很多工作量的,同时需求必须有效传递到产品端才能最终发挥价值。而需求的有效传递却是一个容易被忽视的环节。 现实中存在各种需求传递方式,如口头传递、邮件传递、会议传递等,但这些需求都未被统…

Vue2中使用firefox的pdfjs进行文件文件流预览

文章目录 1.使用场景2. 使用方式1. npm 包下载,[点击查看](https://www.npmjs.com/package/pdfjs-dist)2. 官网下载1. 放到public文件夹下面2. 官网下载地址[点我,进入官网](https://github.com/mozilla/pdf.js/tags?afterv3.3.122) 3. 代码演示4. 图片预览5. 如果遇到跨域或者…

vue3+vite 前端打包不缓存配置

最近遇到前端部署后浏览器得清缓存才能出现最新页面效果得问题 所以…按以下方式配置完打包就没啥问题了,原理很简单就是加个时间戳 /* eslint-disable no-undef */ import {defineConfig, loadEnv} from vite import path from path import createVitePlugins from…

RS485/RS422保护电路

由于GJB 151B没有雷击和浪涌测试要求,故不需要防雷器件。TVS管使用SMB6.5CA,共模电感选择LCHWCM-453228-510YT01,详细设计电路如下图所示,此设计可同时满足GJB 151B和DO 160G的标准。注意SMB封装的TVS管是600W,SMA封装…

CKA认证 | Day1 k8s核心概念与集群搭建

第一章 Kubernetes 核心概念 1、主流的容器集群管理系统 容器编排系统: KubernetesSwarmMesos Marathon 2、Kubernetes介绍 Kubernetes是Google在2014年开源的一个容器集群管理系统,Kubernetes简称K8s。 Kubernetes用于容器化应用程序的部署&#x…

《大模型应用开发极简入门》笔记

推荐序 可略过不看。 初识GPT-4和ChatGPT LLM概述 NLP的目标是让计算机能够处理自然语言文本,涉及诸多任务: 文本分类:将输入文本归为预定义的类别。自动翻译:将文本从一种语言自动翻译成另一种语言,包括程序语言。…

在AutoDL上部署一个自定义的Python环境并在pycharm上使用

#AutoDL #GPU #租显卡 如何在AutoDL上部署一个自定义的Python环境 下面将会给出如何在AutoDL部署一个自定义的Python环境的详细步骤,希望可以帮助到同样对于显卡具有需求的同学。 注册账号 首先登陆AutoDL官网:https://www.gpuhub.com/register 链接…

高级AI记录笔记(二)

学习位置 B站位置:红豆丨泥 UE AI 教程原作者Youtube位置:https://youtu.be/-t3PbGRazKg?siRVoaBr4476k88gct素材自备 提前将动画素材准备好 枪的武器插槽位置调整好 动画蓝图基本没什么变化 准备武器 在AI的接口蓝图中添加两个函数一个是装备武…

汽车共享管理:SpringBoot技术的最佳实践

摘要 随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。本文介绍了共享汽车管理系统的开发全过程。通过分析共享汽车管理系统管理的不足,创建了一个计算机管理共享汽车管理系统的方案。文章介绍了共享汽车管理系统的系…

从0开始学PHP面向对象内容之(常用魔术方法)

一、什么是魔术方法 PHP中的魔术方法是以__两个下划线开头的方法,这些方法提供了一种机制,可以在类的生命周期中拦截某些事件或者进行一些操作 二、魔术方法有哪些 一、__construct()&&__destruct() __construct()构造函数,__des…

PNG图片批量压缩exe工具+功能纯净+不改变原始尺寸

小编最近有一篇png图片要批量压缩,大小都在5MB之上,在网上找了半天要么就是有广告,要么就是有毒,要么就是功能复杂,整的我心烦意乱。 于是我自己用python写了一个纯净工具,只能压缩png图片,没任…

Axure网络短剧APP端原型图,竖屏微剧视频模版40页

作品概况 页面数量:共 40 页 使用软件:Axure RP 9 及以上,非软件无源码 适用领域:短剧、微短剧、竖屏视频 作品特色 本作品为网络短剧APP的Axure原型设计图,定位属于免费短剧软件,类似红果短剧、河马剧场…

Windows,虚拟机Ubuntu和开发板三者之间的NFS服务器搭建

Windows,虚拟机Ubuntu和开发板三者之间的NFS服务器搭建 (1)虚拟机 ubuntu 要使用桥接模式,不能使用其他模式 (2)通过网线将PC和开发板网口直连:这样的连接,开发板是无法连接外网的 (3&#xff…

C# 有趣的小程序—桌面精灵详细讲解

C# 桌面精灵详细讲解 最近写了一个简化版桌面精灵,效果如图所示,可以实现切换动画,说话、鼠标拖动,等功能。具体如何做,我发布了一个资源里面包含ppt详解、源代码以及动画素材。放心吧,免费的,…

视觉SLAM数学基础

本文系统梳理从相机成像模型,通过不同图像帧之间的构造几何约束求解位姿变换,再根据位姿变换和匹配点还原三维坐标的过程,可以作为基于特征点法的视觉SLAM的数学基础。 1、相机成像模型 1.1、针孔相机模型 实际相机的成像方式通常很复杂&a…

计算机新手练级攻略——如何搜索问题

目录 计算机学生新手练级攻略——如何搜索问题1.明确搜索意图2.使用精确关键词3.使用专业引擎搜索4.利用好技术社区1. Stack Overflow2. GitHub3. IEEE Xplore4. DBLP 5.使用代码搜索工具1. GitHub 代码搜索2. Stack Overflow 代码搜索3. Papers with Code4. IEEE Xplore 6.查阅…

51c自动驾驶~合集10

我自己的原文哦~ https://blog.51cto.com/whaosoft/11638131 #端到端任务 说起端到端,每个从业者可能都觉得会是下一代自动驾驶量产方案绕不开的点!特斯拉率先吹响了方案更新的号角,无论是完全端到端,还是专注于planner的模型&a…

大模型日报|6 篇必读的大模型论文

1.华为推出科学智能体 Agent K v1.0,已达 Kaggle 大师水平 在这项工作中,来自华为诺亚方舟实验室和伦敦大学学院的研究团队提出了 Agent K v1.0,它是一个端到端自主数据科学智能体(agent),旨在对各种数据科…

MySQL核心业务大表归档过程

记录一下2年前的MySQL大表的归档,当时刚到公司,发现MySQL的业务核心库,超过亿条的有7张表,最大的表有9亿多条,有37张表超过5百万条,部分表行数如下: 在测试的MySQL环境 : pt-archiv…

cache(二)直接缓存映射

在知乎发现一份不错得学习资料 请教CPU的cache中关于line,block,index等的理解? PPT 地址 https%3A//cs.slu.edu/%7Efritts/CSCI224_S15/schedule/chap6-cache-memory.pptx 课程主页 https://cs.slu.edu/~fritts/CSCI224_S15/schedule/ 0. 缓存定义 这张图展示了缓…