react组件在项目中的应用(基础知识)

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

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

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

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

Hello组件通过引用这些组件最后在根元素上渲染出模块。
这只是基础的组件知识,接下来我们逐渐深入。请耐心等待我的系列博客。
本博客升华自:大众点评app视频。
完整的demo见github:https://github.com/JserJser/reactWebApp/tree/master/test
react组件在项目中的应用(基础知识)的更多相关文章
- AE创建组件失败,项目中已存在对esri.arcgis.***的引用
AE创建组件失败,项目中已存在对esri.arcgis.***的引用 解决办法:在解决方案资源管理器的引用中把错误提示中的引用删掉,再创建组件就没问题了.
- ASP.NET中的C#基础知识
ASP.NET中的C#基础知识 说明:asp.net作为一种开发框架现在已经广为应用,其开发的基础除了前端的html.css.JavaScript等后端最重要的语言支持还是C#,下面将主要用到的基础知 ...
- MySQL中索引的基础知识
本文是关于MySQL中索引的基础知识.主要讲了索引的意义与原理.创建与删除的操作.并未涉及到索引的数据结构.高性能策略等. 一.概述 1.索引的意义:用于提高数据库检索数据的效率,提高数据库性能. 数 ...
- day29—JavaScript中DOM的基础知识应用
转行学开发,代码100天——2018-04-14 JavaScript中DOM操作基础知识即对DOM元素进行增删改操作.主要表现与HTML元素的操作,以及对CSS样式的操作.其主要应用知识如下图: 通 ...
- 在 React、Vue项目中使用 SVG
在一些现代的扁平化设计网站,特别是移动端网站,经常会包含许多简单而清晰的小图标,例如网站图标.用户的默认头像.移动端网页首页底部固定的切换栏等,这些小图标一般都是由美工做好,可能会放到精灵图上,前端再 ...
- 教你如何在React及Redux项目中进行服务端渲染
服务端渲染(SSR: Server Side Rendering)在React项目中有着广泛的应用场景 基于React虚拟DOM的特性,在浏览器端和服务端我们可以实现同构(可以使用同一份代码来实现多端 ...
- Android GreenDao 在组件化项目中的一个问题 - 2018年7月5日21:15:14
组件化项目使用GreenDao时注意的事项: 1.要在组件化中的基础库(domain层)创建实体类: 2.如果sycn之后不能生产Dao文件,使用 Android Studio 的Gradle插件重新 ...
- React Native(ios)项目中logo,启动屏设置
由于logo和启动屏尺寸多,react native(ios)中没有命令可以自动生成各种的尺寸,所以可以使用以下办法:在ionic项目中生成(使用命令:ionic resources)后,再粘贴到re ...
- 在react+redux+axios项目中使用async/await
Async/Await Async/Await是尚未正式公布的ES7标准新特性.简而言之,就是让你以同步方法的思维编写异步代码.对于前端,异步任务代码的编写经历了 callback 到现在流行的 Pr ...
随机推荐
- 以太坊remix-ide本地环境搭建
remix-ide简介 remix-ide是一款以太坊官方solisity语言的在线IDE,可用于智能合约的编写.测试与部署,不过某些时候可能是在离线环境下工作或者受限于网速原因,使用在线remi ...
- 针对负载均衡集群中的session解决方案的总结
在日常运维工作中,当给Web站点使用负载均衡之后,必须面临的一个重要问题就是Session的处理办法,无论是PHP.Python.Ruby还是Java语言环境,只要使用服务器保存Session,在做负 ...
- Haproxy+Keepalived高可用环境部署梳理(主主和主从模式)
Nginx.LVS.HAProxy 是目前使用最广泛的三种负载均衡软件,本人都在多个项目中实施过,通常会结合Keepalive做健康检查,实现故障转移的高可用功能. 1)在四层(tcp)实现负载均衡的 ...
- Centos下MooseFS(MFS)分布式存储共享环境部署记录
分布式文件系统(Distributed File System)是指文件系统管理的物理存储资源不一定直接连接在本地节点上,而是通过计算机网络与节点相连,分布式文件系统的实际基于客户机/服务器模式.目前 ...
- Indidual Homework Assignment
一.Pair work的得与失 合作编程在以前的学习过程中也进行过,基本也就是各人负责一部分最后再将之拼凑起来,而这次作业要求的双人合作,要求的并不是这样,而是两人应该在一起进行工作,这样的要求理想情 ...
- VS2015 导航栏 查看每个cpp文件中类以及类成员函数的框框
这个可以查看每个cpp文件中类以及类成员函数的框框叫导航栏! 怎么打开导航栏可以再百度.
- 软件工程项目之摄影App(总结)
软件工程项目之摄影App 心得体会: dyh:这次的项目很难做,本来想在里面添加动画效果的,但是找了很多例子都没看明白,能力还是不足够把,还有一个就是数据库在安卓课程里面刚刚涉及到,所以也还没能做出数 ...
- Daily Scrum- 12/23
Meeting Minutes 与Travis和Zhongqiu讨论了Beta的Feature以及更长期的计划: 讨论了一些使用及设计上的Bug (Feature); 开始了新的开发周期: Burnd ...
- Oracle11.2.0.1 升级Oracle11.2.0.4 后 listener 的端口改变需要处理
1. 因为Oracle采取了异地升级 发现 Oracle的端口号发生了变化: 2. 如果之前的连接还需要用的话 需要禁用 dbhome1 里面的监听 只打开dbhome2的监听 并且修改 监听的端口号 ...
- BMC 安装操作系统以及 驱动的处理
1. 在一个郊区的机房有两台机器需要重装系统. 2. 服务器配置了BMC 还不错... 能够节约很多时间. 3. BMC的配置不算复杂, 就是management 网口插上网线,然后配置一下可以使用的 ...