• 在项目中使用react


    1.运行 cnpm install react react-dom -S

      react安装包:专门用于创建组件和虚拟DOM的,同时组件的生命周期都在这个包中

      react-dom安装包:专门进行DOM操作的,最主要的应用场景就是ReactDOM.render()

    2.在index.html页面中创建容器:

    <!-- 创建一个容器,将来渲染的虚拟DOM会放到容器内显示 -->
        <div id="app"></div>

    3.导入包:

    //1.导入react包
    import React from 'react'   //创建组件、虚拟DOM元素、生命周期
    import ReactDom from 'react-dom'   //把创建好的组件和虚拟DOM放到页面上展示的

    4.创建虚拟DOM元素:

    //2.创建虚拟DOM元素
    //参数1:创建的元素的类型,字符串,表示元素的名称
    //参数2:是一个对象或null,表示当前这个DOM元素的属性,null表示没有属性
    //参数3:子节点(包括其他虚拟DOM或文本子节点)
    //参数n:其他子节点(从第三个参数往后都属于子节点)
    // <h1 id='myh1' title='this is a h1'>这是一个H1标签</h1>
    const myh1 = React.createElement('h1', { id: 'myh1', title: 'this is a h1'}, '这是一个H1标签')

    5.将元素渲染到页面上:

    //3.使用ReactDom把虚拟DOM渲染到页面上
    //参数1:要渲染的那个虚拟DOM元素
    //参数2:指定页面上的一个容器,第二个参数接收的应该是一个DOM元素,而不是一个选择器
    ReactDom.render(myh1,document.getElementById('app')

    以上是手动一步一步安装react中需要的包,也可以使用以下方法快速创建react项目:

    1.快速创建React项目脚手架 create-react-app
    npm install -g create-react-app
    2.创建react项目
    create-react-app my-app

    或者直接 npx create-react-app my-app

  • 相关阅读:
    解析json对象出现$ref: "$.list[0]"的解决办法
    postgresql主键自增
    从Mysql迁移到PostgreSQL
    Java终止线程的三种方式
    Mybatis中的模糊查询和sql中字符串拼接
    IDEA常用快捷键和常用插件集成
    Sublime Text3对数据行首、行尾批量添加内容
    javascript日期格式化
    ECharts 提示框组件Tooltip属性大全(包含文本注释)
    EChart显示地图信息例子
  • 原文地址:https://www.cnblogs.com/zcy9838/p/12006384.html
Copyright © 2020-2023  润新知