React　チュートリアル　default import&default export　named import＆named export

2021年6月25日 2021年6月25日

Reactにはコンポーネントの概念がある→1ファイルに1コンポーネント

なんでコンポーネントを分ける必要があるの？

再利用するためなんだよ

React　コンポーネントについてもっと詳しく

分割したコンポーネント(ファイル)はimport、exportのモジュール機能を使います

default exportとnamed exports

まずはJavaScriptの書き方から見てみましょう

JavaScript default export

export default 'World'

world.jsファイルを作成しコードを記述します
hello.jsに読み込みます

import world from './world'

console.log(`Hello ${world} `)  // Hello world

JavaScript named export

上記と同じようにworld.jsからhello.jsに読み込みます

export const world = 'world'

import { world } from './world'

console.log(`Hello ${world} `)  // Hello world

ここまでの書き方は問題ないね！

じゃあ、Reactで書いてみよう！

default importとdefault export

<strong>default export</strong>

export元のファイル　react.jsxを作成

const react = (props) => {
  return (
    <div>
      <p>{props.title}</p>
      <p>{props.subtitle}</p>
    </div>
    );
};
exprot default.react;

default import

import先のファイル　index.jsx

improt react from "./react";

function index() {
  return (
    <react
      title = {"Hello"}
      subtitle = {"World"}
      />
    );
};

import モジュール名 from ファイルパス

default export importは『名前なしexport』『名前なしimport』と呼ばれることがあります
default exportは推奨されているexport方法です
1ファイル1モジュール

propsについての記事

named importとnamed export

defaultは1ファイル1モジュールに対し、namedは1ファイルから複数モジュールをexport、importできます
nemed〜は『名前付き〜』とも呼ばれます

エントリポイント

複数のモジュールって？

export {default as Xxx}from './Xxx'
export {default as Yyy}from './Yyy'
export {default as Aaa}from './Aaa'

このようにexportだけを記述した1つのファイルを作成します(index.js)
この例ではXxx.js、Yyy.js、Aaa.jsのファイルがあるということです

named import

import {Xxx,Yyy} from "./index";
const react = (props) => {
  return (
    <div>
      <Xxx title = {props.title} />
      <Yyy subtitle = {props.subtitle} />
    </div>
    );
};

React　公式ドキュメント