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. 8.5_线性控制器设计_轨迹跟踪(Follow a Desired Path)

    平衡点时所有的导数都为0 simulink中建立状态方程模型

  2. UP9616移动电源快充案例

    第一版的UP9616快充(地址在此 ),从选料到线路板的布局走线都还算不错,实现了当初定下的设计目标,但也有一点小小的遗憾,就是在输出滤波电容这里有点随便了,为了弥补这个遗憾,秉着工程师的" ...

  3. 彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index

    前言 最近,在项目中遇到一个关于CSS中元素z-index属性的问题,具体问题不太好描述,总结起来就是当给元素和父元素色设置position属性和z-index相关属性后,页面上渲染的元素层级结果和我 ...

  4. python-成绩转换

    本题要求编写程序将一个百分制成绩转换为五分制成绩.转换规则: 大于等于90分为A: 小于90且大于等于80为B: 小于80且大于等于70为C: 小于70且大于等于60为D: 小于60为E. 输入样例: ...

  5. 【Android开发】【布局】自定义底部菜单栏(中间图标凸起)

    我的Demo 参考: http://blog.csdn.net/xh870189248/article/details/75808341 http://blog.csdn.net/xh87018924 ...

  6. Uncaught TypeError: document.getElementsById is not a function

    今天博主终于开始攻关javascript(俗称js)了,不过要注意了,它和java可是一丁点关系都没有,就像老婆饼和老婆一样. 下面就让我们来讨论一下博主这次犯下的低级错误吧 一.背景(解决方法在文末 ...

  7. 从零开始的 Hexo 生活(一)入门安装篇

    目录 前言 一.Hexo 是什么 1.什么是静态网站 2.为什么选择静态网站 3.为什么选择 Hexo 二.Markdown 是什么 1.为什么要学 Markdown 2.怎么学 Markdown 三 ...

  8. MySQL安装配置教程(超级详细)

    一. 下载MySQL Mysql官网下载地址:https://downloads.mysql.com/archives/installer/ 1. 选择要安装的版本,本篇文章选择的是5.7.31版本, ...

  9. JavaSE常用类之File类

    File类 只用于表示文件或目录的信息,不能对文件内容进行访问. java.io.File类∶代表文件和目录.在开发中,读取文件.生成文件.删除文件.修改文件的属性时经常会用到本类. File类不能访 ...

  10. 帝国CMS灵动标签调用相关文章

    标题包含关键字①.比较粗糙的匹配,可能不太精确:title like '%$navinfor[keyboard]%' ②.精确的匹配,比较消耗资源:title regexp '(^|,)$navinf ...