In this lesson, we will look at Fragments and how they are useful in achieving a cleaner DOM structure without additional empty div elements.

const HeaderFooter = () => {
return (
<div>
<div>
header
</div>
<div>
footer
</div>
</div>
);
}

import React, { Component, Fragment } from 'react';
import {render} from 'react-dom'
const HeaderFooter = () => {
return (
<Fragement>
<div>
header
</div>
<div>
footer
</div>
</Fragment>
);
} export default class App extends Component {
render() {
return (
<div>
<HeaderFooter />
</div>
);
}
} render(<App />, document.getElementById('root'));

[React] Use React Fragments to make your DOM tree cleaner的更多相关文章

  1. 学习React系列(三)——Refs和Dom

    一.适用于以下场景: 1.控制焦点,文本选择,或者媒体控制 2.触发必要的动画 3.整合第三方dom库 二.不要过度使用ref 如果想通过ref来改变state,那么换一种方式-变量提升可能会更好. ...

  2. 前端笔记之React(四)生命周期&Virtual DOM和Diff算法&日历组件开发

    一.React生命周期 一个组件从出生到消亡,在各个阶段React提供给我们调用的接口,就是生命周期. 生命周期这个东西,必须有项目,才知道他们干嘛的. 1.1 Mouting阶段[装载过程] 这个阶 ...

  3. JavaScript 和 React,React用了大量语法糖,让JS编写更方便。

    https://reactjs.org/docs/higher-order-components.htmlhttps://codepen.io/gaearon/pen/WooRWa?editors=0 ...

  4. React学习笔记-1-什么是react,react环境搭建以及第一个react实例

    什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...

  5. 小谈React、React Native、React Web

    React有三个东西,React JS 前端Web框架,React Native 移动终端Hybrid框架,React Web是一个源码转换工具(React Native 转 Web,并之所以特别提出 ...

  6. React的React Native

    React的React Native React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React ...

  7. 重谈react优势——react技术栈回顾

    react刚刚推出的时候,讲react优势搜索结果是几十页. 现在,react已经慢慢退火,该用用react技术栈的已经使用上,填过多少坑,加过多少班,血泪控诉也不下千文. 今天,再谈一遍react优 ...

  8. React 与 React Native 底层共识:React 是什么

    此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法,此小节主要介绍 React 的底层原理与 ...

  9. 一次掌握 React 与 React Native 两个框架

    此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法. 1. 软件开发语言与框架的学习本质 我 ...

随机推荐

  1. Python数学实现二元一次方程

    import cmath import math import sys def get_float(msg,allow_zero): x = None while x is None: try: x ...

  2. Thunder9(迅雷9)去掉右侧浏览器广告的方法

    1.打开文件夹C:\Program Files (x86)\Thunder Network\Thunder9\Program\TBC 2.找到 ThunderBrowser.exe 3.重命名为任意名 ...

  3. Python3 定时访问网页

    本系列文章由 @YhL_Leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50358695 如果我有一组网站,想要定 ...

  4. 数据库联表统计查询 Group by & INNER JOIN

    原数据表 视频信息表  tab_video_info 播放记录表  tab_play_record 需求 统计播放量(已经开始播放)最多的前20个视频: SELECT a.video_id, SUM( ...

  5. explicit的用法

    http://blog.csdn.net/chollima/article/details/3486230

  6. HDU 4314 Contest 2

    可以知道,逃出的人中,最后一个应当是A+B最长的,这是很容易发现的.那么,最选逃出去的必定是A+B最短的.这符合最优. 于是,可以把各小矮人按A+B的和由大到小排序.定义DP[i][j]为i个人中逃出 ...

  7. EMERGENCY! EUREKA MAY BE INCORRECTLY CLAIMING INSTANCES ARE UP WHEN THEY'RE NOT. RENEWALS ARE LESSER

    EMERGENCY! EUREKA MAY BE INCORRECTLY CLAIMING INSTANCES ARE UP WHEN THEY'RE NOT. RENEWALS ARE LESSER ...

  8. PHP编译时错误解决:Don&#39;t know how to define struct flock on this system, set --enable-opcache=no

    在编辑PHP5.6.1时出现了这个错误: Don't know how to define struct flock on this system, set --enable-opcache=no 解 ...

  9. google 搜索不跳中间页

    Array.prototype.slice.call(document.links,0).forEach(function(link){link.onmousedown = null}) 插件总失效 ...

  10. 棋盘覆盖问题python3实现

    在2^k*2^k个方格组成的棋盘中,有一个方格被占用,用下图的4种L型骨牌覆盖全部棋盘上的其余全部方格,不能重叠. 代码例如以下: def chess(tr,tc,pr,pc,size): globa ...