【React】05.JSX语法使用上的细节

JSX构建视图的基础知识

JSX:javascript and xml(html)把JS和HTML标签混合在了一起[并不是我们之前玩的字符串标签]

  • 1、vscode如何支持JSX语法[格式化、快捷提示…]
    创建的js文件,把后缀名设置为jsx即可,这样js文件中就可以支持JSX语法
    webpack打包的规则中,也是会对.jsx这种文件,安装JS的方式进行处理的
    在这里插入图片描述

  • 2、在HTML中嵌入"JS表达式",需要基于 “{} 胡子语法”
    JS表达式:执行有结果的

  • 3、在 ReactDOM.createRoot()的时候,不能直接把HTML/BODY作为根容器,需要指定一个额外的盒子(例如:#root)

  • 4、每一个构建的视图,只能有一个"根节点"
    出现多个根节点则报错,
    React给我们提供了一个特殊的节点(标签):React.Fragment 空文档标记标签
    <></>既保证了可以只有一个根节点,又不新增一个HTML层级结构

JS表达式:

变量/值 {text}
数学运算 {1+1} -> 2
判断:三元运算符 { 1===1?‘OK’:'NO} ()
循环:借助于数组的迭代方法处理[ map ]

这不算JS表达式

if/switch

  {if(1===1){}switch(num){...}}

所有命令式编程的循环[for、for/in、for/of、while等]

  {for(let i=0;i>10;i++){}}
import React from "react";// React语法核心
import ReactDOM from "react-dom/client";// 构建HTMl(WebApp)的核心// 获取页面中#root的容器,作为根容器
const root = ReactDOM.createRoot(document.getElementById("root"));
// 基于render方法渲染我们编写的视图,把渲染后的内容,全部插入到#root中进行渲染
root.render(...
);

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

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

相关文章

单词规律问题

给定一种规律 pattern 和一个字符串 s &#xff0c;判断 s 是否遵循相同的规律。 这里的 遵循 指完全匹配&#xff0c;例如&#xff0c; pattern 里的每个字母和字符串 s 中的每个非空单词之间存在着双向连接的对应规律。 示例1: 输入: pattern “abba”, s “dog cat cat d…

可以体现Python语法精妙的十个例子!

文章目录 前言1.for - else2.一颗星*和两颗星**3.三元表达式4.with - as5.列表推导式6.列表索引的各种骚操作7.lambda函数8.yield 以及生成器和迭代器9.装饰器10.巧用断言assertPython技术资源分享1、Python所有方向的学习路线2、学习软件3、精品书籍4、入门学习视频5、实战案例…

“目标值排列匹配“和“背包组合问题“的区别和leetcode例题详解

1 目标值排列匹配 1.1 从目标字符串的角度来看&#xff0c;LC139是一个排列问题&#xff0c;因为最终目标子串的各个字符的顺序是固定的&#xff1f; 当我们从目标字符串 s 的角度来看 LC139 “单词拆分” 问题&#xff0c;确实可以认为它涉及到排列的概念&#xff0c;但这种…

React组件通信:如何优雅地实现组件间的数据传递

在React应用中&#xff0c;组件通信是至关重要的一部分。通过合适的数据传递和交互方式&#xff0c;我们可以构建出更加灵活和高效的前端应用。本文将介绍React组件通信的各种方式&#xff0c;并提供代码实现&#xff0c;帮助你更好地理解和应用这些技术。 1. 使用props进行父子…

acwing算法基础之搜索与图论--prim算法

目录 1 基础知识2 模板3 工程化 1 基础知识 朴素版prim算法的关键步骤&#xff1a; 初始化距离数组dist&#xff0c;将其内的所有元素都设为正无穷大。定义集合S&#xff0c;表示生成树。循环n次&#xff1a;找到不在集合S中且距离集合S最近的结点t&#xff0c;用它去更新剩余…

Java Post请求参数格式为XML

方式一&#xff1a; public static void PostXml1(String url, String xml) throws IOException {OkHttpClient client new OkHttpClient().newBuilder().build();//okhttp3.MediaType mediaType okhttp3.MediaType.parse("application/xml");okhttp3.MediaType m…

MySQL -- mysql connect

MySQL – mysql connect 文章目录 MySQL -- mysql connect一、Connector/C 使用1.环境安装2.尝试链接mysql client 二、MySQL接口1.初始化2.链接数据库3.下发mysql命令4.获取执行结果5.关闭mysql链接6.在C语言中连接MySQL 三、MySQL图形化界面推荐 使用C接口库来进行连接 一、…

【SpringBoot】手写模拟SpringBoot核心流程

依赖包 新建一个工程&#xff0c;包含两个 module&#xff1a; springboot 模块&#xff0c;表示 springboot 源码实现&#xff1b;user 模块&#xff0c;表示业务系统&#xff0c;使用 springboot 模块&#xff1b; 依赖包&#xff1a;Spring、SpringMVC、Tomcat 等&#xff…

oracle中分组函数LISTAGG

前言 Oracle中的 GROUP_CONCAT 函数用于将多行数据合并为一行&#xff0c;并以指定的分隔符分隔各个值。在Oracle中&#xff0c;没有直接的GROUP_CONCAT函数&#xff0c;但可以使用 LISTAGG 函数来实现类似的功能。 如何使用 1、使用SELECT语句选择需要合并的列&#xff0c;…

基于springboot实现致远汽车租赁平台管理系统项目【项目源码+论文说明】

基于springboot实现致远汽车租赁平台系统演示 摘要 首先,论文一开始便是清楚的论述了系统的研究内容。其次,剖析系统需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确系统的需求。然后在明白了系统的需求基础上需要进一步地设计系统,主要…

防火防盗防小人 使用 Jasypt 库来加密配置文件

⚔️ 项目配置信息存放在哪&#xff1f; 在日常开发工作中&#xff0c;我们经常需要使用到各种敏感配置&#xff0c;如数据库密码、各厂商的 SecretId、SecretKey 等敏感信息。 通常情况下&#xff0c;我们会将这些敏感信息明文放到配置文件中&#xff0c;或者放到配置中心中。…

pytorch DistributedDataParallel 分布式训练踩坑记录

目录 一、几个比较常见的概念&#xff1a;二、踩坑记录2.1 dist.init_process_group初始化2.2 spawn启动&#xff08;rank怎么来的&#xff09;2.3 loss backward2.4 model cuda设置2.5 数据加载 一、几个比较常见的概念&#xff1a; rank: 多机多卡时代表某一台机器&#xff…

浅谈Elasticsearch监控和日志分析

Elasticsearch 监控和日志分析 Elasticsearch 是一个分布式搜索引擎&#xff0c;它提供了全文搜索、结构化搜索、分析等功能。在实际应用中&#xff0c;监控和日志分析是确保 Elasticsearch 集群稳定、高效运行的关键。本文将详细讲解 Elasticsearch 的监控和日志分析功能&…

rabbitmq 交换机相关实例代码

1.扇形交换机 定义扇形交换机和队列 package com.macro.mall.portal.config;import org.springframework.amqp.core.Binding; import org.springframework.amqp.core.BindingBuilder; import org.springframework.amqp.core.FanoutExchange; import org.springframework.amqp.…

macOS Sonoma 14.2beta2(23C5041e)发布(附黑白苹果镜像地址)

系统介绍 黑果魏叔11 月 10 日消息&#xff0c;今日向 Mac 电脑用户推送了 macOS 14.2 开发者预览版 Beta 2 更新&#xff08;内部版本号&#xff1a;23C5041e&#xff09;&#xff0c;本次更新距离上次发布隔了 14 天。 macOS Sonoma 14.2 添加了 Music 收藏夹播放列表&…

2000-2022年上市公司数字化转型同群效应数据

2000-2022年上市公司数字化转型同群效应数据 1、时间&#xff1a;2000-2022年 2、指标&#xff1a;股票代码、年份、行业代码、行政区划代码、数字化转型程度-A、数字化转型程度-B、同行业同群-数字化转型程度-A_均值、同行业同群-数字化转型程度-A_中位数、同省份同群-数字化…

专业128分总分390+上岸中山大学884信号与系统电通院考研经验分享

专业课884 信号系统 过年期间开始收集报考信息&#xff0c;找到了好几个上岸学姐和学长&#xff0c;都非常热情&#xff0c;把考研的准备&#xff0c;复习过程中得与失&#xff0c;都一一和我分享&#xff0c;非常感谢。得知这两年专业课难度提高很多&#xff0c;果断参加了学长…

transformers安装避坑

1.4 下载rust编辑器 看到这里你肯定会疑惑了&#xff0c;我们不是要用python的吗&#xff1f; 这个我也不知道&#xff0c;你下了就对了&#xff0c;不然后面的transformers无法安装 因为是windows到官网选择推荐的下载方式https://www.rust-lang.org/tools/install。 执行文…

写一下关于部署项目到服务器的心得(以及遇到的难处)

首先要买个服务器(本人的是以下这个) 这里我买的是宝塔面板的,没有宝塔面板的也可以自行安装 点击登录会去到以下页面 在这个界面依次执行下面命令会看到账号和密码和宝塔面板内外网地址 sudo -s bt 14点击地址就可以跳转宝塔对应的内外网页面 然后使用上述命令提供的账号密…

RK3568平台 查看内存的基本命令

一.free命令 free命令显示系统使用和空闲的内存情况&#xff0c;包括物理内存、交互区内存(swap)和内核缓冲区内存。共享内存将被忽略。 Mem 行(第二行)是内存的使用情况。 Swap 行(第三行)是交换空间的使用情况。 total 列显示系统总的可用物理内存和交换空间大小。 used 列显…