好客租房21-react组件的两种创建方式(函数组件)

简介: 好客租房21-react组件的两种创建方式(函数组件)

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"))
运行结果

image.png

相关文章
|
1月前
|
前端开发
如何编写React函数组件
【8月更文挑战第17天】如何编写React函数组件
14 2
|
20天前
|
前端开发 JavaScript
React 中的函数组件和类组件
【8月更文挑战第31天】
32 0
|
27天前
|
前端开发 JavaScript 开发者
React组件入门秘籍:函数组件、类组件、高阶组件,一文让你彻底解锁!
【8月更文挑战第24天】React是一款广受好评的JavaScript库,其核心特色在于组件化开发模式。React组件作为应用程序的基础单元,不仅能够处理特定业务逻辑还能实现界面展示。本文深入浅出地介绍了React组件的概念、创建方式及其应用场景。
37 0
|
2月前
|
缓存
react18【系列实用教程】useCallback —— 缓存函数 (2024最新版)
react18【系列实用教程】useCallback —— 缓存函数 (2024最新版)
30 0
|
2月前
|
前端开发 JavaScript
react18【系列实用教程】useState —— 声明响应式变量(2024最新版)含useState 的异步更新机制,更新的合并,函数传参获取更新值,不同版本异步更新差异,更新对象和数组
react18【系列实用教程】useState —— 声明响应式变量(2024最新版)含useState 的异步更新机制,更新的合并,函数传参获取更新值,不同版本异步更新差异,更新对象和数组
100 0
|
3月前
|
前端开发 JavaScript API
react挂载后函数
react挂载后函数
24 1
|
4月前
|
前端开发 JavaScript
在React中,如何通过事件处理函数来管理按钮的点击行为?
【5月更文挑战第28天】在React中,如何通过事件处理函数来管理按钮的点击行为?
43 1
|
4月前
|
前端开发 JavaScript
在React中,如何通过事件处理函数来管理输入框的获取和失去焦点行为?
【5月更文挑战第28天】在React中,如何通过事件处理函数来管理输入框的获取和失去焦点行为?
164 1
|
4月前
|
前端开发 JavaScript 开发者
掌握React中的useEffect:函数组件中的魔法钩子
掌握React中的useEffect:函数组件中的魔法钩子
|
4月前
|
存储 前端开发 安全
深入理解React中的useState:函数组件状态管理的利器
深入理解React中的useState:函数组件状态管理的利器

热门文章

最新文章