JavaScript | import,export

■モジュール化とは
■名前ありexport
■名前なしexport
■モジュール全体のimport
■関数ごとのimport
■別名import
■参考元

■モジュール化とは

・JavaScriptではES2015から採用
・基本的に1ファイル1モジュール

■名前ありexport

・モジュールから複数の関数をexportクラスはエクスポートできない
・export const 関数名　=()=> {}
・export function 関数名(){}

■名前なしexport

・1ファイル1export
・ES6推奨の方法
・アロー関数は宣言後にexport
・クラスをエクスポートできる

■モジュール全体のimport

・名前なし(default)exportしたモジュールをインポートする
・モジュール全体のimport

■関数ごとのimport

・名前つき(default)exportしたモジュールをインポートする
・{}内にimportしたい関数名

■別名import

・別名(エイリアスをつけてインポートできる)
・モジュール全体なら* as name
・モジュール一部なら{A as B}

import React from "react";
import Article from "./Article";
import * as  FooBar from './components/FooBar';
import Hoge from './components/Hoge';

class Blog extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isPublished: false,
      count: 0,
    }
  }

  componentDidMount() {
    document.getElementById("counter").addEventListener("click", this.countUp);
  }

  componentDidUpdate() {
    if (this.state.count >= 10) {
      this.setState({ count: 0 })
    }
  }
    
  togglePublished = () => {
    this.setState({
      isPublished: !this.state.isPublished,
    })
  };

  countUp = () => {
    this.setState({ count: this.state.count + 1 })
  }
    

  render() {
    return (
      <React.Fragment>
        <Article
          title={"reactの使い方"}
          isPublished={this.state.isPublished}
          toggle={() => this.togglePublished()}
          count={this.state.count}
            />
            <FooBar.Foo />
            <FooBar.Bar />
            <Hoge />

      </React.Fragment>
    );
  }
}

export default Blog;

import React from "react";

import Article from "./Article";

import * as FooBar from './components/FooBar';

import Hoge from './components/Hoge';

class Blog extends React.Component {

constructor(props) {

super(props);

this.state = {

isPublished: false,

count: 0,

}

componentDidMount() {

document.getElementById("counter").addEventListener("click", this.countUp);

}

componentDidUpdate() {

if (this.state.count >= 10) {

this.setState({ count: 0 })

}

togglePublished = () => {

this.setState({

isPublished: !this.state.isPublished,

})

};

countUp = () => {

this.setState({ count: this.state.count + 1 })

}

render() {

return (

<React.Fragment>

<Article

title={"reactの使い方"}

isPublished={this.state.isPublished}

toggle={() => this.togglePublished()}

count={this.state.count}

<FooBar.Foo />

<FooBar.Bar />

</React.Fragment>

);

}

export default Blog;

import React from 'react'

export function Foo() {
    return(<h2>F0ooo</h2>)
}

export const Bar = () => {
    return (<h2>Baaaar</h2>)
};

import React from 'react'

export function Foo() {

return(<h2>F0ooo</h2>)

}

export const Bar = () => {

return (<h2>Baaaar</h2>)

};

import React from 'react'

export default class Hoge extends React.Component{
    render() {
        return (
            <h2>hogeeeeee</h2>
        )
     }
}