react基础语法（一）元素渲染和基础语法规则
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head> <body>
<div id="app"> </div>
<script type="text/babel">
//1. React实例
/*如果我们需要使用 JSX，则 <script> 标签的 type 属性需要设置为 text/babel;
Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。
通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。*/
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('app')
);
//2.更新元素渲染
/*React 元素都是不可变的。当元素被创建之后，你是无法改变其内容或属性的。
目前更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法*/
function addEle() {
const element = (
<div>
<h1>第一次渲染!</h1>
<h2>现在是 {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('app')
);
}
setInterval(addEle, 500);
//封装下vvvvvvv toLocaleTimeString()方法根据本地时间把 Date对象的时间部分转换为字符串;
function Setdom(props) {
return (
<div>
<h1>第二次渲染!</h1>
<h2>现在是 {props.date.toLocaleTimeString()}.</h2>
</div>
);
}
function newEle() {
ReactDOM.render(
<Setdom date={new Date()} />,
document.getElementById('app')
);
}
setInterval(newEle, 1000);
//React.Component的 ES6 类，该类封装了要展示的元素，需要注意的是在 render()方法中，需要使用 this.props替换 props：
class EsDom extends React.Component {
render() {
return (
<div>
<h1>第三次渲染!</h1>
<h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
function esAddDom() {
ReactDOM.render(
<EsDom date={new Date()} />,
document.getElementById('app')
);
}
setInterval(esAddDom, 2500);
</script>
</body> </html>
react基础语法（一）元素渲染和基础语法规则的更多相关文章
- React学习笔记 - 元素渲染
React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...
- react基础用法二(组件渲染)
react基础用法二(组件渲染) 如图所示组件可以是函数 格式:function 方法名(){ return <标签>内容</标签>} 渲染格式: <方法名 /> ...
- react 也就这么回事 04 —— 元素渲染
为了便于后续理解,我们再来回顾和总结前面几个章节的内容 1 元素及其创建 元素是构成 React 应用的最小砖块. 元素描述了你在屏幕上想看到的内容. const element = <h1&g ...
- react学习（二）--元素渲染
元素用来描述你在屏幕上看到的内容: const element = <h1>Hello, world</h1>; 与浏览器的 DOM 元素不同,React 当中的元素事实上是普 ...
- HTML5 基础内容（元素/属性/格式化）
HTML基础 1.HTML元素 1.1 元素指的是开始标签到结束标签的所有代码. 1.2 元素的内容是开始标签与结束标签之间的内容. 1.3大多数HTML元素可用有属性. 1.4标签可以拥有属性为元素 ...
- Python基础之函数：3、多层语法糖、装饰器和装饰器修复技术及递归函数
目录 一.多层语法糖 1.什么是多层语法糖: 2.多层语法糖用法: 二.有参装饰器 1.什么是有参装饰器: 2.有参装饰器的作用: 三.装饰器修复技术 1.什么是装饰器修复技术: 四.递归函数 1.什 ...
- Java基础中一些容易被忽视的语法小细节总结
一:语法细节 1. Java中的命名规则: package:统一使用小写字母 class:首字母大写,使用驼峰标识 method:首字母小写,使用驼峰标识 field:首字母小写,使用驼峰标识 sta ...
- 结合jquery的前后端加密解密 适用于WebApi的SQL注入过滤器 Web.config中customErrors异常信息配置 ife2018 零基础学院 day 4 ife2018 零基础学院 day 3 ife 零基础学院 day 2 ife 零基础学院 day 1 - 我为什么想学前端
在一个正常的项目中,登录注册的密码是密文传输到后台服务端的,也就是说,首先前端js对密码做处理,随后再传递到服务端,服务端解密再加密传出到数据库里面.Dotnet已经提供了RSA算法的加解密类库,我们 ...
- 详解react/redux的服务端渲染：页面性能与SEO
亟待解决的疑问 为什么服务端渲染首屏渲染快?(对比客户端首屏渲染) react客户端渲染的一大痛点就是首屏渲染速度慢问题,因为react是一个单页面应用,大多数的资源需要在首次渲染前就加载 ...
随机推荐
- 「LuoguP2014」 选课
Description 在大学里每个学生,为了达到一定的学分,必须从很多课程里选择一些课程来学习,在课程里有些课程必须在某些课程之前学习,如高等数学总是在其它课程之前学习.现在有N门功课,每门课有个学 ...
- 「LuoguP3191」 [HNOI2007]紧急疏散EVACUATE（最大流
Description 发生了火警,所有人员需要紧急疏散!假设每个房间是一个N M的矩形区域.每个格子如果是’.’,那么表示这是一块空地:如果是’X’,那么表示这是一面墙,如果是’D’,那么表示这是一 ...
- Balancing Act（树的重心）
传送门 Balancing Act Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 14070 Accepted: 593 ...
- HDU - 2828 网络流
题目大意 有n个灯,m个开关,由于线路乱接导致可能有多个开关对应一个灯(并联),有的灯在开关开的时候亮 有的灯在开关关的时候亮,[每个开关最多对应两盏灯],试找出一种开关的ON,OFF状态,使得所有灯 ...
- CocoaPods(第三方类库管理工具)
iOS安装CocoaPods详细过程 一.简介 什么是CocoaPods CocoaPods是OS X和iOS下的一个第三类库管理工具,通过CocoaPods工具我们可以为项目添加被称为“Pods” ...
- C++笔试题（七）
微软研究院是一个听起来就牛B的地方啊,反正我是进不去,不过不妨碍我看看他的笔试题到底是怎么样的.下面四道题就是微软研究院的笔试题目,题后附有我的解答.微软研究院(亚洲)的网址是:http://rese ...
- BZOJ3834:Solar Panels （分块）
题意 询问两个区间[smin,smax],[wmin,smax]中是否存在k的倍数,使得k最大 分析 将其转化成\([\frac{smin-1}k,\frac{smax}k],[\frac{wmin- ...
- hdoj3790 【最短路】
这一题啊,其实还是很简单的~(A掉了就很简单啊~) 思路: 松弛,然后在里面维护一个小最短路~: A掉这一题,感觉松弛的理解又上了一个台阶,以及spfa的原理,最短路用到的原理就是松弛,先把图构造到最 ...
- unity ShaderLab 编辑器——sublime text 2
sublime text 2,支持unity shader关键字高亮显示,智能提示功能.这个脚本编辑器的售价是70美元,不过作者很厚道地给了我们永久的免费试用期. 1)下载sublime text 2 ...
- 【杂谈】5G有啥用？跟咱有关系么？关注那玩意儿干啥？
用处大了 有啥用? 云计算啊,你看看你电脑都卡成啥了? 既然5G速度赶上本地读取,那就相当于把硬盘放云端没问题了.那么,看看自己硬盘里都有啥,5G的用处或许就能一点点浮现出来了. ——请不要急着打开一 ...