03_组件之间的嵌套

App.jsx

import React, { Component } from 'react'
import Foot from './cpns/Foot'
import Header from './cpns/Header'
import Main from './cpns/Main'


class App extends Component {
  render() {
    return (
      <div>
        <Header/>
        <Main/>
        <Foot/>
      </div>
    )
  }
}

export default App

main.jsx

import React, { Component } from 'react'
import MainBanner from './MainBanner'
import MainProductList from './MainProductList'

 class Main extends Component {
  render() {
    return (
      <div>
        <div>Main</div>
        <MainBanner/>
        <MainProductList/>
      </div>
    )
  }
}

export default Main


//-----------MainBanner.jsx------------
import React, { Component } from 'react'

 class MainBanner extends Component {
  render() {
    return (
      <div>
        <p>MainBanner轮播图</p>
      </div>
    )
  }
}

export default MainBanner


//------------MainProductList --------------------
import React, { Component } from 'react'

 class MainProductList extends Component {
  render() {
    return (
      <div>
        <ul>
            <li>MainProductList1</li>
            <li>MainProductList2</li>
            <li>MainProductList3</li>
            <li>MainProductList4</li>
        </ul>
      </div>
    )
  }
}

export default MainProductList