React/import,export

import React from "react";
import Article from "./Article";
//import {Foo, Bar} from "./compornents/FooBar";
import * as FooBar from "./compornents/FooBar"
import Hoge from "./compornents/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})
        }
    }

    componentWillUnmount(){
        document.getElementById("counter").removeEventListener("click", this.countUp)
    }

    togglePublished = () => {
        this.setState({
            isPublished: !this.state.isPublished
        })
    }

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

    render(){
        return (
            div>
                Article
                    title={"1st"}
                    isPublished={this.state.isPublished}
                    toggle={()=>this.togglePublished()}
                    count={this.state.count}
                />
                Article title={"2nd"} />
                Article title={"3rd"} />
                FooBar.Foo />
                FooBar.Bar />
                Hoge />
            /div>
        )
    }
}

export default Blog
	

import React from "react"

export function Foo(){
    return(
        h2>Foooooooooo/h2>
    )
}

export const Bar = () => {
    return(
        h2>Barrrrrrrrrrrrrrr/h2>
    )
}
	

    import React from "react"

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