定义虚拟DOM的时候不要加引号
读取来自变量的数据需要加上大括号
虚拟DOM中的类名不是class而是className
虚拟DOM的内联样式style写法应是{{
内联样式的变量名要使用小驼峰命名
虚拟DOM中只能有一个根标签
标签必须闭合，单标签手动加/
虚拟DOM中的标签首字母
- 若标签的首字母为小写字母，则将其转化为HTML标签对应的标签，没有则报错。
- 若标签的首字母为大写字母，React就去渲染对应的组件，若组件没有定义则报错。
React-04：JSX语法规则
2021-11-13
111
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
React-04：JSX语法规则
目录
相关文章
|
3月前
|
前端开发
JavaScript
学习react基础(3)_setState、state、jsx、使用ref的几种形式
本文探讨了React中this.setState和this.state的区别，以及React的核心概念，包括核心库的使用、JSX语法、类与函数组件的区别、事件处理和ref的使用。
89
3
3
|
4月前
|
XML
JavaScript
前端开发
|
1月前
|
JavaScript
前端开发
容器
|
1月前
|
XML
前端开发
JavaScript
|
2月前
|
XML
前端开发
JavaScript
React JSX
React 使用 JSX（一种类似 XML 的 JavaScript 语法扩展）来替代传统 JavaScript 编写 UI。JSX 使代码更简洁、执行更快且类型安全。例如，`<h1>Hello, world!</h1>` 实际上是创建一个 React 元素，通过 `ReactDOM.render()` 渲染到 DOM。注意，JSX 中使用 `className` 替代 HTML 的 `class` 属性。
16
2
2
|
1月前
|
存储
前端开发
JavaScript
|
2月前
|
XML
前端开发
JavaScript
|
4月前
|
前端开发
JavaScript
开发者
|
4月前
|
前端开发
JavaScript
|
4月前
|
XML
前端开发
JavaScript
【React新手必看】JSX，让你的代码舞动起来！
【8月更文挑战第24天】JSX（JavaScript XML）是React开发的核心，作为一种JavaScript语法扩展，它支持在代码中使用类似HTML的标签。JSX并非模板语言，在编译过程中转换为纯JavaScript，使React能高效更新DOM并渲染页面。其优势在于直观性、简洁性和灵活性：简化复杂用户界面构建、减少代码量，并支持HTML标签、React组件及JavaScript变量的表达式插入。基本用法涉及定义组件UI，如创建包含标题和段落的简单组件。
95
0
0
热门文章
最新文章
1
React-Native 爬坑
2
一段探索React自建内部构造的旅程
3
【第55期】一文读懂React组件开发环境
4
【第50期】一文读懂React可视化
5
【React】redux和React-redux
6
React 18 如何提升应用性能
7
react在action中进行路由跳转
8
React 创建 js 与 ts 项目
9
#yyds干货盘点 【React工作记录二十八】重置ant design得样式
10
React全家桶： TodoLis案例_详细拆解
1
使用React Native进行跨平台移动开发
76
2
React Hooks实战：从useState到useContext深度解析
106
3
在回调函数中重新渲染React组件
57
4
React 项目用过什么脚手架（本题是开放性题目）
60
5
React中的DOM diff算法是如何工作的
59
6
react中JSX的详解
72
7
react中的useEffect的使用
58
8
写出易维护的代码｜React开发的设计模式及原则
118
9
【专栏：HTML与CSS前端技术趋势篇】前端框架（React/Vue/Angular）与HTML/CSS的结合使用
111
10
【TypeScript技术专栏】TypeScript与React的完美结合
116