firstDemo.html
<!DOCTYPE html>
<html >
<head>
<script src="es5-shim.min.js"></script>
<script src="es5-sham.min.js"></script>
<script src="console-polyfill.js"></script>
<script type="text/javascript" src="react.min.js"></script>
<script type="text/javascript" src="JSXTransformer.js"></script>
</head>
<body>
<div id="content" ></div>
<script type="text/jsx">
//React.render(<h1>Hello,World</h1>, document.getElementById("content"));
var ExampleApplication = React.createClass({
getInitialState: function(){
return {img: "image1.jpg"};
},
componentDidMount: function(){
var $this = this;
setInterval(function() {
$this.setState({
img: $this.state.img == "image1.jpg" ? "image2.jpg" :"image1.jpg"
});
}, 1000);
},
render: function() {
return <img width="500" height="400" src={this.state.img} />;
}
});
React.render(
<ExampleApplication/>, document.getElementById('content')
);
</script>
</body>
</html>
运行效果：两张图张在页面不停进行切换
完整工程见：firstDemo.rar，官方react-0.13.2.zip包中的实例是很好的学习资料。
相关推荐
第一部分是基础篇，介绍React 与Redux 的基础知识；第二部分是进阶篇，通过精彩的官方示例学习React 与Redux；第三部分是拓展篇，主要学习一些优秀的第三方拓展；第四部分是实战篇，将会带领读者一步步搭建大型Web ...
从头到尾、由浅入深地介绍了使用React 实现组件化Web 应用的完整流程。作者从React 元素、React 组件等...最后，为进一步提升React 应用的灵活性，作者还以实例展示了如何引入Flux 架构，让读者的开发技能更上一层楼。
本人小白一名，第一次学习react ,该资料为本人原创，采用的是react+ant design的Tabled的一个小demo,暂时只实现了增加，删除单行，多行删除有Bug,查看详情，呕心沥血耗时一周完成，禁止抄袭，转载请先留言， 1、main...
如果您有更复杂的需求，或者觉得默认提供的组件功能不够，可以利用 Map 组件返回的地图实例，完全自定义一个地图组件，并根据高德原生 API 进行扩展，实现高德地图允许的所有功能。该组件自动加载高德地图 SDK，通过...
React 是一个用于构建用户界面的 JavaScript 库。... 这是让您入门的第一个： var HelloMessage = React . createClass ( { render : function ( ) { return < div> Hello { this . props . name } < / div >
AsyncStorage提供了较全的方法供我们使用，每个方法都有一个回调函数，而回调函数的第一个参数都是错误对象error，所有的方法执行之后都会返回一个Promise对象。 方法： static getItem(key: string, callback?: ?...
React 精髓》面向初中级前端开发者，从头到尾、由浅入深地介绍了使用React 实现组件化Web 应用的完整...最后，为进一步提升React 应用的灵活性，作者还以实例展示了如何引入Flux 架构，让读者的开发技能更上一层楼。
《React（第2版）：引领未来的用户界面开发框架》由多位一线专家精心撰写，采用全程实例介绍和剖析了React.js的方方面面，适合广大前端开发者、设计人员，以及所有对未来技术趋势感兴趣者阅读。《React（第2版）：...
本文主要介绍了React Native第三方平台分享的实例（Android，IOS双平台），分享给大家，具体如下： 源码已开源到Github，地址请点击：react-native-share 【一行代码，双平台分享】 目前支持分享的平台有【QQ】【QQ...
功能 基本功能 支持受密码保护的文档 缩放： 支持自定义级别，例如实际大小、页面大小和页面宽度 页面之间导航 可以快速转到第一页和最后一页 搜索文本 预览页面缩略图 查看和导航目录 列表和下载附
上册共分为10部分，这是第1部分 Windows内核情景分析（上册）.part01.rar 基本信息 作者： 毛德操 出版社：电子工业出版社 ISBN：9787121081149 上架时间：2009-5-25 出版日期：2009 年5月 开本：16开 页码：1465 ...
这些情况怎么跟React Router对接呢？ 下面是一个表单。 <form onSubmit={this.handleSubmit}> <input type=text placeholder=...第一种方法是使用browserHistory.push import { browserHistory } from '
React实现分页效果 本文实例为大家分享了React实现分页效果的具体代码，供大家... import './loading.scss' import Unit from '../hml' const App = () => { // 设置第几页 const [num, setNum] = useState(1)
第一步首先创建ReactNative 模块类继承ReactContextBaseJavaModule package com.mixture; import android.content.Context; import android.widget.Toast; import ...
react-field-mapping 关系映射组件 View the and its for more. 使用中需要注意的一点是relation，是由组件内部控制的，所以是不受控的，连线后组件内部relation改变，连线也是组件内部控制。但是外部传入的relation...
componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, ...
具有服务器端渲染的第一个和替代方案。 建立 Next.js设置 请参阅设置说明。 Vanilla React设置 要从安装 ，请运行： npm install graphql-react 创建一个实例，并使用为您的应用程序提供它。 对于服务器端渲染，...
本文实例讲述了React生命周期原理与用法。...在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方
文章第一版出自简书，如果出现图片或页面显示问题，烦请转至 简书 查看 也希望喜欢的朋友可以点赞，谢谢 什么是 FlexBox 布局 在 html 中，界面的搭建都是采用 CSS 的布局方式，CSS 是基于盒子模型，依赖于 display...