Reactモジュールのimport, export

目次

1. 名前付きexport, import
2. 名前なしexport, import

1. 名前付きexport, import

1-1. export

１モジュールから複数の関数をexportできる。
なお、クラスはexportできない。
以下の例は、２つの関数を定義している。
Title.tsx

//関数１
export const Title1 = () => {
    return (
        <h1>Title1</h1>
    );
}

//関数２
export function Title2()  {
    return (
        <h1>Title2</h1>
    );
}

1-2. import

次に、名前付きexportされたモジュールをimportする。
{ }内にimportしたい関数名を指定する。複数指定する場合は「 , 」を付与する。

import {関数名1, 関数名2} from "パス";

それでは、上記の例をimportする。
App.tsx

import {Title1, Title2} from "./conpornents/Title";

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

export default App;

1-3. 一括importで別名指定

一括でimportしたい場合、別名を指定することで対応できます。

import * as 別名 from "パス"

App.tsx

import * as TitleName from "./conpornents/Title";

const App = () => {
  return (
    <div>
      {TitleName.Title1()}
      {TitleName.Title2()}
    </div>
  );
};

export default App;

2. 名前なしexport, import

2-1. export

名前付きの場合は、関数ごとにexport, importできたが、名前なしは１ファイル単位とする。
クラスをexportできる。

Title1.tsx

const Title1 = () => {
    return (
        <h1>Title1名前なし</h1>
    )
}

export default Title1;

Title2.tsx

export default function Title2() {
    return (
        <h1>Title2名前なし</h1>
    );
}

2-2. import

上記の例をimportする。
App.tsx

import Title1 from './conpornents/Title1';
import Title2 from './conpornents/Title2';

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

export default App;