Reactではindex.jsを読み込むことで動作するが、全てをindex.jsに書いてしまうとindex.jsのコード行数が尋常ではなくなる。

故に、コンポーネントを使用してコードの一部を別ファイル化させる。

コンポーネントの構造

まずsrc内に以下がある。

App.jsxとindex.jsである。

App.jsxはコンポーネントのファイルである。見分けが付きやすいように拡張子を.jsxとしている。index.jsがApp.jsxを読み込む。

コンポーネントの内容とimport

まず、App.jsx。これがコンポーネント。importされる側。

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

続いて、index.js。importする側

// React
import ReactDOM from "react-dom";
import { App } from "./App";

ReactDOM.render(<App /> , document.getElementById("root"));

importする時、拡張子は要らない。import対象の関数を{}で囲む。

結論

これでReactでコンポーネントを使い、機能ごとにファイルを分けることができる。

ちなみに、コンポーネントのパスがsrc/components/App.jsxの場合、importはこうなる。

import { App } from "./components/App";