1.装包,引包

首先需要安装两个包 react ,react-dom

cnpm  i  react  react-dom

介绍下这两个包:

react:专门用来创建React组件,组件生命周期等这些东西。

react-dom:里面主要封装了和Dom操作相关的包(例如:要把组件渲染到页面上)

装了之后就引包使用了

import  React  from  ‘react’
import ReactDom from ‘react-dom’

2.创建dom对象

在react中,如果要创建DOM元素了,只能使用React提供的JS API来创建(vue是直接创建.vue文件手写HTML元素来创建的)

var myDiv = React.createElement('div' , { title : 'wo shi div' , id = 'myDiv'} ,  '这是一个div' )
React.createElement()方法:用于创建虚拟DOM对象,他接收3个及以上的参数。
参数1:表示要创建的元素类型,参数是个字符串类型(在此我理解为标签名字如:‘div’ ,‘p’) 参数2:表示创建的元素含有哪些属性,参数是个对象(例如有id,class,title属性)
参数3:表示当前创建元素的子节点,可以是文本内容,也可以是子标签,从第三个参数的位置开始,后面可以放好多的虚拟DOM对象(嵌套元素)
创建后的效果:
<div title="wo shi div" id="myDiv">这是一个div</div>
3.渲染到页面
ReactDom.render(myDiv , document.getElementById('app'))
ReactDom.render()用法:
ReactDom.render(‘要渲染的虚拟DOM元素’  ,  '要渲染到页面上的那个位置中')

注意:

ReactDom.render()方法的第二个参数,和vue不一样,React中不接受字符串“#app”,需要传递一个原生的DOM对象“document.getElementById('app')”。
												

react快速上手一(使用js语法,创建虚拟DOM元素)的更多相关文章

  1. React:快速上手(1)——基础知识

    React:快速上手(1)——基础知识 React(有时叫React.js或ReactJS)是一个为数据提供渲染为HTML视图的开源JavaScript库,用于构建用户界面. JSX.元素及渲染 1. ...

  2. React:快速上手(7)——使用中间件实现异步操作

    React:快速上手(7)——使用中间件实现异步操作 本文参考链接:Stack Overflow redux-thunk 我们使用store.dispath进行派发时,只能传递一个普通对象进去,如下: ...

  3. React:快速上手(6)——掌握React Router

    React:快速上手(6)——掌握React Router 引入Router 安装 npm install react-router-dom 基础组件 React Router中有三种类型的组件:路由 ...

  4. React:快速上手(4)——掌握Redux(1)

    React:快速上手(4)——掌握Redux 引入Redux 混乱的state管理 随着 JavaScript 单页应用开发日趋复杂,JavaScript 需要管理比任何时候都要多的 state (状 ...

  5. React:快速上手(3)——列表渲染

    React:快速上手(3)——列表渲染 使用map循环数组 了解一些ES6 ES6, 全称 ECMAScript 6.0 ,是 JaveScript 的下一个版本标准,2015.06 发版.ES6 主 ...

  6. 官方 React 快速上手脚手架 create-react-app

    此文简单讲解了官方 React 快速上手脚手架的安装与介绍. 1. React 快速上手脚手架 create-react-app 为了快速地进行构建使用 React 的项目,FaceBook 官方发布 ...

  7. React:快速上手(5)——掌握Redux(2)

    React:快速上手(5)——掌握Redux(2) 本文部分内容参考阮一峰的Redux教程. React-Redux原理 React-Redux运行机制 我觉得这张图清楚地描述React-Redux的 ...

  8. React:快速上手(2)——组件通信

    React:快速上手(2)——组件通信 向父组件传递数据 父组件可以通过设置子组件的props属性进行向子组件传值,同时也可以传递一个回调函数,来获取到子组件内部的数据. 效果演示 子组件是输入框,父 ...

  9. React:快速上手(8)——前后端分离的跨域访问与会话保持

    React:快速上手(8)——前后端分离的跨域访问与会话保持 跨域访问 跨域是指从一个域名的网页去请求另一个域名的资源.比如从http://www.baidu.com/ 页面去请求http://www ...

随机推荐

  1. Visual Studio2013的C语言编译器对C99标准的支持情况

    Visual Studio2013终于开始比较良好地支持C99特性了.在此之前,如果用C语言写代码的话,变量名都需要放到函数体的前面部分,代码写起来十分别扭. 而Visual Studio2013中的 ...

  2. PS改变图片像素大小(一寸照片变二寸)

    1.打开Photoshop,点击“文件”菜单,选择“打开”,将要处理的图片加载进来 2.找到“图像”菜单,选择“图像大小”,我们在这里对图片进行处理. 3.根据需要对其分辨率或者尺寸进行设置,设置好后 ...

  3. 3GPP 5G UPF

    目录 文章目录 目录 UPF 参考文档 UPF UPF(User Plane Function,用户面功能),是 3GPP 定义的 5G Core(核心网)基础设施系统架构的基本组成部分. UPF 从 ...

  4. C# Winform中WebBrowser给网页中的input控件赋值/设置值

    订阅WebBrowser的DocumentCompleted事件,在里面写入 private void browser_DocumentCompleted(object sender, WebBrow ...

  5. html5 商品分类页面效果zepto

    点击左边容器条目,右边列表对应的内容置顶显示,滑动右边的列表,左边容器的对应的标题高亮显示. 效果图如下: 代码: <!doctype html> <html> <hea ...

  6. 使用微软的WinAppDriver进行Windows客户端自动化测试

    一.WinAppDriver简介: 参见:https://github.com/microsoft/WinAppDriver Windows Application Driver(WinAppDriv ...

  7. VS.左侧_蓝黄绿_竖线

    1.vs2013中,写代码中,旁边会出现蓝色或者黄色的线,请问是什么意思?求大神告知_百度知道.html(https://zhidao.baidu.com/question/1862841692529 ...

  8. mongodb 连接后无法使用 发现已经有进程在运行

    mongod 命令执行发现已经有进程在运行mongod数据库--errno:48 Address already in use for socket: 0.0.0.0:27017 错误信息: list ...

  9. 大周末的不休息,继续学习pandas吧,pandas你该这么学,No.7

    其实,写文章真的挺难的 每天抽点时间,写写文采飘逸的文章 坚持个几年,成为称霸一方的大佬 坚持就会成功吧~ 最近碰到瓶颈了, 一直找不到好的运营公众号的方式(好想有人指导唉~,对了,橡皮擦有个100多 ...

  10. #【Python】【demo实验34】【练习实例】【设置文本的颜色】

    原题: 文本颜色设置. 我的代码 #!/usr/bin/python # encoding=utf-8 # -*- coding: UTF-8 -*- # 文本颜色设置. class bcolors: ...