• 【02】基础知识：React - jsx语法规则

    一、jsx 简介

    全称为JavaScript XML，是 react 定义的一种类似于 XML 的 JS 扩展语法

    JS + XML 本质是 React.createElement(component, props, …children) 方法的语法糖，用来简化创建虚拟 DOM

    写法：var ele = 
    Hello JSX!
    

注意：
它不是字符串，也不是 HTML/XML 标签
它最终产生的就是一个 JS 对象

    • 1
    • 2
    • 3
    • 4
    • 5

    二、jsx 语法规则

    1、定义虚拟 DOM 时，不要写引号

    2、标签中混入JS表达式时要用 {}

    3、样式的类名指定不要用 class，要用 className

    4、内联样式，要用 style={{key:value}} 的形式去写

    5、只有一个根标签

    6、标签必须闭合

    7、标签首字母

    (1)、若小写字母开头，则将该标签转为 html 中同名元素，若 html 中无该标签对应的同名元素，则报错

    (2)、若大写字母开头，react 就去渲染对应的组件，若组件没有定义，则报错

    DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jsx语法规则title>
	<style>
		.title{
			background-color: orange;
			width: 200px;
		}
	style>
head>
<body>
	
	<div id="test">div>

	
	<script type="text/javascript" src="../js/react.development.js">script>
	
	<script type="text/javascript" src="../js/react-dom.development.js">script>
	
	<script type="text/javascript" src="../js/babel.min.js">script>

	<script type="text/babel">
		const myId = 'aTgUiGu'
		const myData = 'HeLlo,rEaCt'

		// 1、创建虚拟DOM
		const VDOM = (
			<div>
				<h2 className="title" id={myId.toLowerCase()}>
					<span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span>
				</h2>
				<h2 className="title" id={myId.toUpperCase()}>
					<span style={{color:'white',fontSize:'29px'}}>{myData.toUpperCase()}</span>
				</h2>
				<input type="text"/>
			</div>
		)
		// 2、渲染虚拟DOM到页面
		ReactDOM.render(VDOM, document.getElementById('test'))
	script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44

    三、jsx 练习

    js 表达式

    一个表达式会产生一个值，可以放在任何一个需要值的地方

    (1)、 a
(2)、 a+b
(3)、demo(1)
(4)、 arr.map() 
(5)、function test () {}   - 函数定义表达式

    • 1
    • 2
    • 3
    • 4
    • 5

    js 语句(代码)

    (1)、if(){}
(2)、for(){}
(3)、switch(){case:xxxx}

    • 1
    • 2
    • 3

    jsx 的 {} 中只能混入 JS表达式

    DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jsx小练习title>
head>
<body>
	
	<div id="test">div>
	
	
	<script type="text/javascript" src="../js/react.development.js">script>
	
	<script type="text/javascript" src="../js/react-dom.development.js">script>
	
	<script type="text/javascript" src="../js/babel.min.js">script>

	<script type="text/babel" >
		// 模拟一些数据（react可以对数组进行遍历，对象不可以）
		const data = ['Angular','React','Vue']
		// 1、创建虚拟DOM
		const VDOM = (
			<div>
				<h1>前端js框架列表</h1>
				<ul>
					{
						data.map((item,index)=>{
							return <li key={index}>{item}</li>
						})
					}
				</ul>
			</div>
		)
		// 2、渲染虚拟DOM到页面
		ReactDOM.render(VDOM, document.getElementById('test'))
	script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
  • 相关阅读:
    IDEA本地将镜像推送到coding制品仓库
    完美十进制数——去年天梯校赛
    Scrapy第六篇：日志记录和try except
    VS+Qt+opencascade三维绘图stp/step/igs/stl格式图形读取显示
    小程序app手机端Python爬虫实战03-uiautomater2项目初始化
    华为认证 | 华为HCIE认证该怎样备考？
    从本地到全球：跨境电商的壮丽崛起
    MySQL varchar详解
    如何将 MATLAB 源代码导出成 Java 的 JAR 包
    连接器公司介绍
  • 原文地址：https://blog.csdn.net/weixin_45559449/article/details/133798940