【Q&A】ReactJSのComponentをimport,exportする

こんな実装がしたい

Componentを別ファイルに分離して、
必要なときだけimportするスタイル

import React from 'react';
import Comp1 from './comp/comp1';
import Comp2 from './comp/comp2';

class ParentComp extends React.Component {
  render() {
    return (
      <div>
        <Comp1 />
        <Comp2 />
      </div>
    );
  }
}

ReactDom.render(
  <ParentComp />,
  document.getElementById('components')
);

---

Q1. どうやって実装する？

A. Exportする

comp1.js

import React from 'react';

export default class Comp1 extends React.Component {
  render() {
    return (
      <div>
        Comp 1.
      </div>
    );
  }
}

Q2. export default classって何？

A. そのclassがimportされるときにdefaultで呼ばれるってこと

// このとき自動的にdefault classが呼ばれる
import Comp1 from './comp/comp1';

Q3. じゃあdefaultを付けなかったら？

A. どのclassをimportするか指定する必要がある

import {Comp1} from './comp/comp1';

Q4. じゃあ複数のclassを定義して、個別にimportできる？

A. Exactly（そのとおりでございます）

2つのclassを定義して

import React from 'react';

export class Comp1 extends React.Component {
  render() {
    return (...
    );
  }
}

export class Comp2 extends React.Component {
  render() {
    return (...
    );
  }
}

個別にimportできます。

import {Comp2} from './comp/comps';

Q5. 気をつけるべきことは？

A. defaultを付けたclassは、個別に指定するとエラーになるケースがある。

export default class DefComp...
export class NotDefComp...

のようなコードだったとして、

// OK DefCompが呼ばれる
import DefComp from '...';

// OK DefCompとNotDefCompが呼ばれる
import {DefComp, NotDefComp} from '...';

// OK NotDefCompが呼ばれる
import {NotDefComp} from '...';

// NG default指定したclassのみを個別に呼ぶことはできない
import {DefComp} from '...';

となるので注意。
1つのファイルに複数のclassを定義する場合、
default指定とそうじゃないものを混ぜない方が無難だと思われる。