Reactでコンポーネントを多く作っていくと、毎回importするのが大変になってきます。可読性も悪くなるので一つのところに記載しておいて、それを一行でインポートするのが理想的です。もちろんReactにはこのような機能が搭載されています。

エントリーポイントとして使われるのが「index.js」「index.tsx」です。

コンポーネントディレクトリの中に、以下のようにコンポーネントファイルが複数有る場合を想定します。
./components
Component1.js
Component2.js
Component3.js
Component4.js
Component5.js
Component6.js
Component7.js

エン トリーポイントを使わないでApp.jsにインポートするとこのようになります。

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を作成します。

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でエントリーポイントを読み込む

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}の部分がエイリアスによる命名になります。