Reactでコンポーネントを多く作っていくと、毎回importするのが大変になってきます。可読性も悪くなるので一つのところに記載しておいて、それを一行でインポートするのが理想的です。もちろんReactにはこのような機能が搭載されています。
エントリーポイントとして使われるのが「index.js」「index.tsx」です。
コンポーネントディレクトリの中に、以下のようにコンポーネントファイルが複数有る場合を想定します。
./components
Component1.js
Component2.js
Component3.js
Component4.js
Component5.js
Component6.js
Component7.js
エン トリーポイントを使わないでApp.jsにインポートするとこのようになります。
|
0 1 2 3 4 5 6 7 8 |
import Components1 from "./Components1" import Components2 from "./Components2" import Components3 from "./Components3" import Components4 from "./Components4" import Components5 from "./Components5" import Components6 from "./Components6" import Components7 from "./Components7" |
毎回、これを書くのは大変です。
index.js(index.tsx)を作成
エントリーポイント用のファイルとして index.tsxを作成します。
|
0 1 2 3 4 5 6 7 8 |
export {default as Components1} from './Components1'; export {default as Components2} from './Components2'; export {default as Components3} from './Components3'; export {default as Components4} from './Components4'; export {default as Components5} from './Components5'; export {default as Components6} from './Components6'; export {default as Components7} from './Components7'; |
index.tsxに記載する場合はimport文ではなく、exportになるので注意です。
App.jsでエントリーポイントを読み込む
|
0 1 2 |
import * from './index'; |
importとfromの間の*（アスタリスク）はすべてのファイルを読み込むという意味になります。
defaultの意味
exportにはdefault exportと別名exportがありますが、defalult exportの場合は名前がdefaultになります。
Components1、Components2…というコンポーネントがあっても全てdefaultという名前になってしまい区別がつきません。よって、「index.js(index.tsx)」に記述するときはexport defaultにエイリアスで名前をつけます。 {default as Components1}の部分がエイリアスによる命名になります。
