React入门之React_使用es5和es6语法渲染和添加class

news2024/11/25 8:23:47

React入门

//react的核心库
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.development.js"></script>
//react操作dom的核心库,类似于jquery
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.development.js"></script>
//用来解析es6语法
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

es5 写法

基础语法

 必须要有根元素进行包裹

//创建元素

var element = React.createElement('li',{},'hello')  //节点,节点属性,标签内容

//var element = React.createElement('li',null,'hello') 

//渲染元素

ReactDOM.render(element,document.getElementById('root1'))

//床架年组建,使用extends继承

React.component

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        react渲染三步走
        1.定义一个容器用于存放虚拟dom
        2.创建虚拟dom元素
        3.把虚拟dom元素渲染到页面上
     -->
     <div id="root1"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script>
    //es5方法创建
    //创建元素
    var element = React.createElement('li',{},'hello')
    //渲染元素
    ReactDOM.render(element,document.getElementById('root1'))
//
</script>
</html>

 多层嵌套的关系

注意如果在react中添加类名不能写class要写className,同时不能再同一个容器里渲染多个虚拟dom,必须要有根元素进行包裹 

//如果有多层嵌套的关系

var li1 = React.createElement('li',null,'11111')

var li2 = React.createElement('li',{class:'list-li'},'22222')

var _ul = React.createElement('ul',{id:'list'},li1,li2)

ReactDOM.render(_ul,document.getElementById('root2'))

es6写法 

注意在使用es6语法时候script必须表明type为text/balel

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <div id="root1"></div>
     <script type="text/babel">
         //es6方法创建,
         ReactDOM.render(
             <ul>
                 <li className='lili'>111</li>
                 <li>222</li>
             </ul> ,
             document.getElementById('root1')
         )
     </script>
     <div id="root2"></div>
     <script type="text/babel">
        //es6方法创建,jsx简单写法
        let root2=document.getElementById('root2')
       let div= <div className='hello'>
                <h1>hello react</h1>
            </div>
        ReactDOM.render(div,root2)
    </script>
</body>
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.development.js"></script>
<!-- 用于解析babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</html>

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

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

相关文章

【知识分享】配电网重构知识及matlab实现

目录 一、理论分析 二、程序介绍 1.基本环矩阵M的matlab代码 2.智能算法重构代码 三、下载链接 配网重构中&#xff0c;很重要的一个约束条件为配网应随时保持开环、辐射的状态&#xff1a; 配电网系统是属于闭环设计但是开环运行的系统&#xff0c;因此&#xff0c;在开关…

考取ORACLE数据库OCP的必要性 Oracle数据库

OCP证书是什么&#xff1f; OCP&#xff0c;全称Oracle Certified Professional&#xff0c;是Oracle公司的Oracle数据库DBA&#xff08;Database Administrator&#xff0c;数据库管理员)认证课程。这是Oracle公司针对数据库管理领域设立的一项认证课程&#xff0c;旨在评估和…

Java ZooKeeper-RocketMQ 面试题

Java ZooKeeper-RocketMQ 面试题 前言1、谈谈你对ZooKeeper的理解 &#xff1f;2、Zookeeper的工作原理&#xff08;Zab协议&#xff09;3、谈谈你对分布式锁的理解&#xff0c;以及分布式锁的实现&#xff1f;4、 zookeeper 是如何保证事务的顺序一致性的&#xff1f;5、 zook…

Unity 向量计算、欧拉角与四元数转换、输出文本、告警、错误、修改时间、定时器、路径、

using System.Collections; using System.Collections.Generic; using UnityEngine;public class c2 : MonoBehaviour {// 定时器float t1 0;void Start(){// 向量Vector3 v1 new Vector3(0, 0, 2);Vector3 v2 new Vector3(0, 0, 3);// 计算两个向量的夹角Debug.Log(Vector3…

Netty的InboundHandler 和OutboundHandler

一、InboundHandler 和OutboundHandler的区别 在Netty中&#xff0c;"inbound"表示来自外部来源&#xff08;如网络连接&#xff09;的数据&#xff0c;而"outbound"则表示从应用程序发送到外部目标&#xff08;如网络连接或其他服务&#xff09;的数据。…

如何使用 CrewAI 构建协作型 AI Agents

一、前言 AI Agents 的开发是当前软件创新领域的热点。随着大语言模型 (LLM) 的不断进步&#xff0c;预计 AI 智能体与现有软件系统的融合将出现爆发式增长。借助 AI 智能体&#xff0c;我们可以通过一些简单的语音或手势命令&#xff0c;就能完成以往需要手动操作应用程序才能…

QT绘图

QPainter paintEvent是Qt中一个非常重要的函数&#xff0c;它是QWidget类的一个事件处理函数&#xff0c;用于处理小部件的绘制事件。当Qt认为小部件需要重绘时&#xff08;例如&#xff0c;窗口首次出现时&#xff0c;大小改变时&#xff0c;或者调用了小部件的update()方法时…

JVM(5)

垃圾回收相关 垃圾收集器 警告:纯八股文! 如果说上面我们讲的收集算法是内存回收的方法论,那么垃圾收集器就是内存回收的具体体现. 垃圾收集器的作用:垃圾收集器是为了保证程序能够正常,持久运行的一种技术,它是将程序中不用的死亡对象也就是垃圾对象进行清除,从而保证新的…

【 C++ 】空间配置器

1、什么是空间配置器 空间配置器&#xff0c;顾名思义就是为各个容器高效的管理空间(空间的申请与回收)的&#xff0c;在默默地工作。虽然在常规使用STL时&#xff0c;可能用不到它&#xff0c;但站在学习研究的角度&#xff0c;学习它的实现原理对我们有很大的帮助。 2、为什…

P4715 【深基16.例1】淘汰赛题解

题目 有&#xff08;n≤7&#xff09;个国家参加世界杯决赛圈且进入淘汰赛环节。已经知道各个国家的能力值&#xff0c;且都不相等。能力值高的国家和能力值低的国家踢比赛时高者获胜。1号国家和2号国家踢一场比赛&#xff0c;胜者晋级。3号国家和4号国家也踢一场&#xff0c;…

zephyr学习

zephyr内核对象学习 定时器 类似linux的定时器&#xff0c; 可以分别设置第一次到期时间和后续的周期触发时间&#xff0c; 可以注册到期回调和停止回调 还有一个计数状态&#xff0c;用于标记timer到期了多少次 duration&#xff1a;设定timer第一次到期的时间。 period: …

SpringBoot整合JdbcTemplate

✅作者简介:大家好,我是Leo,热爱Java后端开发者,一个想要与大家共同进步的男人😉😉 🍎个人主页:Leo的博客 💞当前专栏: 循序渐进学SpringBoot ✨特色专栏: MySQL学习 🥭本文内容:SpringBoot整合JdbcTemplate 📚个人知识库: Leo知识库,欢迎大家访问 目录 …

超详细的 pytest 钩子函数 之初始钩子和引导钩子来啦

前几篇文章介绍了 pytest 点的基本使用&#xff0c;学完前面几篇的内容基本上就可以满足工作中编写用例和进行自动化测试的需求。从这篇文章开始会陆续给大家介绍 pytest 中的钩子函数&#xff0c;插件开发等等。 仔细去看过 pytest 文档的小伙伴&#xff0c;应该都有发现 pyt…

递归与回溯2

一&#xff1a;递归分治 什么是递归&#xff1f; 函数自己调用自己通过函数体来进行循环以自相似的方法重复进行的过程 递归的过程&#xff1a;先自顶向下找到递归出口&#xff0c;在自底向上回到最初的递归位置 推导路径未知的题目只能用递归不能用循环 比如求多叉树的节点&…

NOC2023软件创意编程(学而思赛道)python小高组初赛真题

软件创意编程 一、参赛范围 1.参赛组别:小学低年级组(1-3 年级)、小学高年级组(4-6 年级)、初中组。 2.参赛人数:1 人。 3.指导教师:1 人(可空缺)。 4.每人限参加 1 个赛项。 组别确定:以地方教育行政主管部门(教委、教育厅、教育局) 认定的选手所属学段为准。 二、…

基于原子变量的内存模型优化

概述 线程间同步通常的实现方法通常为互斥锁&#xff0c;但互斥锁对性能造成了影响&#xff0c;C11引入了内存模型&#xff0c;定义了STD::memory_order枚举&#xff0c;结合原子性操作&#xff0c;实现无锁线程数据同步。 关于memory_order memory_order_relaxed&#xff1…

电子电气架构——车载以太网协议栈

电子电气架构——车载以太网协议栈 我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 没有人关注你。也无需有人关注你。你必须承认自己的价值&#xff0c…

【Java文件报错】Cannot resolve symbol ‘println‘ 【及解决】

一、问题描述 在Java源代码文件中&#xff0c;使用 System.out.println() 语句进行输出&#xff0c;编译器提示“Cannot resolve symbol ‘println’&#xff08;无法解释关键字&#xff09;”, println飘红。报错代码及报错截图如下所示。 import java.io.*;public class St…

【JavaSE】时间类相关API以及使用

目录 时间类相关API 1.Date类 2.SimpleDateFormat类 3.Calendar类 4.JDK8-时区&#xff0c;时间和格式化 5.JDK8-日历和工具类 时间类相关API 以下内容是通过观看黑马java的常见API视频总结加笔记&#xff0c;其中有JDK7以及以前的时间类&#xff0c;包括&#xff1a;Date&…

前后端分离Vue+nodejs酒店公寓客房预订管理系统udr7l-java-php-django-springboot

本系统的设计与实现共包含13个表:分别是关于我们信息表&#xff0c;配置文件信息表&#xff0c;公寓信息评论表信息表&#xff0c;公寓入住信息表&#xff0c;公寓退房信息表&#xff0c;公寓信息信息表&#xff0c;公寓预订信息表&#xff0c;系统公告信息表&#xff0c;收藏表…