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

news/2025/3/16 23:33:11/

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.定义一个容器用于存放虚拟dom2.创建虚拟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.ppmy.cn/news/1368019.html

相关文章

Codeforces Round 782 (Div. 2) E. AND-MEX Walk(思维+并查集)

原题链接&#xff1a;E. AND-MEX Walk 题目大意&#xff1a; 给出一张 n n n 个点 m m m 条边的无向图&#xff0c;边带有边权。 我们定义一条路径的价值为&#xff1a; 假设我们经过了 k k k 个点&#xff08;点和边都可重复经过&#xff09;&#xff0c;且按顺序经过的边…

存储过程基本了解

文章目录 介绍存储过程示例1. 目的2. 输入参数3. 输出参数4. 执行逻辑5. 返回值6. 示例用法7. 注意事项 存储过程的关键字有哪些简单实操 介绍 存储过程是一组预编译的SQL语句&#xff0c;以及流程控制语句&#xff0c;封装在数据库服务器中并可以被重复调用。它们可以接收参数…

2024/3/1 贪心

跳跳 跳跳&#xff01; - 洛谷 思路&#xff1a;从一个数组里面依次取出最大值和最小值&#xff0c;然后进行运算 完整代码&#xff1a; #include <bits/stdc.h> #define int long long #define PII std::pair<int,int> signed main() {int n;std::cin >>…

大数据智能化-长视频领域

随着数字化时代的到来&#xff0c;长视频领域的发展迎来了新的机遇和挑战。在这一背景下&#xff0c;大数据智能化技术的应用成为长视频行业提升用户体验、优化运营管理的重要手段之一。本文将从优爱腾3大长视频背景需求出发&#xff0c;分析静态资源CDN、视频文件存储与分发、…

27.HarmonyOS App(JAVA)可复用列表项的ListContainer

可复用列表项的ListContainer 简短的列表可以通过定向布局实现,但是如果列表项非常多,则使用定向布局就不再合适。如需要创建50个列表项的列表,那么用定向布局实现至少需要创建50个以上的组件了。然而,限于设备屏幕大小的限制,绝大多数组件不会显示在屏幕上,却会占据大量的内存…

港大提出GraphEdit, 图数据编辑大模型!

论文链接&#xff1a;https://arxiv.org/abs/2402.15183 代码链接&#xff1a;https://github.com/HKUDS/GraphEdit 摘要 图结构学习&#xff08;Graph Structure Learning, GSL&#xff09;旨在通过生成新的图结构来捕捉图结构数据中节点之间的内在依赖性和交互关系。 图神…

JavaScript定义函数,创建函数实例时的内部原理

1、定义一个函数&#xff0c;JavaScript内部各做了哪些事情 定义一个函数时&#xff0c;JavaScript内部执行了以下步骤&#xff1a; 解析函数声明: 当你定义一个函数时&#xff0c;JavaScript的解析器会首先解析函数声明。这意味着它会检查函数声明的语法是否正确&#xff0c;…

100M服务器能同时容纳多少人访问

100M服务器的并发容纳人数会受到多种因素的影响&#xff0c;这些因素包括单个用户的平均访问流量大小、每个用户的平均访问页面数、并发用户比例、服务器和网络的流量利用率以及服务器自身的处理能力。 点击以下任一云产品链接&#xff0c;跳转后登录&#xff0c;自动享有所有…