React总结-01

要点

  • create app use npx and lanch
  • folder File structure and main entry point in react
  • what is jsx
  • useState
npx create-react-app my-app
cd my-app
npm start

开始你的第一个react程序

删除除了index.js其他文件


import React from 'react';
import ReactDOM from 'react-dom/client';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1 style={{ textAlign: 'center' }}>hello world</h1>
);

如何渲染:
const root = ReactDOM.createRoot(document.getElementById('root'));
获取要挂载的dom对象

你的整个react App 就挂载这个dom上
ReactDOM.createRoot()

包装为一个react对象

调用render函数,参数是一个jsx

jsx 简单来说就是用js写html, 当然这种语法其实是一种语法糖,个人觉得jsx是一种非常自然的方式来创建组件

对于组件来说,一个很重要的问题是如何管理变化

在react里可以使用useState


const [num, setNum] = useState(0)

当我们需要管理一个变化点的时候可以使用useState函数来创建,入参是一个初始状态, 返回状态和设置状态的函数

当需要改变num值的时候需要调用setNum来重新赋值,此时组件会重新渲染

感悟:

学编程不能执着于把所有知识点都学了才敢写,因为长时间的学习得不到反馈的话人会没有动力,没有动力的话很难学会东西,也很容易中途放弃,反复重新开始学习
其次其实也不要需要学会全部知识点,因为百分之七八十可能就用不上,作为一个后端开发来说,深刻的体会到在日常的开发工作中用到的api或者技术其实就那么几点,完美主义更是不可取,甚至先写出烂代码,在一步步去优化才是更加符合人类的步骤,不要害怕写出烂代码
先想想自己想要实现什么功能,哪怕是一个很小的需求,哪怕不会写css, 先把最基础的想法实现出来,不要苛求自己
另外不要焦虑,作为一个程序员是有很多东西给要学的,东西是学不完的,而且有些东西用的时候再去查也没关系,例如正则表达式, css样式

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

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

相关文章

【Linux工具】编译器、调式器、项目自动化构建工具以及git的使用3(GDB调试器的基础使用)

【Linux工具】编译器、调式器、项目自动化构建工具以及git的使用3&#xff08;GDB调试器的基础使用&#xff09; 目录 【Linux工具】编译器、调式器、项目自动化构建工具以及git的使用3&#xff08;GDB调试器的基础使用&#xff09;背景gdb的一些指令gdb实际运用显示代码运行程…

【NLP】transformers的位置编码

一、背景 本文是“实现的变压器”系列的第二篇。它从头开始引入位置编码。然后,它

Day4 网络流与二分图

之前那篇博客是在入门网络流时写的&#xff0c;现在对网络流重新有了一定的理解。 1. 最大流 FF 增广思想 Ford–Fulkerson 增广&#xff0c;核心即不断找增广路并增广。 dfs 实现 // FF brute #include <bits/stdc.h> #define int long longusing namespace std;in…

OkHttp原理和机制讲解

OkHttp原理和机制讲解 本文链接&#xff1a;https://blog.csdn.net/feather_wch/article/details/131767285 1、OkHttp的原理和机制包括哪些部分&#xff1f; 设计模式的运用&#xff1a;建造者模式、外观模式、责任链模式整体流程分发器(调度机制)TCP链接复用(复用机制)拦截…

2023米哈游图像算法暑期实习面经

来源&#xff1a;投稿 作者&#xff1a;LSC 编辑&#xff1a;学姐 本文不可转载 违者必究 1.自我介绍 2.能实习多久&#xff1f;公司在心目中的地位排序等 3.是否了解公司&#xff0c;用他们的产品吗&#xff1f;(比如原神) &#xff0c;喜欢游戏吗&#xff1f; 我只知道公司…

划片机的作用将晶圆分割成独立的芯片

划片机是将晶圆分割成独立芯片的关键设备之一。在半导体制造过程中&#xff0c;晶圆划片机用于将整个晶圆切割成单个的芯片&#xff0c;这个过程被称为“晶圆分割”或“晶圆切割”。 晶圆划片机通常采用精密的机械传动系统、高精度的切割刀具和先进的控制系统&#xff0c;以确保…

web-其他注入

堆叠注入 mysqli_query()只能执行一条SQL语句&#xff0c;mysqli_multi_query()可以执行多条语句 堆叠注入与联合查询的区别&#xff1a;union 执行的语句类型是有限的&#xff0c;只能执行 select &#xff0c;堆叠注入可以执行任意语句。但使用堆叠注入&#xff0c;需要后端…

恢复idea删除的git本地文件

idea中删除git本地文件无法远程拉取pull已删除文件的问题 当前本地库处于另一个分支中&#xff0c;需将本分支Head重置&#xff0c;git 强行pull并覆盖本地文件 解决方式一&#xff1a; git fetch --all git reset --hard origin/master git pull解决方式二&#xff1a; git…

