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是一个单页面应用,大多数的资源需要在首次渲染前就加载 ...
随机推荐
- JAVASCRIPT技术 表达式验证
失去焦点时,调用方法: <html> <head><script type="text/javascript">function upperCa ...
- HUST - 1010 The Minimum Length（最小循环节）
1.赤裸裸的最小循环节 2. 3. #include<iostream> #include<stdio.h> #include<string.h> using na ...
- Tomcat 系统架构与设计模式之二
Tomcat 系统架构与设计模式,第 2 部分: 设计模式分析 来自:http://www.ibm.com/developerworks/cn/java/j-lo-tomcat2/ 这个分为两个部分的 ...
- 【Codeforces 20C】 Dijkstra？
[题目链接] 点击打开链接 [算法] dijkstra [代码] #include<bits/stdc++.h> using namespace std; typedef long lon ...
- css原生变量 var
css 变量的支持情况: 在pc端支持还不错,ie不支持,移动端也不支持,大概这就是css变量没有广泛使用的原因吧 CSS预编译工具Sass/Less/Stylus的便捷之处就是可以定义变量,方便代码 ...
- ASP.NET Core MVC 打造一个简单的图书馆管理系统 (修正版)（六）学生借阅/预约/查询书籍事务
前言: 本系列文章主要为我之前所学知识的一次微小的实践,以我学校图书馆管理系统为雏形所作. 本系列文章主要参考资料: 微软文档:https://docs.microsoft.com/zh-cn/asp ...
- Codeforces 702B【二分】
题意: 给一个a数组,输出有多少对相加是等于2^x的.1<=a[i]<=1e9,n<=1e5 思路: a[i]+a[j]=2^x 对于每个a[i],枚举x,然后二分查找a[j]; p ...
- git apply
1. git 安装 2.git 与服务器的验证 1.生成ssh ssh-keygen -t rsa -C "1107247128@qq.com" 2.查看生成的pub文件, ...
- Hdu 4513 吉哥系列故事——完美队形II (manacher变形)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4513 题目描述: 打完题目描述了,点开题目,发现题目是中文,orz.jpg.果断又删掉了,习惯真可怕 ...
- 1-13Object类之toString方法
Object中的toString方法 SUN在Object类中设计toString方法的目的:返回java对象的字符串表示形式. 在现实的开发过程中,Object中的toString方法就是要被重写的 ...