JSX記法是什么？

JSX是”JavaScript XML”的简称，是一种用于实现React的JavaScript扩展语法。
JSX允许我们在JavaScript中以与HTML几乎相同的方式来编写代码。因此，我们可以更轻松地描述UI，并更容易理解它们的视觉表现。

以生成React组件为例，比较使用JSX语法和不使用JSX语法产生相同内容的情况。

React.createElemet(
	'button',
	{className: 'btn'},
	'Click me!'
}

使用JSX语法的情况下

<button className={'btn'}>
	Click me!
</button>

如果使用JSX语法，可以像编写HTML一样直接描述UI，使得描述过程更直观。

JSX和JS文件扩展名的区别是什么？

在React中，可以同时加载.js扩展名的文件和.jsx扩展名的文件。通常情况下，推荐使用jsx扩展名来包含JSX代码，而对于不包含JSX代码的情况则推荐使用js扩展名。

整理各自的角色如下：
JS文件 → 实现React组件逻辑，
JSX文件 → 进行标记和UI构建。

通过这一方式，可以实现组件逻辑与视图的分离，从而提高重用性和可维护性。

JSX 如何加载？

当JSX代码包含在JavaScript文件中时，浏览器无法执行它。因此，需要使用转译器进行转换。

トランスパイラ是一种可以将新式JavaScript语法转换为旧式语法的工具。它的开发使用新式语法，但在执行时使用旧式语法，这样就可以在任何浏览器上无问题地执行。

如果不使用JSX，通过使用’react.createElement’来创建React元素。在使用JSX的程序中，不需要使用’react.createElement’，而是通过转译将其转换为传统的’react.createElement’表达式来生成React元素。

在React中经常使用的转译器是” Babel”。有人对Babel进行了另外的总结。

关于实际的写作方式

我已经在另一篇文章中总结了实际组件的写作方式。