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 ...
随机推荐
- Linux下DNS服务(Bind9)之Web管理利器-NamedManager部署说明
NamedManager 是一个基于Web的DNS管理系统,可用来添加.调整和删除DNS的zones/records数据.它使用Bind作为底层DNS服务,提供一个现代Ajax的Web界面,支持 IP ...
- open-falcon ---安装Dashboard时候报错"SSLError: The read operation timed out"
在部署open-falcon环境过程中,安装Dashboard时候报错"SSLError: The read operation timed out".如下: [root@open ...
- Python基础系列讲解——random模块随机数的生成
随机数参与的应用场景大家一定不会陌生,比如密码加盐时会在原密码上关联一串随机数,蒙特卡洛算法会通过随机数采样等等.Python内置的random模块提供了生成随机数的方法,使用这些方法时需要导入ran ...
- bash处理一条命令的步骤
Shell执行一条命令步骤 参考链接: <Learning the bash Shell, 3rd Edition -- 7.3. Command-Line Processing> &l ...
- 《Linux内核设计与分析》第十七章读书笔记
设备与模块 关于设备驱动和设备管理,四种内核成分. 设备类型:在所有Unix 系统中为了统一普通设备的操作所采用的分类. 模块: Linux 内核中用于按需加载和卸载目标码的机制. 内核对象:内核数据 ...
- Eclipse Creating a New Runnable JAR File 清理工作空间下的配置文件
D:\workspacegit\.metadata\.plugins\org.eclipse.debug.core\.launches 相关文件存在这里.
- [转帖]从 2G 到 5G,手机上网话语权的三次改变
从 2G 到 5G,手机上网话语权的三次改变 美国第一大电信运营商 Verizon 公司的 CEO Hans Vestberg 手持一部 iPad,屏幕上显示俯瞰地面的飞行地图.400 多公里外的洛杉 ...
- [kali] 安装完kali之后允许远程ssh
1. 安装kali 2.控制台登录kali 3. 修改 /etc/ssh/sshd_config 4.将 permitrootlogin 前面的注释去掉,并且后面改为yes 5.然后重启ssd服务 / ...
- python 安装influxdb-python
一.Linux下安装 1.yum install -y git 2.安装pip,参考:https://app.yinxiang.com/shard/s41/sh/0338ba85-5443-453f- ...
- 构建squid代理服务器
基本概念 本文使用squid代理服务 软件介绍:百度百科 作为应用层的代理服务软件,Squid主要提供缓存加速.应用层过滤控制的功能: 工作机制:缓存网页对象,减少重复请求(HTTP代理的缓存加速对象 ...