当前位置: 首页 > news >正文

React 学习-1

  1. 安装--使用npm 
  2. 元素渲染

      React只定义一个根节点,由 React DOM 来管理。通过ReactDOM.render()方法将元素渲染到根DOM节点上。

    React 元素都是不可变的。当元素被创建之后,你是无法改变其内容或属性的。目前更新界面的唯一办法是创建一个新的元素,然后将它传入 ReactDOM.render() 方法

React实例一:
<div id="example"></div>
<script type="text/babel">ReactDOM.render(<h1>Hello, world!</h1>,document.getElementById('example'));
</script>React实例二:
<div id="example"></div>
<script type="text/babel">
const element = <h1>Hello, world!</h1>ReactDOM.render(element,document.getElementById('example'));
</script>实例三:
ReactDOM.render(<div><h1>菜鸟教程</h1><h2>欢迎学习 React</h2><p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p></div>,document.getElementById('example')
);
  1. JSX(javascript的语法扩展,是在javascript内部实现的)

         在 React 中使用 JSX 来描述用户界面。元素是构成React应用的最小单位,jsx就是用来生命Reac当中的元素。

JSX示例:
const element = <h1>Hello, world!</h1>;规范:
1.使用js表达式、数组、注释,都写在{}中
2.不能使用if判断,可使用三元表达式
3.推荐使用内联样式,使用驼峰命名法,数字后不用写px,react会自动添加
  1. React组件

原生html是小写字母开头,自定义的组件需要大写字母开头,意组件类只能包含一个顶层标签

1.可以使用函数定义组件
function HelloMessage(props) {return <h1>Hello World!</h1>;
}
const element = <HelloMessage /> 为用户自定义的组件。2.向组件传递参数,可以使用 this.props 对象
function HelloMessage(props) {return <h1>Hello {props.name}!</h1>;
}const element = <HelloMessage name="Runoob"/>;ReactDOM.render(element,document.getElementById('example')
);注意,在添加属性时, class 属性需要写成 className ,for 属性需要写成 htmlFor ,这是因为 class 和 for 是 JavaScript 的保留字。

相关文章:

React 学习-1

安装--使用npm 元素渲染 React只定义一个根节点&#xff0c;由 React DOM 来管理。通过ReactDOM.render()方法将元素渲染到根DOM节点上。 React 元素都是不可变的。当元素被创建之后&#xff0c;你是无法改变其内容或属性的。目前更新界面的唯一办法是创建一个新的元素&#xf…...

Libcity 笔记:自定义模型

在/libcity/model/trajectory_loc_prediction/&#xff0c;我们复制一份Deepmove.py&#xff0c;得到DM_tst.py&#xff0c;我们不改变其中的机制&#xff0c;只动class name 然后修改相同目录下的__init__.py&#xff1a; 修改task_config文件&#xff1a; 在config/model/tra…...

易图讯科技三维电子沙盘系统

深圳易图讯科技有限公司&#xff08;www.3dgis.top&#xff09;创立于2013年&#xff0c;专注二三维地理信息、三维电子沙盘、电子地图、虚拟现实、大数据、物联网和人工智能技术研发&#xff0c;获得20多项软件著作权和软件检测报告&#xff0c;成功交付并实施了1000多个项目&…...

数据结构与算法学习笔记之线性表四---单链表的表示和实现(C++)

目录 前言 一、顺序表的优缺点 二、单链表的表示和实现 1.初始化 2.清空表 3.销毁 4.表长 5.表空 6.获取表中的元素 7.下标 8.直接前驱 9.直接后继 10.插入 11.删除 12.遍历链表 13.测试代码 前言 这篇博客主要介绍单链表的表示和实现。 一、顺序表的优缺点 线…...

go语言切片slice使用细节和注意事项整理

go语言中切片slice的使用是最为频繁的&#xff0c;效率也是最高的&#xff0c; 今天就给大家说说我们在使用过程中会忽略的一些细节。 先普及一下slice的核心基础知识&#xff0c; go语言中的切片是引用类型&#xff0c; 其底层数据的存储实际上是存储在一个数组 上&#xff08…...

