(JSX) 是 React 中 javascript 的语法扩展是什么意思

Question

我正在学习React，我开始了解JSX，定义说它是 javascript 的语法扩展。javascript 的语法扩展是什么意思？这是否意味着React已经为现有的 javascript 添加了用于 React 开发的新功能，或者它是否完全是由 开发的新语言React，或者它与 React 是分开的。

Answer 1

解释 JSX 的最简单方法是显示 JSX 页面的示例。以下是 JSX 中的简单“Hello World”示例：

function Title () {
    return <h1>Hello</h1>
}

function Content (text) {
    return <div>{text}</div>
}

ReactDOM.render(<div><Title/><Content/></div>,document.body);

现在，上面的很多代码看起来像 javascript，但它显然是无效的 javascript，对吧？字符串不应该用引号括起来吗"<h1>Hello</h1>"？奇怪的语法是怎么回事{text}？什么是<Content>标签？嗯，这是 jsx。该<h1>元素不是字符串，但会被 jsx 编译器编译为 javascript 对象。JSX 被编译为 javascript，可以发送到浏览器来执行。

使用jsx语言有两种方法：可以使用jsx编译器将其编译为javascript，或者使用浏览器中的jsx解析器在浏览器中解释jsx。第二种方法通常在开发或调试网页时使用。通常，您会预编译用于生产的 jsx，以加快页面加载速度并减少页面需要下载的代码大小。