zoukankan      html  css  js  c++  java
  • 在项目中使用react

    1. 运行 ’cnpm i react react-dom -S' 安装包

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

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

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

      <!-- 将来,使用 React 创建的虚拟DOM元素,都会被渲染到这个指定的容器中 -->

    html
    <
    div id='app'></div>

    3. 导入包:

    javascript
    import React from 'react' import ReactDOM from 'react-dom'

    4. 创建虚拟DOM元素:

    这是 创建虚拟DOM元素的 API <h1 title="啊,五环" id="myh1">你比四环多一环</h1>

    javascript
    const myh1=React.createElement('h1',{id:'myh1', title:'react study'},'so easy')

    第一个参数: 字符串类型的参数,表示要创建的标签的名称
    第二个参数:对象类型的参数, 表示 创建的元素的属性节点
    第三个参数: 子节点

    页面元素过多时,上述方法过于繁琐,可用下面语法代替:

    JSX语法:符合 xml 规范的 JS 语法

    注意:JS文件中,默认不能写类似HTML的标记;需要安装babel插件来转换JS中的标签;因此,JSX语法的本质,还是在运行时,被转换成React.createElement形式来执行

    JSX
    const myh1=<h1 id='myh1' title='react study'>so easy<h1>

    5. 渲染

    ReactDOM.render(myh1,document.getElementById('app'))

    参数1: 表示要渲染的虚拟DOM对象
    参数2: 指定容器,注意:这里不能直接放 容器元素的Id字符串,需要放一个容器的DOM对象

  • 相关阅读:
    APICloud框架——获取本地图片信息
    APICloud框架--sublime使用自定义loader
    Felx布局(三)
    Flex布局(二)
    Linux时间与Windows差8个时区的问题解决方法
    警惕javascript代码中的“</script>”!
    字母数字推理题
    “黑客”究竟是什么
    博客园自定义博客侧边栏公告的过滤漏洞
    一行命令实现Android自动关机
  • 原文地址:https://www.cnblogs.com/embrace-ly/p/10608411.html
Copyright © 2011-2022 走看看