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对象

  • 相关阅读:
    LRU算法简介
    linux下安装nginx+php+mysql环境 详细教程
    CentOS 6.6编译安装Nginx1.6.2+MySQL5.6.21+PHP5.6.3
    unicode 格式 转汉字
    js 操作cookie
    哈希函数
    php商城秒杀活动
    php 栈、 出栈、入栈
    php单例模式
    封装PHP增删改查方法
  • 原文地址:https://www.cnblogs.com/embrace-ly/p/10608411.html
Copyright © 2011-2022 走看看