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

在项目中使用react的更多相关文章

  1. iOS原生项目中集成React Native

    1.本文的前提条件是,电脑上已经安装了CocoaPods,React Native相关环境. 2.使用Xcode新建一个工程.EmbedRNMeituan [图1] 3.使用CocoaPods安装Re ...

  2. 在ASP.NET MVC项目中使用React

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:最近在开发钉钉的微应用,考虑到性能和UI库的支持,遂采用了React来开发前端. 目前 ...

  3. TypeScript在React项目中的使用总结

    序言 本文会侧重于TypeScript(以下简称TS)在项目中与React的结合使用情况,而非TS的基本概念.关于TS的类型查看可以使用在线TS工具TypeScript游乐场 React元素相关 Re ...

  4. React Native 在现有项目中的探路

    移动开发中,native开发性能和效果上无疑是最好的. 但是在众多的情况下,native开发并不是最优的选择.当需求经常改动的时候,当预算有限的时候,当deadline很近的时候,native开发的成 ...

  5. React Native(ios)项目中logo,启动屏设置

    由于logo和启动屏尺寸多,react native(ios)中没有命令可以自动生成各种的尺寸,所以可以使用以下办法:在ionic项目中生成(使用命令:ionic resources)后,再粘贴到re ...

  6. 如何在非 React 项目中使用 Redux

    本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...

  7. 如何优雅地在React项目中使用Redux

    前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...

  8. 如何在React项目中直接使用WebAssembly

    前言 自从入坑WebAssembly以来,躺了很多坑,也浏览了很多资料,都没有看到很多能够直接在前端项目中使用WebAssembly的例子.即使有,我自己按照介绍的步骤一步一步来, 也会报各种错误,官 ...

  9. react项目中实现元素的拖动和缩放实例

    在react项目中实现此功能可借助 react-rnd 库,文档地址:https://github.com/bokuweb/react-rnd#Screenshot .下面是实例运用: import ...

随机推荐

  1. tp剩余未验证内容-5

    经过实践, ie678是不能正确显示解析bs的,所以要用ff和chrome浏览器. page-header类是有特殊样式的 在标题下有一条浅色的细线条,源代码中有: border-bottom: 1p ...

  2. CodeForces 459C Pashmak and Buses(构造)题解

    题意:n个人,k辆车,要求d天内任意两人都不能一直在同一辆车,能做到给出构造,不能输出-1 思路:我们把某一个人这d天的车号看成一个d位的数字,比如 1 1 2 3代表第一天1号车.第二天1号车.第三 ...

  3. svn强制commit写log

    https://tortoisesvn.net/docs/nightly/TortoiseSVN_en/tsvn-howto-minlogmsgsize.html Force users to ent ...

  4. P3244 [HNOI2015]落忆枫音

    思路 给出了一个DAG,要求以1为根的外向树的个数 如果没有加边的条件,就非常好做 每个点都只保留一条入边,最后得到的一定就是一个符合条件的树了(因为给了一个DAG啊) 所以答案是\(\prod_{i ...

  5. ES6中的函数和数组补漏

    对象的函数解构 我们在前后端分离时,后端经常返回来JSON格式的数据,前端的美好愿望是直接把这个JSON格式数据当作参数,传递到函数内部进行处理.ES6就为我们提供了这样的解构赋值. let json ...

  6. 在Mac OSX下安装Microsoft Calibri字体

    参考: Where can I find default Microsoft fonts Calibri, Cambria? 在Mac OSX下安装Microsoft Calibri字体 1.下载: ...

  7. SpringBoot war包部署到Tomcat服务器

    (1)pom.xml文件修改<packaging>war</packaging>,默认是jar包,<build>节点中增加<finalName>spri ...

  8. HDU 4315 Climbing the Hill(阶梯博弈)

    http://acm.hdu.edu.cn/showproblem.php?pid=4315 题意:由上至下有多个格子,最顶端的是山顶,有多个球,其中有一个球是king,每次可以将球向上移动任意个格子 ...

  9. Qt532,鼠标键盘事件_ZC

    1.判断鼠标左键是否是 按下的状态 void TdrWebview::mouseMoveEvent(QMouseEvent *_pEvent) { if (_pEvent->buttons() ...

  10. [原][粒子特效][spark]插值器interpolator

    深入浅出spark粒子特效连接:https://www.cnblogs.com/lyggqm/p/9956344.html 插值器是体现粒子生命周期变化的功能 group使用到插值器的方式: 可以看到 ...