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. 基于Vue实现关键词实时搜索高亮显示关键词

    最近在做移动real-time-search于实时搜索和关键词高亮显示的功能,通过博客的方式总结一下,同时希望能够帮助到别人~~~ 如果不喜欢看文字的朋友我写了一个demo方便已经上传到了github ...

  2. nginx之配置文件公用抽取

    nginx之配置文件公用抽取 因为某些原因,需要同时部署同一应用两个不同分支的代码,而配置文件存在较大重复,因此有此篇. 最近构建的过程中遇到了一些跟nginx配置相关的问题,记录下. 简单说下构建的 ...

  3. Windows中Nginx配置nginx.conf不生效解决方法

    转:https://lucifer.blog.csdn.net/article/details/83860644?utm_medium=distribute.pc_relevant.none-task ...

  4. Spring Boot-@Value获取值和@ConfigurationProperties获取值的比较

    @Value和@ConfigurationProperties都是用于属性的注入(相当于spring中<bean id=" " class=" "> ...

  5. socket套接字模块及黏包现象

    一.socket套接字模块 socket概念 socket层 理解socket Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.在设计模式中,Socket其实就是一个门面模 ...

  6. 论文翻译:2021_Towards model compression for deep learning based speech enhancement

    论文地址:面向基于深度学习的语音增强模型压缩 论文代码:没开源,鼓励大家去向作者要呀,作者是中国人,在语音增强领域 深耕多年 引用格式:Tan K, Wang D L. Towards model c ...

  7. 基础设施即代码(IAC),Zalando Postgres Operator 简介

    Postgres Operator 在由 Patroni 提供支持的 Kubernetes (K8s) 上提供易于运行的高可用性 PostgreSQL 集群.它仅通过 Postgres 清单 (CRD ...

  8. 学习打卡day12&构建之法阅读笔记第一篇

    今天浅读了<构建之法>的前四章,稍微有一些个人的见解与感受 第一点即是开篇提及到的算法与数据结构这门学科开设的必要,大二上学期学习了这门课程,就我个人目前接触到的层面来看,几乎可以说用不太 ...

  9. HttpRunner的PB序列化工具类解决方案(python3)

    背景 年初的时候团队内落地了HttpRunner3框架,简单介绍下:HttpRunner 是一款由python开发的面向 HTTP(S) 协议的开源通用测试框架,用例脚本为 YAML/JSON 格式, ...

  10. Docker极简入门:使用Docker-Compose 运行网站浏览量统计Demo

    Docker-Compose 是一个可以对 Docker 容器集群的快速编排的工具,能够减轻您心智和手指的负担. 简单的来说 Docker-Compose 就是将你运行多个容器的命令编写到了一起,类似 ...