【React】js, jsx, tx, tsxの違いは？

概要

React.jsのプロジェクトを触っていると、jsx, tsx, js, ts などのファイルがありますがその相違点を整理してみたいと思います。

js, ts

まずは、基本的なJavaScriptとTypeScriptの違いですね。

jsx, tsx

Reactでは、コンポーネントのコード内にHTMLのようなマークアップを埋め込んで開発しますが、scriptのみのソースと区別が付きます。

jsx

JSXは、JavaScript XMLの略で、JavaScriptコードの中にHTMLライクな構文を使うための拡張です。Reactコンポーネントを書く際に役立ちます。JSX構文はReact.createElementに変換され、DOMに対応するコンポーネントを構築します。

tsx

TSXはTypeScript用のJSXで、TypeScriptでReactコンポーネントを書く場合に使います。TypeScriptの型注釈を使うことで、JSX内の要素やコンポーネントに対して型チェックを行い、さらに安全なコードが書けるようになります。