const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>; ReactDOM.render( element, document.getElementById('root') );
jsx语法是个表达式 可以直接声明变量
React工作40:react中的jsx简介
2022-08-09
103
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
React工作40:react中的jsx简介
目录
相关文章
|
4月前
|
JavaScript
前端开发
容器
|
4月前
|
存储
前端开发
JavaScript
|
4月前
|
XML
前端开发
JavaScript
|
5月前
|
XML
前端开发
JavaScript
React JSX
React 使用 JSX（一种类似 XML 的 JavaScript 语法扩展）来替代传统 JavaScript 编写 UI。JSX 使代码更简洁、执行更快且类型安全。例如，`<h1>Hello, world!</h1>` 实际上是创建一个 React 元素，通过 `ReactDOM.render()` 渲染到 DOM。注意，JSX 中使用 `className` 替代 HTML 的 `class` 属性。
27
2
2
|
5月前
|
XML
前端开发
JavaScript
|
6月前
|
前端开发
JavaScript
学习react基础(3)_setState、state、jsx、使用ref的几种形式
本文探讨了React中this.setState和this.state的区别，以及React的核心概念，包括核心库的使用、JSX语法、类与函数组件的区别、事件处理和ref的使用。
107
3
3
|
7月前
|
XML
前端开发
JavaScript
【React新手必看】JSX，让你的代码舞动起来！
【8月更文挑战第24天】JSX（JavaScript XML）是React开发的核心，作为一种JavaScript语法扩展，它支持在代码中使用类似HTML的标签。JSX并非模板语言，在编译过程中转换为纯JavaScript，使React能高效更新DOM并渲染页面。其优势在于直观性、简洁性和灵活性：简化复杂用户界面构建、减少代码量，并支持HTML标签、React组件及JavaScript变量的表达式插入。基本用法涉及定义组件UI，如创建包含标题和段落的简单组件。
135
0
0
|
7月前
|
前端开发
JavaScript
|
7月前
|
前端开发
JavaScript
|
7月前
|
前端开发
JavaScript
中间件
热门文章
最新文章
1
React 音频播放器组件 Audio Player
2
Flame：开源AI设计图转代码模型！生成React组件，精准还原UI+动态交互效果
3
React 音频播放器组件 Audio Player
4
React 音频上传组件 Audio Upload
5
如何在React Router中定义404错误页面组件？
6
在 React 中使用高阶组件时，如何避免命名冲突？
7
React音频播放控制组件开发深度解析
8
React 音频预览组件：Audio Preview
9
React 视频播放控制组件 Video Controls
10
React音频进度条组件开发全攻略
1
如何在React.js中使用Shadcn/UI
80
2
react js 处理表单（ form ）的2个例子
59
3
深入理解React.js的五大优点及其对前端开发的影响
222
4
深入理解React.js的两大优点及其对前端开发的影响
77
5
如何学习React.js？
105
6
【React】React原理面试题集锦
186
7
发现了一款宝藏学习项目，包含了Web全栈的知识体系，JS、Vue、React知识就靠它了！
146
8
【React】Hooks面试题集锦
306
9
react保姆级搭建新项目
152
10
使用React、TypeScript和Ant Design构建现代化前端应用
257