好客租房3-React的基本使用
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的基本使用的更多相关文章
- JavaEE在职加薪课好客租房项目实战视频教程
JavaEE在职加薪课好客租房项目实战视频教程课程介绍: 本课程采用SOA架构思想进行设计,基于目前主流后端技术框架SpringBoot.SpringMVC.Mybaits.Dubbo等来 ...
- 好客租房54-props深入(children属性)
children属性 表示组件标签的子节点 当组件标签有子节点是 props就会有该属性 props中的组件可以是任意属性 都是可以渲染的 //导入react import React fro ...
- 好客租房55-props深入(2props校验)
对于组件来说 props是外来的 无法保证使用者传入什么格式的数据 传入的数据格式不对 可能会导致组件内部报错 关键问题:不知道报错的具体原因 1安装包props-types 2导入props-typ ...
- 好客租房56-props深入(3props校验-约束规则)
1常见类型:Array,bool,func,number,object,string 2React:element 3必填项:isRequred 4特定结构的想:shape({}) //导入react ...
- 好客租房57-props深入(4props的默认值)
1给props设置默认值 //导入react import React from 'react' import ReactDOM from 'react-dom' import ...
- 好客租房53-context的使用
app组件要传递给child组件 该如何处理 更好的姿势 跨组件传递数据 Provider 用来提供数据 Consumer用来消费数据 1调用React.createContext() 创建provi ...
- 好客租房48-组件的props(基本使用)
组件是封闭的 要接受外部数据应该通过props来实现 props的作用:接受传递给组件的数据 传递数据:给组件标签添加属性 接收数据:函数组件通过参数props接收数据 类组件通过this.props ...
- 好客租房49-组件的props(特点)
特点 1可以给组件传递任意类型的数据 2props是只读的对象 只能读取属性的值 无法修改对象 3注意:使用类组件时 如果写了构造函数 应该将props传递给super() 否则 无法在构造函数 中获 ...
- 好客租房43-react组件基础综合案例-4获取评论信息
获取评论信息 1使用受控组件方式创建表单 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // ...
- 好客租房44-react组件基础综合案例-5发表评论-1
发表评论 1给按钮绑定点击事件 2在事件处理程序中 通过state获取评论信息 3将评论信息添加到state中 并调用setState()方法更新数据 //导入react import React f ...
随机推荐
- 寄存器、特殊功能寄存器和ram之间的区别联系
存储器在CPU外,一般指硬盘,U盘等可以在切断电源后保存资料的设备,容量一般比较大,缺点是读写速度都很慢,普通的机械硬盘读写速度一般是50MB/S左右. 内存和寄存器就是为了解决存储器读写速度慢而产生 ...
- Numpy怎样将数组读写到文件
Numpy怎样将数组读写到文件 本文档介绍的是Numpy以自己内建二进制的方式,将数组写出到文件,以及从文件加载数组: 如果是文本.表格类数据,一般使用pandas这个类库做加载和处理,不用numpy ...
- 小白上学のcanvas零基础
<canvas> 元素 <canvas> 看起来和 <img> 元素很相像,唯一的不同就是它并没有 src 和 alt 属性.实际上,<canvas> ...
- canvas实现平铺水印
欲实现的水印平铺的效果图如下: 从图上看,应该做到以下几点: 文字在X和Y方向上进行平铺: 文字进行了一定的角度的旋转: 水印作为背景,其z-index位置应位于页面内容底部, 即不能覆盖页面主内容: ...
- 使用前端开发工具包WijmoJS - 创建自定义DropDownTree控件(包含源代码)
概述 最近,有客户向我们请求开发一个前端下拉控件,需求是显示了一个列表,其中包含可由用户单独选择的项目控件,该控件将在下拉列表中显示多选TreeView(树形图). 如今WijmoJS已经实现了该控件 ...
- pip freeze > requirements.txt` 命令输出文件中出现文件路径而非版本号
pip freeze > requirements.txt 命令输出文件中出现文件路径而非版本号 解决办法: pip list --format=freeze > requirements ...
- mysql8.0.13本地安装忘记密码解决办法
之前一直用图形化界面,加上考研期间也没动,竟然把我的数据库密码给忘了,无地自容....... 找了找教程,问题如下: MySQL从低版本向高版本迭代变化的过程,越来越严谨的安全性是其一大特点之一,在版 ...
- JS 实现下拉框回显
JS 实现下拉框回显 学习内容: 需求 总结: 学习内容: 需求 用 JS 实现下拉框回显 实现代码 <!DOCTYPE html> <html lang="en" ...
- Python入门-正则表达式
正则匹配函数 # 需要先导入re模块 import re #字符串,匹配查找 info = "www baidu com" print("=======字符串自带find ...
- 【面试普通人VS高手系列】Fail-safe机制与Fail-fast机制分别有什么作用
前段时间一个小伙伴去面试,遇到这样一个问题. "Fail-safe机制与Fail-fast机制分别有什么作用" 他说他听到这个问题的时候,脑子里满脸问号.那么今天我们来看一下,关于 ...