あいつの日誌β

あいつの日誌です。

突然ですがクイズです。 ES6 の module exports の機能として正しいものを選びなさい。

HTML コーダーさんに React components を storybook に追加してもらう作業をしているのですが module exports がわかりづらいので問題をつくってみました。

問題1

関数毎に export されている場合

export const One = () => (
  <div>one</div>
)

export const Two = () => (
  <div>two</div>
)

以下の記述で呼び出しができる。マルかバツか?

import { One, Two } from '../components/Export'

問題2

export default でオブジェクトに包んで返している

const Three = () => (
  <div>Three</div>
)

const Four = () => (
  <div>Four</div>
)

export default { Three, Four }

以下の記述で呼び出しができる。マルかバツか?

import Default from '../components/ExportDefault'

Default.Three
Default.Four

問題3

export default で関数を返している

const Five = () => (
  <div>Five</div>
)

export default Five

以下の記述で呼び出しができる。マルかバツか?

import Default2 from '../components/ExportDefault2'

Default.Five

答え

以下で調べてみてください

create-react-app practice-es2015-exports && cd $_
getstorybook
mkdir src/components

Export.js

cat << EOS > src/components/Export.js
import React from 'react'
export const One = () => (
  <div>one</div>
)

export const Two = () => (
  <div>two</div>
)
EOS

ExportDefault.js

cat << EOS > src/components/ExportDefault.js
import React from 'react'
const Three = () => (
  <div>Three</div>
)

const Four = () => (
  <div>Four</div>
)

export default { Three, Four }
EOS

ExportDefault2.js

cat << EOS > src/components/ExportDefault2.js
import React from 'react'
const Five = () => (
  <div>Five</div>
)

export default Five
EOS

stories

cat << EOS > src/stories/index.js
import React from 'react';
import { storiesOf, action, linkTo } from '@kadira/storybook';
import { One, Two } from '../components/Export'
import Default from '../components/ExportDefault'
import Default2 from '../components/ExportDefault2'

storiesOf('Answer', module)
  .add('=>', () => (
    <div>
      <One />
      <Two />
      <Default.Three />
      <Default.Four />
      <Default2 />
    </div>
  )); 
EOS