React.js入门小案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例</title>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.runoob.com/assets/react/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel"> var HelloMessage=React.createClass({
getInitialState:function(){
return {value:'TTTK'};
},
handleChange:function(event){
this.setState({value:event.target.value});
},
render:function(){
var value=this.state.value;
return(
<div>
<Content myDataProp={value} updateStateProp={this.handleChange}></Content>
</div>
);
},
});
var Content=React.createClass({
render:function(){
return(
<div>
<input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp}/>
<h4>{this.props.myDataProp}</h4>
</div>
);
},
});
ReactDOM.render(
<HelloMessage/>,
document.getElementById("example")
);
</script>
</body>
</html>
react.js小案例（input框值变，对应变）
React.js入门小案例的更多相关文章
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- 02SpringMvc_springmvc快速入门小案例（XML版本）
这篇文章中,我们要写一个入门案例,去整体了解整个SpringMVC. 先给出整个项目的结构图:
- spring boot入门小案例
spring boot 入门小案例搭建 (1) 在Eclipse中新建一个maven project项目,目录结构如下所示: cn.com.rxyb中存放spring boot的启动类,applica ...
- React.js 入门与实战课程思维导图
原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,在这里分享了课程中的思维导图,供大家参考. 原文发表于我的技术博客 此导图为课程 ...
- React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了
原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...
- Hibernate的介绍及入门小案例
1.Hibernate的诞生 在以前使用传统的JDBC开发应用系统时,如果是小型应用系统,并不觉得有什么麻烦,但是对于大型应用系统的开发,使用JDBC就会显得力不从心,例如对几十,几百张包含几十个字段 ...
- React.js - 入门
React.js - 第1天 1. React简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 ...
- React.js入门笔记(再续)：评论框的实现
本案例来自React.js中文官网对应内容. 一. 运行环境 <link rel="stylesheet" type="text/css" href=&q ...
- 前端框架React Js入门教程【精】
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...
随机推荐
- iOS - (调用系统本机打电话功能)
如下图所示,点击订单里的打电话 button 后,调用系统的打电话功能. 这个调用系统打电话功能有点简单,不需要遵守协议和代理什么的,直接在点击方法里写上几句代码就可以了. 下面来看看代码吧: 接下来 ...
- Java基础之写文件——将多个字符串写入到文件中（WriteProverbs）
控制台程序,将一系列有用的格言写入到文件中. 本例使用通道把不同长度的字符串写入到文件中,为了方便从文件中恢复字符串,将每个字符串的长度写入到文件中紧靠字符串本身前面的位置,这可以告知在读取字符串之前 ...
- GTA项目 三, 使用 bootstrap table展示界面,使得data和UI分离
/** bootstrap-table - v1.5.0 - 2014-12-12* https://github.com/wenzhixin/bootstrap-table* Copyright ( ...
- iphone 语音备忘录 同步问题
iphone 是很人性化的,但itune是反人类的. 我想同步电话里的语音备忘录,结果有几个记录在itunes里面是不显示的,无法同步出来. 找了很多解决方法,最后找了ifunbox才搞定.
- Swift游戏实战-跑酷熊猫 08 产生源源不断的移动平台
原理 代码实现 这节内容我们一起学习下平台的生产算法. 要点: 何时生成新的平台: 当上一个平台的右边完全进入场景的时候,就可以生成新的平台类. 如何知道上一个平台完全进入场景: 主场景中有个变量la ...
- Swift实战-豆瓣电台（二）界面布局
观看地址 http://v.youku.com/v_show/id_XNzMwMDg4NzAw.html 这节的内容主要是storyboard的操作. 有以下几个知识点 1 TableView的Dat ...
- int和long long有符号整形 负数比正数多一个
int的负数比正数多一个,则有一个负数在int范围内没有对应的正数 最大正整数用十六进制,很容易表示:0x7f ff ff ff int num = 0x7fffffff; num = -num; p ...
- Java基础(41):Java中集合中需要注意的几个要点（关于Collection与Map）
同步性 Vector是同步的.这个类中的一些方法保证了Vector中的对象是线程安全的.而ArrayList则是异步的,因此ArrayList中的对象并 不是线程安全的.因为同步的要求会影响执 ...
- 活动组件（三）：Intent
大多数的安卓应用都不止一个Activity,而是有多个Activity.但是点击应用图标的时候,只会进入应用的主活动. 因此,前面我已经建立了一个主活动了,名字是myActivity,现在我再建立一个 ...
- linux第1天 fork exec 守护进程
概念方面 文件是对I/O设备的抽象表示.虚拟存储器是对主存和磁盘I/O设备的抽象表示.进程则是对处理器.主存和I/O设备的抽象表示 中断 早期是没有进程这个概念,当出现中断技术以后才出现进程这个概念 ...