React.jsを書き始めてよく見るimportとexportですが、良く分からず使っていると後々困りそうだなーと思ってきたのでハックに残しておきます。

Export編

モジュールの返し方は以下の3つがあるらしい。
1. named export: 複数の値をobjectで返す
2. default export: 単一値を返す
3. named exportと, default exportの混在: 単一値と複数値の両方を返す

1. named export: 複数の値をobjectで返す

Objectで返すというところがポイント。

const foo = "abc"
function hoge() { return  "ABC" };
export { foo, hoge }

2. default export: 単一値を返す

よく見るやつです。ファイル内で一回しか使えない。

export default class MyClass { // 名前のあるクラス
  foo() { return "FOO" }
}

// ReactNativeでよく見る
export default class SampleApp extends Component {
  render() {
    return (
　　　　//Component
　　);
  }
}

//もちろん以下のような単一値も返せる
export default {id:1}

3. named exportと, default exportの混在: 単一値と複数値の両方を返す

1,2のようなコードが一つのjsファイルに混在しているイメージ。返り値は以下のようになる。

{
  "default": 単一値, // default exportされた値
  複数値1の名前: 複数値1, // named exportされた値1
  複数値2の名前: 複数値2, // named exportされた値2
  __esModule: true
}

Import編

var hoge = require(‘./hoge.js’); とかもう時代遅れです。今回は、ReactNativeで必ず見る以下のコードから解説です。

import { AppRegistry, StyleSheet, Text, View } from 'react-native';
import React, { Component } from 'react';

モジュールの返し方が3つあるので、それに対応してimportの仕方も３つあります。

1. named exportされたモジュールのimport

書式
(1) import {　識別子１、識別子２ } from “モジュール指定(path)”
(2) import { * as X } from “モジュール指定”　//複数値をすべてXという名で取り込む

import { AppRegistry, StyleSheet, Text, View } from 'react-native';

識別子は何でも良いわけではなくexportの際のを用いる。
また、node_module内のモジュールは「./」とかで始めなくていいらしい。

2. default exportされたモジュールのimport

書式
import 単一値を受けとる識別子 from “モジュール指定(path)”

import App from './src/app'

識別子は何でもよい。新しい名前を設定できる。

3. default & named exportされたモジュールのimport

書式
import 単一値を受けとる識別子, { 識別子１, 識別子２ }　from “モジュール指定(path)”

import React, { Component } from 'react';

参考

超が付くほどわかりやすかったので、是非一読をおススメします。
ES6のモジュールを解説してみた