ReactJS-.JS対.JSX

で作業しているときに非常に混乱することがありReactます。

インターネットで利用できるサンプルはたくさんあり.jsますが、reactでファイルを使用しますが、他の多くのファイルを使用してい.jsxます。

私は.jsxファイルについて読みましたが、私の理解では、ファイル内にhtmlタグを書き込むことができますjavascript。しかし、同じことを.jsファイルに書き込むこともできます。

したがって、これら2つの拡張の間の実際の違いは何です.jsと.jsx？

ファイル拡張子に関しては何もありません。あなたのbundler / transpiler / whateverは、どのタイプのファイル内容が存在するかを解決します。

ただし.js、.jsxファイルタイプまたはファイルタイプに何を入れるかを決定する際には、他にもいくつかの考慮事項があります。JSXは標準のJavaScriptではないので、JavaScriptが「プレーン」でないものは、それ自体の拡張機能、つまり.jsxJSXや.tsTypeScript などに含める必要があると主張できます。

あります良いの議論はここでは、読み取りのために利用可能

ほとんどの場合、それはトランスパイラー/バンドラーの必要性のみであり、JSXファイルではなくJSで動作するように構成されていない可能性があります。したがって、JSXの代わりにJSファイルを使用する必要があります。

また、reactはJavaScriptのライブラリにすぎないため、JSXとJSのどちらを選択しても違いはありません。それらは完全に交換可能です！

場合によっては、コードが強調表示されるため、ユーザー/開発者がJSではなくJSXを選択することもありますが、新しいエディターのほとんどは、JSファイルで反応構文を正しく表示しています。

JSXタグ（<Component/>）は明らかに標準のJavaScriptではなく<script>、たとえば裸のタグ内に配置した場合、特別な意味はありません。したがって、それらを含むすべてのReactファイルはJSXであり、JSではありません。

慣例として、Reactコンポーネントが含まれていても、Reactアプリケーションのエントリポイントは通常、.jsxではなく.jsです。.jsxの場合もあります。その他のJSXファイルには通常、.jsx拡張子が付いています。

いずれにせよ、あいまいさがあるのは、トランスパイラーが実際にJSXである限り、あらゆる種類のファイルを喜んでムンチングするため、最終的には拡張子はそれほど問題にならないためです。

私のアドバイスは、それについて心配しないでください。

JSXタグが標準のJavaScriptではないという前述の事実に加えて、.jsx拡張子を使用する理由は、それでもEmmetがエディターで機能するためです。たとえば、ul> liなどのhtmlコードを拡張する便利なプラグイン

<ul>
  <li></li>
</ul>

他に言及されてJSXいるように、標準のJavascript拡張ではありません。.js残りのコンポーネントに基づいてアプリケーションのエントリポイントに名前を付けることをお勧めします.jsx。残りのコンポーネントについては、を使用できます。

.JSXすべてのコンポーネントのファイル名に使用する重要な理由があります。実際、大量のコードを含む大規模なプロジェクトでは、Reactのすべてのコンポーネントに.jsx拡張子を設定すると、プロジェクト全体のさまざまなJavaScriptファイル（ヘルパー、ミドルウェアなど）に移動するのが簡単になります。 Reactコンポーネントであり、他のタイプのJavaScriptファイルではありません。

JSXは標準のJavaScriptではなく、Airbnbスタイルガイド「eslint」に基づいてこのパターンを検討できます

// filename: MyComponent.js
function MyComponent() {
  return <div />;
}

警告として、ファイルにMyComponent.jsxという名前を付けた場合はパスしますが、eslintルールを編集した場合は、ここでスタイルガイドを確認できます