【React】index.jsxにしたらエラーになる

React

Reactをインストールして、いざ開発スタート!…となった矢先のあるあるエラーです。

エラー詳細

もともとあったファイル「index.js」を「index.jsx」に変更したら、以下のようなエラーが出て何も表示されなくなりました。

解決方法

このエラーを解決する方法は2種類あります。どちらかを行えばOKです。

プログラムを再起動する

まず、コマンド上で「Ctrl + C」で一旦プログラムを止めます。

そして改めて再スタートします。以下のコマンドを押下します。

npm start

ファイルの拡張子を「js」に戻す

「jsx」に変えてエラーになったのなら、「js」に戻せば元に戻ります。

エラーになる理由

Reactが起動した時点で、「index.js」を探す仕組みになっているからです。最初の起動時点で「index.jsx」になっていれば「index.jsx」を探す形になります。

おまけ:そもそも「.jsx」に変更する必要はあるのか

結論から述べると、変更する必要はありません。Reactを使ったjsファイルを区別するために「.jsx」という拡張子をつけていました。

しかし、最近のトレンドとしては、Reactでも「.js」で作ることが多いです。なので、変更しないといけないわけではないと認識していただければと思います。

タイトルとURLをコピーしました