Reactアプリでの、jsファイルの拡張子について

ReactでSPAを制作しているのですが、気になることがありまして。

JSXの構文が書かれたファイルの拡張子なのですが、reactについてのさまざまな解説サイトを見ていると".js"になっていることが多いように思います。正しくは".jsx"のような気がするのですが、".js"であっても問題なく動くので、これはどちらにすべきなのか迷っています。

".js"と".jsx"の違いは何ですか？
もしReactアプリ作成の過程で、このように使い分けているなどありましたら教えていただきたいです。

よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

reactのrenderで用いるhtmlのようなxmlマークアップのことをjsxと呼びます。
.jsxファイルはそのマークアップが書かれているよという意味で拡張子を.jsxにしますが、中身は完全に単なるjavascriptでしかありません。
なので、両方中身はJSであり、分かりやすいように名前をつけていると認識すればよいかと思います。

最近のReactを始めるツール(react-create-app)では、Babelによって.jsも.jsxもreactの文法だと解釈してくれるため、わざわざ.jsxと付ける必要がなくなっています。
付けるつけないは個人の自由ですが、お調べしているとおりに、つけないほうが一般的になっているかと思います

投稿2018/02/26 10:13