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语言中的bool类型 stdbool.h

    C语言的C99标准中已经可以使用bool类型了,但有些小伙伴可能受制于编译器等原因还无法使用,我就从最新版的VS2019 中,找到了stdbool.h这个头文件的定义,其实就是一堆宏的定义,代码如下: ...

  2. IMWebConf 2017 官网彩蛋解谜

    前言 IMWebConf 2017 ←这是官网 然后看到了这个: 所以就试了下,作为一个前端菜鸟,发现通关还挺简单的,不过每个方面的知识都涉及到一点,所以在这里总结一下. 下面进入正题. 第 0 关 ...

  3. leetcode-剑指 Offer II 012. 左右两边子数组的和相等

    题目描述: 给你一个整数数组 nums ,请计算数组的 中心下标 . 数组 中心下标 是数组的一个下标,其左侧所有元素相加的和等于右侧所有元素相加的和. 如果中心下标位于数组最左端,那么左侧数之和视为 ...

  4. 微信小程序加密解密参数

    加密:encodeURIComponent(参数) 解密:decodeURIComponent(参数)

  5. caioj 1002: [视频]实数运算2[水题]

    题意:输入三个数,计算并输出它们的平均值以及三个数的乘积,结果保留2位小数. 题解:简单题不写题解了-- 代码: #include <cstdio> double a, b, c; int ...

  6. 手撕spring核心源码,彻底搞懂spring流程

    引子 十几年前,刚工作不久的程序员还能过着很轻松的日子.记得那时候公司里有些开发和测试的女孩子,经常有问题解决不了的,不管什么领域的问题找到我,我都能帮她们解决.但是那时候我没有主动学习技术的意识,只 ...

  7. 深入理解Kafka核心设计及原理(二):生产者

    转载请注明出处: 2.1Kafka生产者客户端架构 2.2 Kafka 进行消息生产发送代码示例及ProducerRecord对象 kafka进行消息生产发送代码示例: public class Ka ...

  8. 进程的概念及multiprocess模块的使用

    一.进程 进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础.在早期面向进程设计的计算机结构中,进程是程序的基本执行实体:在 ...

  9. Python 连接Mysql数据库执行语句操作

    学习Mysql模块的使用,模块命名的坑,解决SHA加密错误无法连接

  10. Cf #709 Div. 2 B. Restore Modulo 一个只有三千多人过的b题, 妙啊!

    传送门: https://codeforces.com/contest/1484/problem/B 原题 Example input 6 6 1 9 17 6 14 3 3 4 2 2 3 7 3 ...