从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封装…

抖音电商发布双11数据:275个品牌通过直播带货实现成交额过亿元

11月12日,抖音电商发布2024“抖音商城双11好物节”数据,呈现双11期间平台商家经营情况。 数据显示,大促期间,众多商家在抖音电商迎来生意增长。10月8日至11月11日,超3.3万个品牌成交额同比翻倍,近1.7万个品…

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

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

实验室集群服务器常用命令-Linux

1. 查看磁盘空间 df -h2. 查看当前文件夹下所有文件 ls查看当前文件夹下所有文件(包括隐藏文件 ls -a3. 服务器内存相关命令 a. 查看服务器剩余内存 free -hb. 查看占用内存最大的10个进程 ps -aux | sort -k4nr | head -n 104. 批量kill进程 a. --kill某个用…

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

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

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

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

C++ 面试问题集合

文章目录 设计模式单例 排序算法查找算法二分查找 设计模式 单例 #include <iostream> #include <string> #include <memory> #include <mutex> #include <thread>using namespace std;class SingleTon{ protected://外部不可直接操作SingleTo…

高级AI记录笔记(二)

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

小型kv数据库rocksdb配合grpc实现网络访问

rocksdb相对来说比leveldb多了许多特性&#xff0c;但是对使用来说比levedb高了一大截。 rocksdb的代码在编译时需要有rocksdb服务端环境才能编译&#xff0c;windows上需要先下载vs2019编译dll后才能开始写代码。 这里不考虑windows了&#xff0c;直接使用docker环境来用 一…

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

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

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

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

蔚来Android面试题及参考答案(3万字长文)

说一说 MVP 架构,MVVM 架构 MVP(Model - View - Presenter)架构: Model:它主要负责数据的获取和存储,例如从数据库、网络或者其他数据源获取数据。模型层是独立于视图层的,它不关心数据是如何展示的,只专注于数据本身的操作。比如一个新闻类应用,模型层就负责从服务器…

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

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

【论文阅读】小样本学习相关研究

相关文献 Generalizing from a Few Examples: A Survey on Few-Shot Learning Author: YAQING WANG、QUANMING YAO、JAMES T. KWOK、LIONEL M. NIAbstract: Artificial intelligence succeeds in data-intensive applications, but it lacks the ability of learning from a …

【架构论文-1】面向服务架构(SOA)

【摘要】 本文以我参加公司的“生产线数字孪生”项目为例&#xff0c;论述了“面向服务架构设计及其应用”。该项目的目标是构建某车企的数字孪生平台&#xff0c;在虚拟场景中能够仿真还原真实产线的动作和节拍&#xff0c;实现虚实联动&#xff0c;从而提前规避问题&#xff…

常见的排序算法及分类对比

虽然在竞赛和编程语言中用到的排序算法主要是时间复杂度为 O ( n log ⁡ n ) O(n \log n) O(nlogn) 的高效算法,但作为算法学习,我们要从简单到复杂,认识常见的排序算法,并理解其算法思想。本文列出几乎所有的排序算法并进行分类对比。 排序算法总表 以下是一个对比表格…

Kafka-broker处理producer请求-leader篇

一、上下文 《Kafka-生产者源码分析》博客中我们了解了Kafka是如何生产数据的&#xff0c;《Kafka-broker粗粒度启动流程》博客中我们了解了KafkaApis中有各种api和对应处理逻辑&#xff0c;其中PRODUCE请求对应了处理produce请求的逻辑&#xff0c;下面我们跟着源码来看下处理…