react组件在项目中的应用（基础知识）

上图我是定义了5个模块，全部都渲染在一个组件里面。可以先看看我的代码结构

我将Hello文件夹下的index.jsx文件作为父组件，最后渲染在根组件中。

那我们怎么输出这个Hello组件呢？要达到上图的效果。
我们知道要有头部，要有中间的按钮，要有轮播模块，要有列表模块，还要有推荐模块。他们之间是互不影响的。
那我们怎么在Hello组件中体现这个组件的独立性呢？像header组件可以作为公共头部，供所有页面引用，我们
将其放在components中，像这种纯展示数据的组件我们可以叫其木偶组件。
这是header组件的文件

看我最上面的页面其实可了解到，像轮播列表这些其实是与数据的渲染相关的，也就是可以与后端交互
请求数据的模块，也就是我们放在
中的组件，它可以定义数据定义规则，最后展示在Hello组件中，像这样的就是智能组件。我们可以看下图

Hello组件通过引用这些组件最后在根元素上渲染出模块。
这只是基础的组件知识，接下来我们逐渐深入。请耐心等待我的系列博客。
本博客升华自：大众点评app视频。

完整的demo见github：https://github.com/JserJser/reactWebApp/tree/master/test

转载于:https://www.cnblogs.com/smart-girl/p/9682551.html