React组件开发嵌套关系详解

   import React,{Component} from "react";
   import Header from "./cnps/Header";
   import Footer from "./cnps/Footer";
   import Main from "./cnps/Main"; 

   export class App extends Component{
   render(){
       return (
           <div className='app'>
               <Header></Header>
               <Main></Main>
               <Footer></Footer>
           </div>
       )
   }
   }
   export default App;

## 上面代码中的import语句，表示从当前目录下的cnps文件夹中导入Header、Footer和Main组件。
其中，Header、Footer和Main都是组件，它们都是以大写字母开头的类，符合React组件的规范。然后我们通过<Header></Header>、<Main></Main>和<Footer></Footer>这样的JSX语法在App组件中使用了这三个子组件。
## Reander方法
React组件中必须有一个render方法，用于输出组件。在上面的代码中，我们通过return ( <div className='app'> ... </div> )返回了一个包含Header、Main和Footer的JSX元素。最后，我们通过export default App;将App组件导出，这样其他文件就可以导入并使用这个组件了。

然后接着我们来看各个组件是如何编写的，也就是说cnps文件夹下的组件是如何实现的。

Header组件

import React,{Component} from "react";

export class Header extends Component {
    render(){
        return (
            <div>Header</div>
        )
    } 
}

export default Header

这个组件非常简单，它只有一个render方法，返回了一个div元素，其内容是"Header"。

Main组件

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

export class Main extends Component {
    render(){
        return (
            <div className="main">
                <div>Main</div>
                <MainBanner></MainBanner>
                <MainProductList></MainProductList>
            </div>
        )
    } 
}

export default Main

这个组件也非常简单，它只有一个render方法，返回了一个div元素，其内容是"Main"。同时，它还导入了两个子组件MainBanner和MainProductList，并在其中使用了它们。

MainBanner组件

import React,{Component} from "react";

export class MainBanner extends Component {
    render(){
        return (
            <div>
                <h2>封装一个轮播图组件</h2>
            </div>
        )
    }
} 

export default MainBanner

它只有一个render方法，返回了一个div元素，其内容是"封装一个轮播图组件"。

MainProductList组件

import React,{Component} from "react";

export class MianProductList extends Component {
    render(){
        return (
            <div>
                <h2>商品列表</h2>
                <ul>
                    <li>商品item01</li>
                    <li>商品item02</li>
                    <li>商品item03</li>
                    <li>商品item04</li>
                </ul>
            </div>
        )
    } 
}

export default MianProductList

注意这里的组件的文件后缀名称是.js，而不是.jsx。只有一个render方法，返回了一个div元素，其内容是"商品列表"和一个ul元素，其中包含了四个li元素。
那么.js文件后缀和.jsx文件后缀有什么区别呢？
在React中，.js文件后缀的组件是纯JavaScript组件，而.jsx文件后缀的组件是带有JSX语法的组件。
JSX是一种JavaScript的语法扩展，它允许我们在JavaScript中使用类似HTML的标签来描述UI。JSX语法可以让我们更方便地编写和维护React组件，并且可以让我们使用更直观的方式来描述UI结构。

Footer组件

import React,{Component} from "react";

export class Footer extends Component {
    render(){
        return (
            <div>Footer</div>
        )
    } 
}

export default Footer

这个组件只有一个render方法，返回了一个div元素，其内容是"Footer"。

综上所述页面将会呈现一个什么样式呢？

如下图所示：

好了，这就是React的简单使用，接下来我们将会学习React的生命周期和组件通信。