React.js 学習メモ 第8回

最近Reactの勉強を始めたので、ノート代わりにまとめていきます。
主に自分の学習の流れを振り返りで残す形なので色々、省いてます。
Webエンジニアの諸先輩方からアドバイスやご指摘を頂けたらありがたいです！

importしている理由

import は別ファイルに切り出した JavaScript (module) から変数、関数、クラス等を読み込むための宣言!
変数、関数、クラス等を、別ファイルに切り出し、それを読みこむために import を使う。
そのようなモジュールを読み込むためにimportを利用します。

PHPであればrequireという構文があります。

外部で利用したいクラスに『export』を付けることで『import』が可能となります。

JavaScript におけるモジュールとは、別ファイルに切り分けられた変数、関数、クラス等のこと。これを用いるために import / export を使う。

読み込む側では、import {名前} from 'ファイル名' とする。

//importで外部クラスを読み込む際のコード
import {'module neme'} from 'path to module'

exportしている理由

外部ファイルのクラスの読み込み
アプリケーションが大きくなるとモジュール毎に機能を管理していく必要があります。
出力する側では export をしておく。

exportの方法は２種類

export class Member {} ・・・名前付きexport

出力する側で変数、関数、クラスの前に export をつける。
この場合のファイル名は、Hello のように、拡張子をつけなくていい。

export class Hello extends React.Component {
  render() {
    return <div>Hello</div>;
  }
}

export defualt class {}・・・デフォルトのexport

export default したものに関しては、import するときに {} を使わない。
1 ファイル内で、1 export default だけしかできない。(通常の export は複数できる)

//名前付きexportの場合
import { Hello } from '../'
//デフォルトのexportの場合
import Hello from '../'

そのため、1ファイルに1コンポーネントだけを作る場合には、default を使う場合がスタンダード

export default する際の書き方

// class の定義をすると同時に 
// export default する書き方
export default class Hello extends React.Component {
  render() {
    return <div>Hello</div>;
  }
}

// 一旦 class の定義をしてから
class Hello extends React.Component {
  render() {
    return <div>Hello</div>;
  }
}

// 定義した class を export default するやり方
export default Hello;

振り返り

今回は、import,exportについてまとめました。export defaultと名前付きのexportがどのような物であるのかを明確にできたのは初めよく分からない点だったので良かったです。