react快速上手一(使用js语法,创建虚拟DOM元素)
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元素)的更多相关文章
- React:快速上手(1)——基础知识
React:快速上手(1)——基础知识 React(有时叫React.js或ReactJS)是一个为数据提供渲染为HTML视图的开源JavaScript库,用于构建用户界面. JSX.元素及渲染 1. ...
- React:快速上手(7)——使用中间件实现异步操作
React:快速上手(7)——使用中间件实现异步操作 本文参考链接:Stack Overflow redux-thunk 我们使用store.dispath进行派发时,只能传递一个普通对象进去,如下: ...
- React:快速上手(6)——掌握React Router
React:快速上手(6)——掌握React Router 引入Router 安装 npm install react-router-dom 基础组件 React Router中有三种类型的组件:路由 ...
- React:快速上手(4)——掌握Redux(1)
React:快速上手(4)——掌握Redux 引入Redux 混乱的state管理 随着 JavaScript 单页应用开发日趋复杂,JavaScript 需要管理比任何时候都要多的 state (状 ...
- React:快速上手(3)——列表渲染
React:快速上手(3)——列表渲染 使用map循环数组 了解一些ES6 ES6, 全称 ECMAScript 6.0 ,是 JaveScript 的下一个版本标准,2015.06 发版.ES6 主 ...
- 官方 React 快速上手脚手架 create-react-app
此文简单讲解了官方 React 快速上手脚手架的安装与介绍. 1. React 快速上手脚手架 create-react-app 为了快速地进行构建使用 React 的项目,FaceBook 官方发布 ...
- React:快速上手(5)——掌握Redux(2)
React:快速上手(5)——掌握Redux(2) 本文部分内容参考阮一峰的Redux教程. React-Redux原理 React-Redux运行机制 我觉得这张图清楚地描述React-Redux的 ...
- React:快速上手(2)——组件通信
React:快速上手(2)——组件通信 向父组件传递数据 父组件可以通过设置子组件的props属性进行向子组件传值,同时也可以传递一个回调函数,来获取到子组件内部的数据. 效果演示 子组件是输入框,父 ...
- React:快速上手(8)——前后端分离的跨域访问与会话保持
React:快速上手(8)——前后端分离的跨域访问与会话保持 跨域访问 跨域是指从一个域名的网页去请求另一个域名的资源.比如从http://www.baidu.com/ 页面去请求http://www ...
随机推荐
- linux下docker如何指定容器的工作目录?
答: 启动容器时传入-w <work_dir>参数即可,如: docker run -it -w <work_dir> <container_image_name> ...
- Build Telemetry for Distributed Services之OpenCensus:C#
OpenCensus Easily collect telemetry like metrics and distributed traces from your services OpenCensu ...
- win7上 nginx 出现 403 Forbidden
一般是目录权限问题,在conf文件找到 location / { index index.html index.htm index.php;# autoindex on; } 把#去掉就可以了.
- lnmp搭建-手动版
参照链接:http://blog.csdn.net/bravemelon/article/details/64925499 centOS 下安装 Nginx yum -y groupinstall & ...
- Spring Boot确保Web应用安全(登陆认证)
Spring Boot官方提供了一个登陆认证的清晰易懂的 例子 , 我们在次以此例展开演示Spring Boot是如何实现登陆认证的. 首先我们去 https://start.spring.io/ 下 ...
- Cocos Creator 中的动作系统那些事儿
动作系统就是可以在一定的时间内实现位移.旋转.缩放.跳动等各种动作. 需要注意的是,动作系统跟 Cocos Creator 编译器的动画系统不同,动作系统是面向程序员的API接口,而动画系统是通过编译 ...
- Java异步调用转同步的5种方式
1.异步和同步的概念 同步调用:调用方在调用过程中,持续等待返回结果. 异步调用:调用方在调用过程中,不直接等待返回结果,而是执行其他任务,结果返回形式通常为回调函数. 2 .异步转为同步的概率 需要 ...
- Linear regression with one variable - Model representation
摘要: 本文是吴恩达 (Andrew Ng)老师<机器学习>课程,第二章<单变量线性回归>中第6课时<模型概述>的视频原文字幕.为本人在视频学习过程中逐字逐句记录下 ...
- 【DSP开发】CMD文件
DSP的存储器的地址范围,CMD是主要是根据那个来编的. CMD 它是用来分配rom和ram空间用的,告诉链接程序怎样计算地址和分配空间. 所以不同的芯片就有不同大小的rom和ram.放用户程序的地方 ...
- VS.2017下载安装_ZC
ZC:20190623 1.我现在下载的是 社区版 C++的桌面开发 和 C#的开发,下载 文件压缩为:移动硬盘“H:\ZC_IDE\VC\vs2017_cs_cpp(community).rar” ...