这意味着(JSX)是对React中的javascript的语法扩展。

Question

我正在学习React，我开始了解JSX，定义说它是javascript的语法扩展。对javascript的语法扩展意味着什么。这是否意味着React为现有的javascript添加了新的特性以进行react开发，还是完全是由React开发的一种新语言，还是与react分离的。

Answer 1

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

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以供生产，以加快页面加载速度，并减少页面需要下载的代码大小。

Answer 2

顾名思义，JSX是对Javascript的扩展。但是它所暗示的是，在一天结束时，当您查看一个完整的JSX文件时，您会意识到它只是普通的Javascript加HTML。

现在你可能在想，Javascript里面的HTML？！

是的，你会意识到web浏览器只能理解HTML、CSS和Javascript这一事实。但是要开发出令人惊叹的、功能丰富的、好看的web应用程序，您最终将使用相应的Javascript & CSS编写巨大的HTML文件。从长远来看，调试和维护它将是一场噩梦。这就是开发人员做出反应的地方，他们试图让事情变得更简单，并决定给你(开发人员)更多的控制和权力。

换句话说，在创建React应用程序时，JSX为您提供了更多的权力和控制。根据我的经验，这需要一些时间才能适应奇怪的语法，但是当你感到舒服的时候，你会感觉到手中的力量，并爱上它。