Oracle密码文件

Oracle密码文件 Oracle密码文件用于用户远程管理数据库验证 我们可以通过将普通用户加入到密码文件中&#xff0c;使他们可以使用sysdba或sysoper的权限来管理数据库 使用ORAPWD命令创建 语法如下: ORAPWD FILEfilename [ENTRIESnumusers] [FORCE{Y|N}] [IGNORECASE{Y|N}] …

ylb-项目简介

1、各模块服务功能 注&#xff1a;其部分实体类、接口、mapper文件由MyBatis逆向工程生成。 2、Maven管理&#xff08;多模块&#xff0c;继承和聚合&#xff09; 2.1 parent模块 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"…

DevOps系列文章之 Dockerfile 使用流程

制作项目应用镜像 主要步骤&#xff1a; Step1、准备项目应用程序包 Step2、编写Dockerfile及启动脚本 Step3、docker build 构建镜像 Step4、docker run 启动容器 Step5、docker exec 进入容器进行验证 Step6、镜像的导入导出 Step7、提交容器生成新镜像 Step1、准备项目应…

如何缩短 js 解析时间,如何优化首屏(延迟加载)

缩短js解析时间 代码优化 避免全局查找&#xff08;沿着作用域链找需要时间&#xff09;&#xff0c;避免闭包&#xff0c;用数据结构等 减小js的大小&#xff1a;压缩和混淆 压缩 剔除没用到的代码&#xff0c;把长表达式转换成同含义的短表达式等 语法转换和优化&#…

c++ 无锁队列的简单实现

无锁队列的基本介绍 一个关于无锁队列的多线程读写代码示例。在这里&#xff0c;我提供一个简单的示例来说明这个问题。 在使用无锁队列时&#xff0c;需要注意以下几点&#xff1a; 使用原子操作来实现对队列的读写操作&#xff0c;以避免多线程同时访问同一数据导致的竞争条…

在SPringBoot生成验证码

1.引入依赖,这个依赖中包含了生成验证码的工具类 <!--引入hutool --><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.3.9</version></dependency> 2.编写配置类 import cn.hu…

Linux字符设备操作函数

Linux字符设备操作函数是指对字符设备进行打开、关闭、读取、写入、控制等基本操作的函数&#xff0c;它们通过字符设备结构体中的 file_operations 结构体来定义。常用的字符设备操作函数包括&#xff1a; 1、open: 当一个进程试图打开设备文件时&#xff0c;调用这个函数。开…

华润燃气牵手腾讯云 数字技术助力燃气行业高质量发展

7月13日&#xff0c;华润燃气与腾讯云正式签署战略合作协议。双方将充分发挥各自优势&#xff0c;探索AI大模型在燃气行业的深度应用&#xff0c;并深耕分布式计算、连接和客户运营等领域&#xff0c;不断提升燃气民生服务的效率、质量&#xff0c;共同推动行业数字化转型和高质…

ASEMI快恢复二极管MUR20100CTR在电子工程中的应用

编辑-Z 随着电子技术的日益发展&#xff0c;各种电子元件的使用场景与需求也在逐步扩大。今天&#xff0c;我们将聚焦于一款广泛应用于各类电路的二极管——MUR20100CTR&#xff0c;来详细解读其性能特征及应用。 一、MUR20100CTR二极管的主要特性 MUR20100CTR是一款极高性能的…

DataTable数据对比

DataTable数据对比 文章目录 DataTable数据对比前言一、计算DataTable差集结构不同的情况结构相同的情况 二、计算DataTable交集结构不同的情况结构相同的情况 三、计算DataTable的并集合两个DaTable结构相同的情况计算并集 前言 开发中我们经常会出现查询数据库后返回DataTab…

【iOS安全】iphone出现support.apple.com/iphone/restore

解决iphone出现support.apple.com/iphone/restore 解决方法1&#xff1a;使用爱思助手 可能是因为手机进入了恢复模式 手机连接Mac端的爱思助手之后&#xff0c;使用爱思助手的“退出恢复模式” 经测试有效 解决方法2&#xff1a;iphone强制重启 强制重新启动iPhone8或iPhone…

[Java]Set、Map、List常见实现类的特点、使用方法总结

文章目录 1、图谱2、List1、ArrayList1. 特点2. 常见方法 2、LinkedList1、特点2、常见方法 3、Vector1、特点 3、Map1、HashMap1、特点常用方法 2、TreeMap1、特点 3、LinkedHashMap1、特点 4、Set1、HashSet1 、特点2、常用方法 2、LinkedHashSet特点 3、TreeSet1、特点2、使…