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

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

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

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

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

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

react组件在项目中的应用(基础知识)的更多相关文章

  1. AE创建组件失败,项目中已存在对esri.arcgis.***的引用

    AE创建组件失败,项目中已存在对esri.arcgis.***的引用 解决办法:在解决方案资源管理器的引用中把错误提示中的引用删掉,再创建组件就没问题了.

  2. ASP.NET中的C#基础知识

    ASP.NET中的C#基础知识 说明:asp.net作为一种开发框架现在已经广为应用,其开发的基础除了前端的html.css.JavaScript等后端最重要的语言支持还是C#,下面将主要用到的基础知 ...

  3. MySQL中索引的基础知识

    本文是关于MySQL中索引的基础知识.主要讲了索引的意义与原理.创建与删除的操作.并未涉及到索引的数据结构.高性能策略等. 一.概述 1.索引的意义:用于提高数据库检索数据的效率,提高数据库性能. 数 ...

  4. day29—JavaScript中DOM的基础知识应用

    转行学开发,代码100天——2018-04-14 JavaScript中DOM操作基础知识即对DOM元素进行增删改操作.主要表现与HTML元素的操作,以及对CSS样式的操作.其主要应用知识如下图: 通 ...

  5. 在 React、Vue项目中使用 SVG

    在一些现代的扁平化设计网站,特别是移动端网站,经常会包含许多简单而清晰的小图标,例如网站图标.用户的默认头像.移动端网页首页底部固定的切换栏等,这些小图标一般都是由美工做好,可能会放到精灵图上,前端再 ...

  6. 教你如何在React及Redux项目中进行服务端渲染

    服务端渲染(SSR: Server Side Rendering)在React项目中有着广泛的应用场景 基于React虚拟DOM的特性,在浏览器端和服务端我们可以实现同构(可以使用同一份代码来实现多端 ...

  7. Android GreenDao 在组件化项目中的一个问题 - 2018年7月5日21:15:14

    组件化项目使用GreenDao时注意的事项: 1.要在组件化中的基础库(domain层)创建实体类: 2.如果sycn之后不能生产Dao文件,使用 Android Studio 的Gradle插件重新 ...

  8. React Native(ios)项目中logo,启动屏设置

    由于logo和启动屏尺寸多,react native(ios)中没有命令可以自动生成各种的尺寸,所以可以使用以下办法:在ionic项目中生成(使用命令:ionic resources)后,再粘贴到re ...

  9. 在react+redux+axios项目中使用async/await

    Async/Await Async/Await是尚未正式公布的ES7标准新特性.简而言之,就是让你以同步方法的思维编写异步代码.对于前端,异步任务代码的编写经历了 callback 到现在流行的 Pr ...

随机推荐

  1. 理解Liang-Barsky裁剪算法的算法原理

    0.补充知识向量点积:结果等于0, 两向量垂直; 结果大于0, 两向量夹角小于90度; 结果小于0, 两向量夹角大于90度.直线的参数方程:(x1, y1)和(x2, y2)两点确定的直线, 其参数方 ...

  2. mongo java 踩坑记

    为什么会有这么多坑 1.  Java会把 id:String = "合法ObjectId"  好心好意的 转为  _id:ObjectId 类型. 2. 为了避免第1点, 我定义了 ...

  3. Swarm基于多主机容器网络 - overlay networks 梳理

    前面介绍了Docker管理工具-Swarm部署记录,下面重点说下Swarm基于多主机容器通信的覆盖网络 在Docker版本1.12之后swarm模式原生支持覆盖网络(overlay networks) ...

  4. Linux内核分析——进程的切换和系统的一般执行过程

    进程的切换和系统的一般执行过程 一.进程切换的关键代码switch_to分析 (一)进程调度与进程调度的时机分析 1.不同类型的进程有不同的调度需求 第一种分类: (1)I/O-bound:频繁进行I ...

  5. 基于SSH的高校网上选课系统的质量属性的实现

    我对于基于SSH的高校网上选课系统的质量属性的实现是从可用性.性能.安全性.可维护性.易用性五个方面进行的实现. 可用性方面: 实现方式:(1)当系统试图超出限制范围来进行课程查询或选课时必须进行错误 ...

  6. Unigine mesh顶点坐标转换精度问题

    本问题虽然与Unigine引擎相关,但对其他精度问题也有参考价值. 问题: 将精细模型顶点从自身参考系的相对坐标(类似4378.95020,4561.00000,31.3887463) 转到椭球面世界 ...

  7. 广商博客沖刺第一天(new ver):

    項目名稱:廣商博客 沖刺二天傳送門 此次Sprint的目标:全部sprint任務完成 时间:1星期左右 每日立会 Daily Standup Meeting: 1#A3008 晚上8点开始,大概1小时 ...

  8. iOS 模拟器“安装”app

    1.首先在模拟器上运行我们的app程序 2.执行以下命令: ditto -ck --sequesterRsrc --keepParent `ls - -d -t ~/Library/Developer ...

  9. .NET 使用 RabbitMQ 图文简介

    前言 最近项目要使用RabbitMQ,园里里面已经有很多优秀的文章,Rabbitmq官网也有.net实例.这里我尝试下图文并茂之形式记录下使用的过程. 安装 RabbitMQ是建立在erlang OT ...

  10. PAT 1012 数字分类

    https://pintia.cn/problem-sets/994805260223102976/problems/994805311146147840 给定一系列正整数,请按要求对数字进行分类,并 ...