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是一个单页面应用,大多数的资源需要在首次渲染前就加载 ...
随机推荐
- 一步一步学Silverlight 2系列（8）：使用样式封装控件观感
述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- bzoj2973石头游戏——矩阵乘法
题目:权限题! 写了一下,但提交不了,先放着吧. 代码如下: #include<iostream> #include<cstdio> #include<cstring&g ...
- 微信小程序开发之https从无到有
本篇不讲什么是https,什么是SSL,什么是nginx 想了解这些的请绕道,相信有很多优秀的文章会告诉你. 本篇要讲的在最短的时间内,让你的网站从http升级到https. 开始教程前再说一句:ht ...
- laravel的核心概念:服务提供者provider解析
我们知道laravel和核心就是一个IoC容器, 被称之为服务容器. 那么作为IoC容器, 就必须要有绑定对象生成器的工作. 在laravel中是服务提供者来项服务容器中绑定对象生成器的. 百牛信息 ...
- ML一些零散记录
朴素贝叶斯的假定条件:变量独立同分布 一般情况下,越复杂的系统,过拟合的可能性就越高,一般模型相对简单的话泛化能力会更好一点,增加隐层数可以降低网络误差(也有文献认为不一定能有效降低),提高精度,但也 ...
- 怎么在notepad里面，将字符串替换成换行
用Notepad++可以,利用查找和替换功能,选择正则表达式,查找目标框里输入你想要替换的字符串,替换为框里输入\r,点击替换即可.这是个 很强大的功能,利用还它可以批量替换任何字符串,比如你链接是& ...
- Gradle系列之二 Groovy对文件的操作
Groovy对文件的操作 对文件的遍历 假设文件的原始内容为: hello,world 这里是北京 andorid and ios are good system 第一种方法:使用 eachLine( ...
- Thrift 原理与使用实例
一.Thrift 框架介绍 1.前言 Thrift是一个跨语言的服务部署框架,最初由Facebook于2007年开发,2008年进入Apache开源项目.Thrift通过一个中间语言(IDL, 接口定 ...
- github最值得收藏的Bootstrap3后台管理框架
1. AdminLTE AdminLTE是一个完全响应的后台管理模板.基于Bootstrap3框架.高度可定制,易于使用.适合许多屏幕分辨率从小型移动设备到大型台式机. GitHub AdminLTE ...
- 在vue组件的stylus样式总 取消search类型的input按钮中默认样式
在vue组件的stylus样式中 取消search类型的input按钮中默认样式 记录一个坑 环境 Vue组件 使用了Stylus的CSS风格. 问题 input输入框使用了 type="s ...