当前位置:网站首页>jsx定义与规则
jsx定义与规则
2022-08-09 02:55:00 【小叶_01】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>jsx的语法规则</title>
<!-- 引入react引入核心库, 需要按顺序引入 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom, 用于支持react操作DOM -->
<script type='text/javascript' src='../js/react-dom.development.js'></script>
<!-- 引入babel,用于将jsx转为js -->
<script type='text/javascript' src='../js/babel.min.js'></script>
<style>
.title {
background-color: #ffa400;
}
</style>
</head>
<body>
<div id="test"></div>
<script type='text/babel'>
//模拟一些数据
const data = 'Hello, World'
// 1.创建虚拟DOM
const VDOM = (
<div>
<h1 style={
{
color: 'white', fontSize: '16px' }} className="title">{
data}</h1>
<span>hello</span>
<input type="text" />
{
/* 这是一条注释<peiqi>一头猪</peiqi> */}
</div>)
// 2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById('test'))
/** * JSX: 全称JavsScript XML * 是react定义的一种类似于XML的JS扩展语法:JS + XML 本质是 * React.createElement(component, props, ...children)方法的语法糖 * * jsx语法规则: * 1.创建虚拟DOM时,不要写引号; * 2.标签中要混入【js表达式】,要使用{} * 3.标签中样式的类名要用className来指定 * 4.标签中的内联样式要用style={
{color:'white'}},属性名转为小驼峰 * 5.VDOM每次创建只能有一个根标签 * 6.标签必须闭合(单标签加 / 自闭合) * 7.关于标签首字母: * 1) 若首字母小写,那么React就会去寻找与之同名的<html标签> * · 若找见,直接转为html同名元素 * · 若未找见,报错 * 2) 若首字母大写,那么React就会去寻找与之同名的组件(component), * · 若找到就使用 * · 若没有就会报错 * 8.注释时先用{}包起来变成js表达式再注释 */
</script>
</body>
</html>
边栏推荐
猜你喜欢
一款免费的强大办公工具。
带你做接口测试从零到第一条用例 总结
Matlab实现异构交通流
(面试题)面试官为啥总是让我们手撕call、apply、bind?
Chapter 2数据分析
Take you do interface test from zero to the first case summary
数学基础(四)极大似然估计、误差的高斯分布与最小二乘估计的等价性
使用TensorRT对AlphaPose模型进行加速
【图像去噪】基于边缘增强扩散 (cEED) 和 Coherence Enhancing Diffusion (cCED) 滤波器实现图像去噪附matlab代码
数学基础(三)PCA原理与推导
随机推荐
接口的安全性测试,应该从哪些方面入手?
第一部分:和数组相关的问题
SwiftUI * SwiftUI 4.0 全新的导航系统
CI/CD:持续集成/持续部署(难舍难分)
MySQL相关知识 和 数据的存储相关知识
Postman接口测试【官网】最新版本 安装及使用入门教程
全文翻译:Multimodal Neural Networks: RGB-D for Segmantic Segmentation and Object Detection
20220529设计问题:二叉树的序列化与反序列化
【扫雷--1】
iFLYTEK Written Exam Questions Review
接口自动化测试-接口封装思想
【扫雷--2】
C专家编程 第8章 为什么程序员无法分清万圣节和圣诞节 8.10 轻松一下---国际C语言混乱代码大赛
“蔚来杯“2022牛客暑期多校训练营7,签到题CFGJ
旋转霓虹圆圈
普通人如何增加收入
[LeetCode84双周赛] [模拟] 6174. 任务调度器 II,[贪心&数学] 6144. 将数组排序的最少替换次数
SwiftUI * Grid
如何实现canal数据同步
Redis中SDS简单动态字符串