組件嵌套

 import React, { Component } from 'react'

 

 class Header extends Component{

   render(){

      return (

        <div>我是Header組件</div>

      )

   } 

 }

 class Banner extends Component{

  render(){

     return (

       <div>我是Banner組件</div>

     )

  } 

}

 class ProductList extends Component{

  render(){

     return (

       <div>

         <ul>

           <li>商品列表1</li>

           <li>商品列表2</li>

           <li>商品列表3</li>

         </ul>

       </div>

     )

  } 

}

 class Main extends Component{

  render(){

     return (

       <div> 

          <Banner />

          <ProductList />

       </div>

     )

  } 

}

class Footer extends Component{

  render(){

     return (

       <div>我是Footer組件</div>

     )

  } 

}

 export default class App extends Component {

    constructor(){

      super();

      this.state = { 

      } 

    }

  

   render() {

    

     return (

       <div> 

          <Header />

          <Main />

          <Footer />

       </div>

     )

   }

 

 }