2.1React的安装

安装命令:npm i react react-dom

react 包是核心,提供创建元素,组件等功能

react-dom包提供DOM相关功能等
2.2React的使用
1引入react和react-dom两个js文件

<!-- 第一步 引入模块 -->
        <script src="../node_modules/react/umd/react.development.js"></script>
        <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>

2创建React元素

//第二步创建react元素
        //参数1:元素名称
        //参数2:元素属性
        //参数3:元素的子节点
        const title=React.createElement('h1',null,"Hello geyao")

3渲染react元素到页面中

//第三步渲染react元素
        //参数1:要渲染的react元素
        //参数2:挂载点
        ReactDOM.render(title,document.getElementById("root"))

好客租房3-React的基本使用的更多相关文章

  1. JavaEE在职加薪课好客租房项目实战视频教程

    JavaEE在职加薪课好客租房项目实战视频教程课程介绍:       本课程采用SOA架构思想进行设计,基于目前主流后端技术框架SpringBoot.SpringMVC.Mybaits.Dubbo等来 ...

  2. 好客租房54-props深入(children属性)

    children属性 表示组件标签的子节点 当组件标签有子节点是 props就会有该属性 props中的组件可以是任意属性 都是可以渲染的 //导入react     import React fro ...

  3. 好客租房55-props深入(2props校验)

    对于组件来说 props是外来的 无法保证使用者传入什么格式的数据 传入的数据格式不对 可能会导致组件内部报错 关键问题:不知道报错的具体原因 1安装包props-types 2导入props-typ ...

  4. 好客租房56-props深入(3props校验-约束规则)

    1常见类型:Array,bool,func,number,object,string 2React:element 3必填项:isRequred 4特定结构的想:shape({}) //导入react ...

  5. 好客租房57-props深入(4props的默认值)

    1给props设置默认值 //导入react     import React from 'react'     import ReactDOM from 'react-dom'     import ...

  6. 好客租房53-context的使用

    app组件要传递给child组件 该如何处理 更好的姿势 跨组件传递数据 Provider 用来提供数据 Consumer用来消费数据 1调用React.createContext() 创建provi ...

  7. 好客租房48-组件的props(基本使用)

    组件是封闭的 要接受外部数据应该通过props来实现 props的作用:接受传递给组件的数据 传递数据:给组件标签添加属性 接收数据:函数组件通过参数props接收数据 类组件通过this.props ...

  8. 好客租房49-组件的props(特点)

    特点 1可以给组件传递任意类型的数据 2props是只读的对象 只能读取属性的值 无法修改对象 3注意:使用类组件时 如果写了构造函数 应该将props传递给super() 否则 无法在构造函数 中获 ...

  9. 好客租房43-react组件基础综合案例-4获取评论信息

    获取评论信息 1使用受控组件方式创建表单 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // ...

  10. 好客租房44-react组件基础综合案例-5发表评论-1

    发表评论 1给按钮绑定点击事件 2在事件处理程序中 通过state获取评论信息 3将评论信息添加到state中 并调用setState()方法更新数据 //导入react import React f ...

随机推荐

  1. 好用开源的C#快速开发平台

    NFine 是基于 C# 语言的极速 WEB + ORM 框架,其核心设计目标是开发迅速.代码量少.学习简单.功能强大.轻量级.易扩展,让Web开发更迅速.简单.NFine是一套基于 ASP.NET ...

  2. 《深入理解ES6》笔记——块级作用域绑定(1)

    本章涉及3个知识点,var.let.const,现在让我们了解3个关键字的特性和使用方法. var JavaScript中,我们通常说的作用域是函数作用域,使用var声明的变量,无论是在代码的哪个地方 ...

  3. 理解Android Framework

    一 . Android 系统架构 Android是一个包括操作系统,中间件和关键应用的移动设备软件堆: 作为一个开源的软件,android包含了众多的功能和庞大的代码,他的代码基于linux. 1. ...

  4. Mybatis更新和删除数据

    接上文->Mybatis快速入门<- 1.在UserMapper.xml配置更新和删除 <!-- 更新操作--> <update id="update" ...

  5. 攻防世界 favorite_number

    favorite_number 进入环境得到源码 <?php //php5.5.9 $stuff = $_POST["stuff"]; $array = ['admin', ...

  6. 1.5 万字 + 40 张图解 HTTP 常见面试题

    作者:小林coding 图解计算机基础网站:https://xiaolincoding.com 大家好,我是小林,我最开始写的第一篇图解文章就是这篇: 那时候我也就不到 100 读者,如今这篇阅读都快 ...

  7. 【直播回顾】OpenHarmony知识赋能第四期第三课——I2C驱动开发

    3月24日晚上19点,​知识赋能第四期直播的第三节课<OpenHarmony标准系统HDF框架之I2C驱动开发>​,在OpenHarmony开发者成长计划社群内成功举办. 本期课程,由​拓 ...

  8. go sync.map源码解析

    go中的map是并发不安全的,同时多个协程读取不会出现问题,但是多个协程 同时读写就会出现 fatal error:concurrent map read and map write的错误.通用的解决 ...

  9. 反射解决微信开发加解密illegal key size,不需要修改JDK jar包

    在微信开发时,消息接口时,涉及到消息加密,抛出了 java.security.InvalidKeyException: Illegal key size 的异常,异常堆栈如下: 按照网上的解决方案,都 ...

  10. Android四大组件——Activity——Activity之间通信下

    显式意图:一般是用于应用内组件跳转.(如从ActivityA跳转到ActivityB) 隐式意图:一半用于应用之间的跳转.(如从ActivityA跳转到拨号) 隐式意图跳转到百度: 只需将前面Main ...