React入门介绍(1)-ReactDOM.render()等基础
React入门介绍-ReactDOM.render()等基础
首先,React是一个用于构建用户界面的Javascript库,但Peact并不是一套完整的MVC或MVVM的框架,它仅涵盖V-view视图层。JSX是javascript的扩展,像Typescript,coffeeScript等一样,都是Javascript的语法糖,最终都要变编译成JS执行,建议使用JSX的代码进行React的开发。因为Javascript代码与JSX代码并不兼容,凡是使用JSX的地方我们都需要加上 type="text/babel"。
在使用React之前,我们必须要先引入三个库——react.js/react-dom.js/browser.min.js
<html>
<head>
<script src="../../react.js"></script>
<script src="../../react-dom.js"></script>
<script src="../../browser.min.js"></script>
</head>
<body>
</body>
</html>
JSX比较特殊的是允许Javascript和HTML的混写,看一个简单的例子:
<div id="container"></div>
<script type="text/babel">
let value = "demo1";
let buttonName = "submit";
ReactDOM.render(
<div>
<input type="text" value={value}/> //注意单标签一定要闭合“/”,否则会报错
<button>{buttonName}</button>//在{}中插入变量
</div>,
document.getElementById("container")
)
</script>
ReactDOM.render是React的最基本方法用于将模板转为HTML语言,并插入指定的DOM节点。ReactDOM.render(template,targetDOM),该方法接收两个参数:第一个是创建的模板,多个dom元素外层需使用一个标签进行包裹,如<div>
;第二个参数是插入该模板的目标位置。若要为创建的某个元素增加class属性,不能直接定义class而要用className
,因为class是javascript中的保留字。例如给input添加className并更改样式:
<input type="text" className="userName" value={value}/>
.userName{background: yellow}//在CSS样式中定义
同样可以定义行内样式,将所有的样式包裹在一个对象中,以类似变量的形式给style属性赋值,注意样式属性要用驼峰命名法表示,如:backgroundColor而不是background-color;fongSize而不是font-size,
<input type="text" style={{"backgroundColor":"yellow","color":"red"}} value={value}/>
另外可以直接将样式赋值给一个变量,把变量赋值给style属性,如下:
<div id="container"></div>
<script type="text/babel">
let value = "demo1";
let buttonName = "submit";
let inputStyle = {
"backgroundColor":"yellow",
"color":"red"
};
ReactDOM.render(
<div>
<input type="text" style={inputStyle} value={value}/>
<button>{buttonName}</button>
</div>,
document.getElementById("container")
)
</script>
React入门介绍(1)-ReactDOM.render()等基础的更多相关文章
- React入门介绍(2)- React Component-React组件
React Component-React组件 允许用户自由封装组件是React非常突出的特性,用户可将自己创建的组件像普通的HTML标签一样插入页面,React.CreateClass方法就是用来创 ...
- React源码 ReactDOM.render
在 react 当中,主要创建更新的有三种方式 1.ReactDOM.render || hydrate 这两个api都是要把这个应用第一次渲染到我们页面上面,展现出来整个应用的样子的过程,这就是初 ...
- React入门 (1)—使用指南(包括ES5和ES6对比)
前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...
- 2015年最热门前端框架React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- react 入门教程 阮一峰老师真的是榜样
- 转自阮一峰老师博客 React 入门实例教程 作者: 阮一峰 日期: 2015年3月31日 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Nati ...
- React入门实例教程
文章转自:阮一峰 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React ...
- React 入门实例教程(转载)
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- 【转】react入门实例教程
作者: 阮一峰 日期: 2015年3月31日 写在前面:原文链接http://www.ruanyifeng.com/blog/2015/03/react.html github地址https:/ ...
- React 入门实例教程【转】
Any day will do. 哪一天都行 Are you kidding? 你在开玩笑吧! Congratulations! 祝贺你! I don’t mean it. 我不是故意的. 原文作者: ...
随机推荐
- sql server 变量 字符串拼接
参考:SQL server中null+字符串,isnull以及把查询结果赋给一个字符变量组成另一个查询语句 1.开始定义的字符串都为null.例如:declare @sql,那么@sql就是null ...
- silverlight 4中datagrid列标题和列内容居中问题,增加自增长列
转载:http://www.cnblogs.com/guoyuanwei/archive/2011/01/02/1924163.html 命名空间:xmlns:Primitives="clr ...
- bzoj 4247: 挂饰【dp】
bzoj上访问负下标会跑到奇怪的地方-- 其实可以滚动数组优化,但是我看能过就懒得改了 设f[i][j]为已经算了前i个挂饰,当前有j个空的钩子,转移就是f[i][j]=max(f[i-1][j],f ...
- 2018SCin tsyzDay2 模拟赛-动态规划(简单的)
内心OS:简单?????还是我太弱了. 期望得分:100+100+0+0+0+0+随机暴力的点==200 实际得分:0+100+10+0+10+0==120 您知道我第一题为什么错了嘛??文件在混乱中 ...
- python中threading模块中的Join类
join类是threading中用于堵塞当前主线程的类,其作用是阻止全部的线程继续运行,直到被调用的线程执行完毕或者超时.具体代码如下: import threading,time def doWai ...
- redis相关配置
redis相关配置1.yum 源码 rpm yum 快速,间接,高效,解决依赖关系,(自动安装到某个路径,不可控),通过yum安装的软件查询命令 rpm -ql nginx yum源的软件包可能版本非 ...
- [POI2007]石头花园SKA
Description Blue Mary是一个有名的石头收藏家.迄今为止,他把他的藏品全部放在他的宫殿的地窖中.现在,他想将他的藏品陈列在他的花园中.皇家花园是一个边长为1000000000单位的平 ...
- [hdu4089] Activation【概率dp 数学期望】
传送门:http://acm.hdu.edu.cn/showproblem.php?pid=4089 本来可以一遍过的,结果mle了一发...注意要用滚动数组. 令f(i, j)表示队列剩余i个人,这 ...
- Kali linux 2016.2(Rolling)里的枚举服务
前言 枚举是一类程序,它允许用户从一个网络中收集某一类的所有相关服务.
- 针对谷歌默认最小字体12px的正确解决方案
利用css3的缩放,其最终大小就是:12px * 0.9(缩放比例) = 10.8px; 居然行得通.但回头一想,这么写的话,IE7 IE8会不会不兼容,还是12px呢?不出所料,果然不兼容.此时,又 ...