React JSX

原创于 2022-12-30 15:59:19 发布 · 128 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #javascript

React JSX

React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

我们不需要一定使用 JSX，但它有以下优点：

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。

在index.js中：

// 1.引入模块
import React from 'react'
import { createRoot } from 'react-dom/client'

const element = <h1> React JSX</h1>;  
 //这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML。
// 它被称为 JSX， 一种 JavaScript 的语法扩展。

// 2.将组件挂载到指定元素上
const root = createRoot(document.getElementById('root'));
root.render(
    element
)//渲染