在项目中使用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对象
在项目中使用react的更多相关文章
- iOS原生项目中集成React Native
1.本文的前提条件是,电脑上已经安装了CocoaPods,React Native相关环境. 2.使用Xcode新建一个工程.EmbedRNMeituan [图1] 3.使用CocoaPods安装Re ...
- 在ASP.NET MVC项目中使用React
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:最近在开发钉钉的微应用,考虑到性能和UI库的支持,遂采用了React来开发前端. 目前 ...
- TypeScript在React项目中的使用总结
序言 本文会侧重于TypeScript(以下简称TS)在项目中与React的结合使用情况,而非TS的基本概念.关于TS的类型查看可以使用在线TS工具TypeScript游乐场 React元素相关 Re ...
- React Native 在现有项目中的探路
移动开发中,native开发性能和效果上无疑是最好的. 但是在众多的情况下,native开发并不是最优的选择.当需求经常改动的时候,当预算有限的时候,当deadline很近的时候,native开发的成 ...
- React Native(ios)项目中logo,启动屏设置
由于logo和启动屏尺寸多,react native(ios)中没有命令可以自动生成各种的尺寸,所以可以使用以下办法:在ionic项目中生成(使用命令:ionic resources)后,再粘贴到re ...
- 如何在非 React 项目中使用 Redux
本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...
- 如何优雅地在React项目中使用Redux
前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
- 如何在React项目中直接使用WebAssembly
前言 自从入坑WebAssembly以来,躺了很多坑,也浏览了很多资料,都没有看到很多能够直接在前端项目中使用WebAssembly的例子.即使有,我自己按照介绍的步骤一步一步来, 也会报各种错误,官 ...
- react项目中实现元素的拖动和缩放实例
在react项目中实现此功能可借助 react-rnd 库,文档地址:https://github.com/bokuweb/react-rnd#Screenshot .下面是实例运用: import ...
随机推荐
- How to Use GNOME Shell Extensions
如果没有安装Tweaks请先安装,命令如下: sudo apt install gnome-tweak-tool 1. Use gnome-shell-extensions package [easi ...
- POJ 1873 The Fortified Forest(凸包)题解
题意:二维平面有一堆点,每个点有价值v和删掉这个点能得到的长度l,问你删掉最少的价值能把剩余点围起来,价值一样求删掉的点最少 思路:n<=15,那么直接遍历2^15,判断每种情况.这里要优化一下 ...
- docker-compose安装与部署项目
安装: 1.curl安装慢的问题 解决:改用pip安装,需要先安装pip相关,参照: https://www.cnblogs.com/YatHo/p/7815400.html 2.pip安装依赖库re ...
- map数据结构
学习map的这种ES6新加的数据结构.在一些构建工具中是非常喜欢使用map这种数据结构来进行配置的,因为map是一种灵活,简单的适合一对一查找的数据结构.我们知道的数据结构,已经有了json和set. ...
- HDU 1298 T9(字典树+dfs)
http://acm.hdu.edu.cn/showproblem.php?pid=1298 题意:模拟手机9键,给出每个单词的使用频率.现在给出按键的顺序,问每次按键后首字是什么(也就是要概率最大的 ...
- Go 定长的数组
1.Go 语言数组的简介 几乎所有的计算机语言都有数组,应用非常的广泛.同样,在 Go 语言中也有数组并且在数组的基础上还衍生出了切片(slice). 数组是一系列同一类型数据的集合,数组中包含的每个 ...
- _itemmod_nopatch、_itemmod_nopatch_level、_itemmod_nopatch_spell、_itemmod_nopatch_src、_itemmod_nopatch_stat、_itemmod_nopatch_stat_prefix
原始物品(_itemmod_nopatch中Entry)需要能够装备 该功能产生的新物品不需要制作dbc 尽量避免配置主动技能(_itemmod_nopatch_spell) _itemmod_nop ...
- 使用lombok 找不到方法
在setting里面查找并设置就好了
- [原][osgEarth]添加自由飞行漫游器
//头文件里 #define MANIPULATOR_W 0x01#define MANIPULATOR_A 0x02#define MANIPULATOR_S 0x04#define MANIPUL ...
- Android主页Activity对多个Fragment实现不同的沉浸式标题(图片或者文字标题)
提示:讲解的该例实现是 FragmentTabHost + Fragment 实现: 1.示例效果图: 2.场景需求: 如示例图所示,在首页实现轮播图的沉浸,而 “发现” 和“我的”页是标题的沉浸. ...