React官网首页demo(单文件实现版)
本博客实现React官网首页上展示的demo, 为了方便直接采用单文件的形式, 如果想完整集成
在自己的项目中, 可以参考React官网的安装指南, 安装Create React App.
hello-world
请移步至我写的这篇博客: 单文件快速体验使用react输出hello_world
A Stateful Component
React组件除了通过this.props传入参数, 还在内部维护this.state, 该数据只能在组件
才能访问. 一旦组件的this.state发生改变, React将通过调用render()重新渲染该组件.
下面的实例, 演示了利用React.Component API的事件绑定, 实现一个简单的计数器.
完整代码如下:
<!-- filename: a-stateful-component.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>A Stateful Component</title>
<script src="https://unpkg.com/react@15.6.1/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15.6.1/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Timer extends React.Component {
constructor(props) {
super(props); // ES特性
this.state = {secondsElapsed: 0}; // elapse 流逝
}
tick() {
this.setState(
(prevState) => ({
secondsElapsed: prevState.secondsElapsed + 1
})
);
// 要根据以前的state值, 改变现在的state值, 需要使用函数, 上面函数
// 的参数prevSate不是固定, 可以换成任意其它名称.
// 传入的参数不管叫什么名称, 都将自动成为指向以前state的引用
}
componentDidMount() {
// 这个事件将会在React成功渲染Timer组件时, 被触发
// 其为React.Component提供的API, 名称为固定写法
this.interval = setInterval(() => this.tick(), 1000);
// 这里必须使用箭头函数, 直接使用this.tick, 将发生
// 找不到this的情况
}
componentWillUnmount() {
// 这个事件将会在Timer组件被从页面移除时被触发
// 其为React.Component提供的API, 名称为固定写法
clearInterval(this.interval);
}
render() {
return (
<div>时间流逝: {this.state.secondsElapsed}</div>
);
}
}
ReactDOM.render(<Timer />, document.getElementById('root'));
</script>
</body>
</html>
运行分析:
- 执行
Timer组件的render()函数进行页面渲染, 随后执行constructor构造函数. - 页面渲染完毕后执行
componentDidMount().
An Application
利用state和props, 实现一个TodoList的小应用.
完整代码如下:
<!-- filename: an-application.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script src="https://unpkg.com/react@15.6.1/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15.6.1/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this); // this绑定, 标配
this.handleChange = this.handleChange.bind(this); // this绑定, 标配
this.state = {items: [], text: ''};
}
render() {
return (
<div>
<h3>TODO APP</h3>
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<input value={this.state.text} onChange={this.handleChange} />
<button>增加第 {this.state.items.length + 1} 项</button>
<p>单击button, 就意味着表单被提交</p>
</form>
</div>
);
}
handleChange(e) {
this.setState({
text: e.target.value
});
}
handleSubmit(e) {
e.preventDefault();
var newItem = {
text: this.state.text,
id: Date.now()
// 获取当前时间作为list key
// 这是react推荐用法
};
this.setState(
(prevState) => ({
items: prevState.items.concat(newItem),
text: '' // 单击提交, 就把当前输入框清空
})
);
// console.log(this.state);
}
}
class TodoList extends React.Component {
render() {
return (
<ul>
{this.props.items.map(
item =>
<li key={item.id}>{item.text}</li>
)}
</ul>
);
}
}
ReactDOM.render(
<TodoApp />,
document.getElementById('root')
);
</script>
</body>
</html>
代码运行分析:
- 当我们编辑输入框时, 实时的把录入内容, 同步到
this.sate.text. 为此我们为输入框,
绑定onChange事件. 输入框的value始终和this.sate.text保持同步. - 当我们单击提交按钮时, 我们把当前输入框的值, 追加到
this.state.items中, 为此,
我们为提交按钮绑定onSubmit事件. - 我们把用户输入的内容数组, 也就是
this.state.items数组, 作为参数, 传给子组件TodoList,
也就是给TodoList加items={this.state.items}属性, 我们在子组件里this.props.items,
拿到从父组件里得到的用户输入数组, 使用map循环遍历, 并输出.
React官网首页demo(单文件实现版)的更多相关文章
- React.js 官网入门教程 分离文件 操作无法正常显示HelloWord
对着React官网的教程练习操作,在做到分离文件练习时,按照官网步骤来却怎么也无法正常显示HelloWord. 经测试,html文件中内容改为: <!DOCTYPE html><ht ...
- 一款仿PBA官网首页jQuery焦点图的切换特效
一款仿PBA官网首页jQuery焦点图的切换特效,非常的简单大方, 在对浏览器兼容性的方面做了不少的功夫.IE6也勉强能过去. 还是一款全屏的焦点图切换特效.大气而清新.很适合简介大方的网站. 下图还 ...
- 针对石家庄铁道大学官网首页的UI分析
身为一名光荣的铁大铮铮学子,我对铁大的网站首页非常的情有独钟,下面我就石家庄铁道大学的官网首页进行UI分析: 1.在首页最醒目的地方赫然写着石家庄铁道大学七个大字,让人一眼就豁然开朗. 2.网站有EN ...
- 我照着NancyFx官网的demo来做为什么会有错误呢？？？？
我照着NancyFx官网的demo来做为什么会有错误呢???? >> csharp这个答案描述的挺清楚的:http://www.goodpm.net/postreply/csharp/10 ...
- Axure实现vcg官网首页原型图
W240第二天第三天 Axure的简单使用: 作业实现:vcg官网首页原型图 帮助文档基础篇:原型图基础之axure线框图设计 导航栏设计: 添加通用母版header 导航栏设计注意: 鼠标移动到下面 ...
- 360随身WIFI程序单文件绿色版及网卡驱动（附使用感受）
大家好,我是Colin,今天刚收到传说中的360WIFI,拿到手后马上就进行了测试.就做工而言,19.9的价格算是比较公道的,网卡很小,做工还可以,带磨砂质感,而且还提供了一个耳机插头,可以当挂件一样 ...
- IE6 单文件绿色版
IE6单文件绿色版,可以直接运行,无需安装,完美兼容Win10(自带2016年1月更新). https://www.lanzous.com/i3w7dej
- 开源作品-PHP写的Redis管理工具(单文件绿色版)-SuRedisAdmin_PHP_1_0
前言:项目开发用到了Redis,但是在调试Redis数据的时候,没有一款通用的可视化管理工具.在网络找了一些,但是感觉功能上都不尽人意,于是决定抽出一点时间,开发一个用起来顺手的Redis管理工具.秉 ...
- 开源作品-PHP写的JS和CSS文件压缩利器(单文件绿色版)-SuMinify_PHP_1_5
前言: 网站项目需要引用外部文件以减小加载流量,而且第一次加载外部资源文件后,其他同域名的页面如果引用相同的地址,可以利用浏览器缓存直接读取本地缓存资源文件,而不需要每个页面都下载相同的外部资源文件. ...
随机推荐
- EMQ进行HttpApi登录问题
今天进行EMQ http api调用的时候遇到一个问题,一直弹出登录验证框 在官网资料中也找不到相关的接口,如下图: 以前也经常看到这种登录,不过我这里没有用程序去调用过这样类似的接口. 后来我想到经 ...
- 目录视图摘要视图订阅 基于Extjs开发不允许为空的文本框提示及相应的验证错误提示(转)
原文地址:http://blog.csdn.net/kunoy/article/details/8007585 本文主要解决问题: 1.区分哪些文本框不允许为空,很多网站都采用在文本框后加*号,ext ...
- hdu6076 Security Check 分类dp 思维
/** 题目:hdu6076 Security Check 链接:http://acm.hdu.edu.cn/showproblem.php?pid=6076 题意:有两个队列在排队,每一次警察可以检 ...
- 多线程中wait和notify的理解与使用
1.对于wait()和notify()的理解 对于wait()和notify()的理解,还是要从jdk官方文档中开始,在Object类方法中有: void notify() Wakes up a s ...
- xml传输过程中中文乱码
------------------------------------------request:----------------------------------------------- pu ...
- 【BZOJ】2060: [Usaco2010 Nov]Visiting Cows 拜访奶牛（树形dp）
http://www.lydsy.com/JudgeOnline/problem.php?id=2060 裸的树形dp d[x][1]表示访问x的数量,d[x][0]表示不访问x的数量 d[x][1] ...
- 开启GitHub模式，now!
(原文地址为:http://www.karottc.com/blog/2014/06/15/current-doing/) 最近看到了一篇文章,该文章的作者将自己连续177天在github上commi ...
- VR应用开发遍地走的日子还有多远
从上世纪60年代美国计算机科学家Ivan Sutherland发明的第一款真正意义上的虚拟现实头盔,到Facebook以20亿美元收购"虚拟现实之眼"Oculus Rift,大批厂 ...
- 【译】.Net 垃圾回收机制原理（转）
上一篇文章介绍了.Net 垃圾回收的基本原理和垃圾回收执行Finalize方法的内部机制:这一篇我们看下弱引用对象,代,多线程垃圾回收,大对象处理以及和垃圾回收相关的性能计数器. 让我们从弱引用对象说 ...
- ios消息推送机制原理与实现
本文转载至 http://hi.baidu.com/yang_qi168/item/480304c542fd246489ad9e91 Push的原理: Push 的工作机制可以简单的概括为下图 图中, ...