使用 JSX

简介: JSX 是 React 中用于构建用户界面的语法扩展,外观类似 HTML。通过 `<div>` 包裹多个 HTML 标签,并可为元素添加如 `data-` 前缀的自定义属性。示例代码展示了如何在 React 中使用 JSX 创建包含标题和段落的基本页面结构。

使用 JSX
JSX 看起来类似 HTML ,我们可以看下实例:

const element =

Hello, world

;
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(element);
我们可以在以上代码中嵌套多个 HTML 标签,需要使用一个 div 元素包裹它,实例中的 p 元素添加了自定义属性 data-myattribute,添加自定义属性需要使用 data- 前缀。

React 实例
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(


教程


欢迎学习 React


这是一个很不错的 JavaScript 库!



);
相关文章
|
2月前
|
XML 前端开发 JavaScript
react之了解jsx
react之了解jsx
|
5月前
|
XML 前端开发 JavaScript
JSX是什么
【8月更文挑战第28天】JSX是什么
155 63
|
3月前
|
XML 前端开发 JavaScript
React JSX
React 使用 JSX(一种类似 XML 的 JavaScript 语法扩展)来替代传统 JavaScript 编写 UI。JSX 使代码更简洁、执行更快且类型安全。例如,`&lt;h1&gt;Hello, world!&lt;/h1&gt;` 实际上是创建一个 React 元素,通过 `ReactDOM.render()` 渲染到 DOM。注意,JSX 中使用 `className` 替代 HTML 的 `class` 属性。
|
5月前
|
XML 前端开发 JavaScript
React——JSX语法【三】
React——JSX语法【三】
37 0
|
8月前
|
XML 前端开发 JavaScript
react中JSX的详解
react中JSX的详解
76 2
|
8月前
|
JavaScript
【vue】无法使用 JSX,除非提供了 “--jsx“ 标志
【vue】无法使用 JSX,除非提供了 “--jsx“ 标志
74 0
【vue】无法使用 JSX,除非提供了 “--jsx“ 标志
|
8月前
|
前端开发 JavaScript
什么是jsx
什么是jsx
43 0
|
8月前
|
前端开发 JavaScript 安全
react为什么要使用JSX
react为什么要使用JSX
99 1
|
XML JavaScript 前端开发
react总结之jsx是什么,jsx语法规则
react总结之jsx是什么,jsx语法规则
|
JavaScript 前端开发
在vue中使用jsx
在vue中使用jsx
84 2