ライトリファクタリング

​

Componentsフォルダにインデックスファイルを追加

• componentsフォルダに移動し、index.tsという名前の新しいファイルを作成します。これはJSXが含まれていない単純なTypeScriptファイルであるため、拡張子は.tsを使用します。

src/
├── components/
│   ├── Header.tsx
│   ├── VideoCard.tsx
|   └── index.ts
└── App.tsx

• index.tsを開き、componentsフォルダのすべてのコンポーネントにimportステートメントを追加します。
• 各コンポーネントを一覧表示するexportステートメントを追加します。

import Header from './Header';
import VideoCard from './VideoCard';

export {
    Header,
    VideoCard
}

​

コンポーネントのインポート

• LandingScreen.tsxで、ヘッダーとビデオカードのインポートステートメントを削除します。
• index.tsからコンポーネントを追加するimportステートメントを1つ追加します。componentsフォルダからのインポートを指定するだけで、index.tsファイルがこのフォルダで読み込まれて名前付きエクスポート（Header、VideoCard）が検索されます。

import React, {useState, useEffect} from 'react';
import {FlatList, StyleSheet, View} from 'react-native';
import {Header, VideoCard} from '../components';

​

Screensフォルダにインデックスファイルを追加

• screensフォルダにindex.tsという名前のファイルを作成します。

src/
├── screens/
│   ├── LandingScreen.tsx
|   └── index.ts
└── App.tsx

• index.tsを開き、screensフォルダのすべてのコンポーネントにimportステートメントを追加します。
• 各コンポーネントを一覧表示するexportステートメントを追加します。

import LandingScreen from './LandingScreen';

export {
    LandingScreen,
}

​

画面のインポート

• App.tsxを開きます。
• LandingScreenのimportステートメントを削除します。
• screensフォルダからLandingScreen画面を追加するimportステートメントを1つ追加します。

import * as React from 'react';
import {LandingScreen} from './screens';

• アプリを再読み込みして、すべてが同じようにレンダリングされることを確認します。