【React⑦】import・export基本

モジュール活用

export

機能分割して切り分けたモジュールを他のコードで読み込み使えるようにする

名前付きexport

1モジュールから複数の関数をexportできる
classはexportできない

//1ファイルで複数の関数を宣言、export
export function Foo(){
    return(<h1>Foo</h1>)
}
//アロー関数の場合
export const Bar = () => {
    return(<h1>Bar</h1>)
}

名前なしexport

1ファイル1モジュールexport(ES6推奨)
アロー関数宣言後export
classもexport可能

export default function Foo(){
    return(<h1>Foo</h1>)
}

//アロー関数の場合
const Bar = () => {
    return(<h1>Bar</h1>)
}
export default Bar

//Fuga classを継承したHogeをexport
export default class Hoge extends Fuga{
    render(){
      return(<h1>Fuga</h1>)
    }
}

import

モジュール全体import

名前なしexportしたモジュールを読み込む
npmで管理しているパッケージReactをimportする時もこれ

import React from 'React';
import Article from "./Article";

関数ごとにimport

名前付きexportされたモジュールをimport
{}にimportしたい関数名を書く

import { Foo,Bar } from './FooBar';

別名でimport

import React from 'React';
//モジュール全体の場合
import * as MyArticle from './Article';
import { Foo as MyFoo } from './FooBar';

複数の関数をexportしているファイルを全部一気にimportして、関数をピリオドで指定することもできる

import * as FooBar from './FooBar';

render(){
    return(
        <>
            <FooBar.Foo />
            <FooBar.Bar /> 
        </>
    )
}