C语言 | Leetcode C语言题解之第85题最大矩形

题目&#xff1a; 题解&#xff1a; int maximalRectangle(char** matrix, int matrixSize, int* matrixColSize) {int m matrixSize;if (m 0) {return 0;}int n matrixColSize[0];int left[m][n];memset(left, 0, sizeof(left));for (int i 0; i < m; i) {for (int j …...

2024-05-13四月初六周一

2024-05-13四月初六周一 06:30-08:30 coding 动态规划算法&#xff1a; 08:30-12:30 深兰Ai第五期 Part1:课时269&#xff1a;00:00:00 12:30-13:00 午饭烧水&#xff1a; 13:30-19:00 深兰Ai第五期&#xff1a; 20:00-23:00 coding 线性回归&#xff1a;...

Android性能:高版本Android关闭硬件加速GPU渲染滑动卡顿掉帧

Android性能&#xff1a;高版本Android关闭硬件加速GPU渲染滑动卡顿掉帧 如果在Androidmanifest.xml配置&#xff1a; <application android:hardwareAccelerated"false" > 或者某个特点View使用代码&#xff1a; myView.setLayerType(View.LAYER_TYPE_SOFT…...

对于FileUpload控件的一些bug

我写的程序&#xff0c;问题出现的也很神奇&#xff0c;就是我在上传已经存在在我指定目录下的就可以成功&#xff0c;如果不存在&#xff0c;上传仍是可以成功的&#xff0c;但是就会不显示&#xff0c;但是你重启服务器的时候又会再次显示。这种问题出现的原因我们就需要了解…...

哲学家就餐问题

哲学家就餐问题 问题信号量实现发生死锁版限制人数版规定取筷顺序 条件变量实现 问题 在一个圆桌上坐着五位哲学家&#xff0c;每个哲学家面前有一个碗装有米饭的碗和一个筷子。哲学家的生活包括思考和进餐两个活动。当一个哲学家思考时&#xff0c;他不需要任何资源。当他饿了…...

Web安全:SQL注入之布尔盲注原理+步骤+实战操作

「作者简介」&#xff1a;2022年北京冬奥会网络安全中国代表队&#xff0c;CSDN Top100&#xff0c;就职奇安信多年&#xff0c;以实战工作为基础对安全知识体系进行总结与归纳&#xff0c;著作适用于快速入门的 《网络安全自学教程》&#xff0c;内容涵盖系统安全、信息收集等…...

电商秒杀系统-案例04-redis下的session控制

前言&#xff1a; 在现代的Web应用中&#xff0c;安全和高效的用户身份验证机制是至关重要的。本文将深入探讨基于令牌的用户登录会话机制&#xff0c;特别是在使用Redis进行会话管理的情景。通过这一案例实战&#xff0c;我们将了解令牌如何在用户身份验证过程中发挥核心作用&…...

贪吃蛇(c实现)

目录 游戏说明&#xff1a; 第一个是又是封面&#xff0c;第二个为提示信息&#xff0c;第三个是游戏运行界面 游戏效果展示&#xff1a; 游戏代码展示&#xff1a; snack.c test.c snack.h 控制台程序的准备&#xff1a; 控制台程序名字修改&#xff1a; 参考&#xff1a…...

【论文阅读笔记】MapReduce: Simplified Data Processing on Large Clusters

文章目录 1 概念2 编程模型3 实现3.1 MapReduce执行流程3.2 master数据结构3.3 容错机制3.3.1 worker故障3.3.2 master故障3.3.3 出现故障时的语义 3.4 存储位置3.5 任务粒度3.6 备用任务 4 扩展技巧4.1 分区函数4.2 顺序保证4.3 Combiner函数4.4 输入和输出的类型4.5 副作用4.…...

LeetCode题练习与总结:二叉树的中序遍历--94

