コンポーネントのインポート
このプロジェクトのセットアップでは、webpackのおかげでES6モジュールをサポートしています。
require()とmodule.exportsも引き続き使用できますが、代わりにimportとexportを使用することをお勧めします。
例
Button.js
import React, { Component } from 'react';
class Button extends Component {
render() {
// ...
}
}
export default Button; // Don’t forget to use export default!
DangerButton.js
import React, { Component } from 'react';
import Button from './Button'; // Import a component from another file
class DangerButton extends Component {
render() {
return <Button color="red" />;
}
}
export default DangerButton;
デフォルトエクスポートと名前付きエクスポートの違いに注意してください。これはよくある間違いの原因です。
モジュールが1つのもの（たとえば、コンポーネント）のみをエクスポートする場合は、デフォルトのインポートとエクスポートを使用することをお勧めします。これは、export default Buttonとimport Button from './Button'を使用したときに得られるものです。
名前付きエクスポートは、複数の関数をエクスポートするユーティリティモジュールに役立ちます。モジュールは、最大で1つのデフォルトエクスポートと、好きなだけ多くの名前付きエクスポートを持つことができます。
ES6モジュールについてさらに学ぶ
絶対インポート
絶対パスを使用してモジュールをインポートするようにアプリケーションを設定できます。これは、プロジェクトのルートにjsconfig.jsonまたはtsconfig.jsonファイルを構成することで実行できます。プロジェクトでTypeScriptを使用している場合は、すでにtsconfig.jsonファイルがあるはずです。
以下は、JavaScriptプロジェクトのjsconfig.jsonファイルの例です。ファイルが存在しない場合は、作成できます。
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
TypeScriptを使用している場合は、プロジェクトのtsconfig.jsonファイルのcompilerOptions内のbaseUrl設定を構成できます。
これで、絶対インポートをサポートするようにプロジェクトを設定したので、src/components/Button.jsにあるモジュールをインポートする場合は、次のようにモジュールをインポートできます。
import Button from 'components/Button';
これらの構成ファイルの詳細については、jsconfig.jsonのリファレンスとtsconfig.jsonのリファレンスのドキュメントを参照してください。