首先

我将写下JSX的基础知识，专为初次接触JSX文件（包括TSX）且一头雾水的人准备。

JSX的基础语法

导入React库。

请确保在实际的源代码中存在以下描述，JSX 必须导入 react 库。

import React from 'react';

返回的文本中使用了JSX语法。

基本上与HTML的编写方式相同。请在这个认知下阅读源代码。
但也需要注意一些差异之处（例如：在HTML中使用的class，在JSX中应改为className）。

使用驼峰命名法进行编写

由于JavaScript不能读取连字符，因此需要使用驼峰命名法来编写。如果需要修改源代码，请务必小心不要犯错。

｛｝内将成为JavaScript的环境

在｛｝内可以使用JavaScript的语法来编写代码。
可以在｛｝内使用通过const 关键字定义的变量等。

JSX必须始终保持层次结构。

JSX无法将多个标签直接放置在return语句下方。（最顶级组件无法并列。）
* 终端会输出错误信息。
因此，如果return语句下方有多个标签，请用包围，或者使用React.Fragment的省略形式<> </>（空标签）来包围。

return (
 <React.Fragment>
　　<p>サンプル文章</p>
　　<p>サンプル文章</p>
</React.Fragment>
)

这也可以的。

return (
 <>
　　<p>サンプル文章</p>
　　<p>サンプル文章</p>
</>
)

在这边也可以。(我经常看到这个。)

最后

因为仍有许多不明白的事情，所以我会继续学习，如果我有了新的认识，我会再次发布文章！