一、题目描述 给定一个二叉树的根节点 root &#xff0c;返回 它的 中序 遍历 。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[1,3,2]示例 2&#xff1a; 输入&#xff1a;root [] 输出&#xff1a;[]示例 3&#xff1a; 输入&#xff1a;roo…...

云计算十三课

centos安装 点击左上角文件 点击新建虚拟机 点击下一步 点击稍后安装操作系统&#xff0c;下一步 选择Linux&#xff08;l&#xff09;下一步 设置虚拟机名称 点击浏览选择安装位置 新建文件夹设置名称不能为中文&#xff0c;点击确定 点击下一步 设置磁盘大小点击下一步…...

[数据集][目标检测]电力场景安全帽检测数据集VOC+YOLO格式295张2类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;295 标注数量(xml文件个数)&#xff1a;295 标注数量(txt文件个数)&#xff1a;295 标注类别…...

AtCoder Beginner Contest 308 A题 New Scheme

A题&#xff1a;New Scheme 标签&#xff1a;模拟 题意&#xff1a;给定 8 8 8个数的序列&#xff0c;询问这些数是否满足以下条件&#xff1a; 在 100 100 100到 675 675 675之间且能被 25 25 25整除序列是单调非递减的 题解&#xff1a;按题意模拟判断就好了。 代码&#…...

C++编程与朱元墇的关系

学编程和英语没关系&#xff0c;我说这句话&#xff0c;没人会相信&#xff0c;也不会有人说我什么哗众取宠。 我说学编程和朱元墇有关系&#xff0c;一定有人说我放P&#xff0c;其实这个P也和朱元墇有关系&#xff0c; 和朱元墇有什么P关系啊。 真有这P事啊&#xff0c; 朱元…...

0060__设计模式

1. 简单工厂模式( Simple Factory Pattern ) — Graphic Design Patterns 工厂模式 | 菜鸟教程 【设计模式——学习笔记】23种设计模式——建造者模式Builder&#xff08;原理讲解应用场景介绍案例介绍Java代码实现&#xff09;-CSDN博客 设计模式—— 五&#xff1a;迪米特…...

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...

Caliper 配置文件解析:fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件,通常包含以下内容: test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

LOOI机器人的技术实现解析:从手势识别到边缘检测

LOOI机器人作为一款创新的AI硬件产品&#xff0c;通过将智能手机转变为具有情感交互能力的桌面机器人&#xff0c;展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家&#xff0c;我将全面解析LOOI的技术实现架构&#xff0c;特别是其手势识别、物体识别和环境…...

深度学习之模型压缩三驾马车:模型剪枝、模型量化、知识蒸馏

一、引言 在深度学习中&#xff0c;我们训练出的神经网络往往非常庞大&#xff08;比如像 ResNet、YOLOv8、Vision Transformer&#xff09;&#xff0c;虽然精度很高&#xff0c;但“太重”了&#xff0c;运行起来很慢&#xff0c;占用内存大&#xff0c;不适合部署到手机、摄…...

Java求职者面试指南:Spring、Spring Boot、Spring MVC与MyBatis技术解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么&#xff1f;它的作用是什么&#xff1f; Spring框架的核心容器是IoC&#xff08;控制反转&#xff09;容器。它的主要作用是管理对…...

React从基础入门到高级实战:React 实战项目 - 项目五:微前端与模块化架构

React 实战项目&#xff1a;微前端与模块化架构 欢迎来到 React 开发教程专栏 的第 30 篇&#xff01;在前 29 篇文章中&#xff0c;我们从 React 的基础概念逐步深入到高级技巧&#xff0c;涵盖了组件设计、状态管理、路由配置、性能优化和企业级应用等核心内容。这一次&…...

多模态学习路线(2)——DL基础系列

目录 前言 一、归一化 1. Layer Normalization (LN) 2. Batch Normalization (BN) 3. Instance Normalization (IN) 4. Group Normalization (GN) 5. Root Mean Square Normalization&#xff08;RMSNorm&#xff09; 二、激活函数 1. Sigmoid激活函数&#xff08;二分类&…...