React入門 importを整理してみる

この記事について

この記事は、Reactを書き始めた人なら感じるimportの多さを解決することを手助けするために書きました。
関数コンポーネントやApp.jsがこんな風に前半がごちゃついていませんか？

import { useState, useEffect } from 'react';
import Navbar from './components/Navbar';
import Feed from './components/Feed';
import VideoDetail from './components/VideoDetail';
import SearchFeed from './components/SearchFeed';
import ItemsList from './components/ItemsList';
....

const App = () => {
    return(
        <>App</>
    )
};

これをシンプルにしていきましょう！
あまり長々書いても仕方ないので、早速始めます！

完成図

import { useState, useEffect } from 'react';
import { Navbar,Feed, VideoDetail, SearchFeed, ItemsList } from './components'

const App = () => {
    return(
        <>App</>
    )
};

パッと見ても上部importが軽くなり、見やすくなりましたね。
では手順です。

1. componentsフォルダ直下にindex.jsを作成

2. index.jsに以下のように記述する

export { default as Navbar } from "./Navbar";
export { default as Feed } from "./Feed";
export { default as ChannelDetail } from "./ChannelDetail";
export { default as SearchFeed } from "./SearchFeed";
export { default as VideoDetail } from "./VideoDetail";
...

たったこれだけです！
あとは完成図のようにimport側でまとめて呼び出すことができます。

以上、Reactのimport部分を整理してみる。でした！