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是一个单页面应用,大多数的资源需要在首次渲染前就加载 ...
随机推荐
- bzoj 2301 [HAOI2011]Problem b（莫比乌斯反演+分块优化）
题意:对于给出的n个询问,每次求有多少个数对(x,y),满足a≤x≤b,c≤y≤d,且gcd(x,y) = k,gcd(x,y)函数为x和y的最大公约数. 1≤n≤50000,1≤a≤b≤50000, ...
- FPU同步（翻译）
本篇翻译的原英文在:http://mauve.mizuumi.net/2013/06/16/desyncs-and-fpu-synchronization/#more-725(可能要FQ) 如果你曾经 ...
- 【CAIOJ1177】 子串是否出现
[题目链接] 点击打开链接 [算法] KMP [代码] #include<bits/stdc++.h> using namespace std; #define MAXA 1000010 ...
- LOG.ZS.0001.基于Freetype的游戏字体渲染优化思路
Total Utf8-ucs2 Html_parse Layout Render_string Init_texture Ft_load_glyph 原始 2293 1 26 708 1556 2 1 ...
- JNI（Java Native Interface）
一.JNI(Java Native Interface) 1.什么是JNI: JNI(Java Native Interface):java本地开发接口 ...
- Sublime text 安装Package Control
Package Control 插件是一个方便 Sublime text 管理插件的插件,但因为 Sublime Text 3 更新了 Python 的函数,API不同了,导致基于 Python 开发 ...
- GetSafeHwnd()
CreateCompatibleBitmap The CreateCompatibleBitmap function creates a bitmap compatible with the devi ...
- Codeforces - 1118D2 - Coffee and Coursework (Hard Version) - 二分
https://codeforces.com/problemset/problem/1118/D2 也是很好想的一个二分啦. 验证m的可行性的时候,肯定是把最多咖啡因的咖啡先尽可能平均分到每一天,因为 ...
- poj 3294 Life Forms【SA+二分】
先加入未出现字符间隔把n个串连起来,注意如果串开的char这个间隔字符不能溢出,把这个接起来的串跑SA,二分答案k,判断的时候把连续一段he>=k的分成一组,然后看着一段是否包含了>n/2 ...
- IDEA thymeleaf ${xxx.xxx}表达式报错，红色波浪线
解决方法: 在<!DOCTYPE html>标签下面加上 <!--suppress ALL--> 代码如图: 不再报错,效果如下图: