Reactはinhertanceを使わないで、extensの方案を使ってすべて単独で1つのJSファイルを書くことができて、import

Compossition(i.e.containment、specialization)

包含関係(containment)
コンポーネントがサブアセンブリに何があるかわからないなら、コンテナコンポーネントによくあります.props.childrenを使ってサブアセンブリを伝えたほうがいいです.

function BoxContainer = () =>{

return(



    {props.children}

);

}

function ContentInsideboxContainer = () =>{

return(



    


    Hello!

    

    

    Something inside here!

   



) 

}

特例関係(specialization)
I,e,welcome dialogはdialogの特例です.

function Dialog = () =>{

return(



    {props.title}

    {props.message}

    {props.children}

);

}

function WelcomeDialog = () =>{

return(





This is a h1



);

}

クラスにも使えます.
i.e.

function Dialog = () =>{

return(



    {props.title}

    {props.message}

    {props.children}

);

}

class WelcomeDialog extends[React.Component](http://react.component/){

    consturctor(props){

    super(props);

     this.state={

    login: ‘’,

    }

    }

handleChange = (e) => {this.setState({login:e.target.value});}

render(){

return(





);

}}