React:2種類のexports&imports（Modules)の使い方 :ファイルごと全体=default export vs. 一部のみ=named export

2019年08月13日 2019年08月14日

Reactで使う2種類のexports&importsについてまとめます。JSファイル全体をexportするdefault exportの使い方とimportする方法、JSファイルの一部をexportするnamed exportの使い方とimportする方法について詳しくまとめます。

Default export でファイル全体をexportする＆App.jsにimportする方法

person.jsというファイルがあるとします。このファイル全体をexportするには、export default personと最後に書きます。

const person = {
 name: 'Max'
}

export default person

沢山のReact componentsをまとめた、App.jsにimportする場合の記載方法です。

import person from './person.js'
imoprt prs from './person.js'

JSファイルの中の一部をexportするNamed exportの使い方についてです。例えば、utility.jsというファイルがあるとします。一部だけexportしたい場合はconstの前にexportと書きます。

export const clean = {} => {...}

export const baseData = 10;

上記２つのconstで作成したbaseData とcleanをApp.jsにimportする場合のコーディングは以下のとおりです。

import { baseData } from './utility.js';
import { clean } from './utility.js';

今まで２つのReactアプリケーションを作成してきて、あやふやになっていた部分だったので、今日の講座でクリアになったのが良かったです。

ファイル全体をimportするならimportの後はファイル名、ファイルの中の一部分をimportするならimportの後は{ importしたい部分}というのが違いですね。

参照（Mozilla）⇒import

Section 1: Getting Started

Section2: Refreshing Next Generation Javascript (Optional)

11~15 ★このブログは14.Exports and Importsについてです。

【私も学習中のUdemy講座の公式HPはこちら⇒】世界最大級のオンライン学習サイトUdemy

この記事を書いた人

プログラミング（主にJavascript）の学習記録とお役立ち情報をシェアしています