1使用函数创建组件

函数组件:使用js的函数或者箭头函数创建的组件

约定1:函数组件名称必须以 开头

约定2:函数组件必须有返回值 表示该组件的结构

如果返回值为null 表示不渲染任何内容

2.1使用函数创建组件

1渲染函数组件:用函数名作为组件标签名

2组件标签可以是单标签也可以是多标签

//导入react
    import React from "react"
     
    import ReactDOM from "react-dom"
     
    //约定1:函数组件名称必须以大写字母开头
    //约定2:函数组件必须有返回值 表示该组件的结构
    function Hello(){
        return (
            <div>Hello geyao</div>
        )
    }
     
    ReactDOM.render(<Hello/>,document.getElementById("root"))

运行结果

好客租房21-react组件的两种创建方式(函数组件)的更多相关文章

  1. 好客租房22-react组件的两种创建方式(类组件)

    2.2使用类创建组件 类组件:使用ES6的class创建的组件 约定1:类组件必须以大写字母开头 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性 约定3:组件必 ...

  2. 好客租房23-react组件的两种创建方式(抽离为独立js)

    2.3抽离为单独组件 组件作为一个单独的个体,一般把每个组件放在单独的js中文件中 1创建hello.js 2在hello.js中导入React 3创建组件(函数或者类) hello.js子组件 // ...

  3. Django-多对多关系的三种创建方式-forms组件使用-cookie与session-08

    目录 表模型类多对多关系的三种创建方式 django forms 组件 登录功能手写推理过程 整段代码可以放过来 forms 组件使用 forms 后端定义规则并校验结果 forms 前端渲染标签组件 ...

  4. django----多对多三种创建方式 form组件

    目录 多对多三种创建方式 全自动 全手动 半自动 form组件 基本使用 form_obj 及 is_valid() 前端渲染方式 取消前端自动校验 正则校验 钩子函数(Hook方法) cleaned ...

  5. 【转载】 Java中String类型的两种创建方式

    本文转载自 https://www.cnblogs.com/fguozhu/articles/2661055.html Java中String是一个特殊的包装类数据有两种创建形式: String s ...

  6. String变量的两种创建方式

    在java中,有两种创建String类型变量的方式: String str01="abc";//第一种方式 String str02=new String("abc&qu ...

  7. Android中Fragment的两种创建方式

    fragment是Activity中用户界面的一个行为或者是一部分.你可以在一个单独的Activity上把多个Fragment组合成为一个多区域的UI,并且可以在多个Activity中再使用.你可以认 ...

  8. cocos2dx 帧动画的两种创建方式

    看了好几天cocos2dx的帧动画,现在才有点眉目,为了高效期间我们一般会用到 精灵帧缓存(CCSpriteFrameCache) 和动画缓存(CCAnimationCache) .大体的操作步骤: ...

  9. java多线程总结一:线程的两种创建方式及优劣比较

    1.通过实现Runnable接口线程创建 (1).定义一个类实现Runnable接口,重写接口中的run()方法.在run()方法中加入具体的任务代码或处理逻辑. (2).创建Runnable接口实现 ...

随机推荐

  1. 单例模式应用 | Shared_ptr引用计数管理器

    在我们模拟设计 shared_ptr 智能指针时发现,不同类型的 Shared_ptr 不能使用同一个引用计数管理器,这显然会造成内存上的浪费.因此我们考虑将其设计为单例模式使其所有的 Shared_ ...

  2. Creating a File View

    创建文件视图 为了映射一个文件的数据到进程的虚拟内存,你必须创建一个文件的视图.MapViewofFile和MapViewofFileEX使用CreateFileMapping返回的句柄,在虚拟地址空 ...

  3. 基于HTML5的拓扑图编辑器(2)

    继续来说编辑器的需求, 前面介绍了拖拽创建节点.以及连线的方法,并加入到了其后的 Qunee 类库,实际应用中需要更多功能,Qunee 的拓扑图编辑器也在逐渐完善,一方面增加多种编辑交互,一方面提供数 ...

  4. Chrome 53 Beta一些有意思的改动

    原文链接: http://blog.chromium.org/2016...译者:Icarus邮箱:xdlrt0111@163.com 如果没有特殊说明的话,以下都是应用在Android,Chrome ...

  5. 小小标签,强大功能——深藏不露的 <input>

    <input> 虽只是一个看似简单的 HTML 表单元素,但它这么一个单一的元素,就有多达 30 多个属性(attribute),相信无论你是个小菜鸟还是像我一样写了 15 年 HTML ...

  6. canvas动画—圆形扩散、运动轨迹

    介绍 在ECharts中看到过这种圆形扩散效果,类似css3,刚好项目中想把它用上,but我又不想引入整个echart.js文件,更重要的是想弄明白它的原理,所以自己动手.在这篇文章中我们就来分析实现 ...

  7. video标签学习使用

    video标签学习使用 学习前的理解 video是HTML5中的新标签,可以用来播放视频.对于不同的浏览器支持的视频格式不一样,但是具体浏览器支持的类型并不清楚. 支持的类型 视频的格式分为编码格式和 ...

  8. 在Nginx或Tengine服务器上安装证书

    阿里云SSL证书服务支持下载证书并安装到Nginx.Tengine服务器上,本文介绍了证书安装的具体操作. 前提条件 已准备远程登录工具,例如PuTTY或者Xshell. 背景信息 本文档以CentO ...

  9. 安装支付宝小程序的 mini-ali-ui

    1.打开文件的根目录 2.使用npm init -y初始化 3. npm install mini-ali-ui --save 安装 4.在json文件里面定义 例如使用loading加载中的组件 完 ...

  10. Codeforces Round #133 (Div. 2), A.【据图推公式】 B.【思维+简单dfs】

    Problem - 216A - Codeforces Problem - B - Codeforces A Tiling with Hexagons 题意: 给出a b c ,求里面有多少个六边形 ...