React入门2
最简单开始学习 JSX 的方法就是使用浏览器端的 JSXTransformer。我们强烈建议你不要在生产环境中使用它。你可以通过我们的命令行工具 react-tools 包来预编译你的代码。
如果往原生 HTML 元素里传入 HTML 规范里不存在的属性，React 不会显示它们。如果需要使用自定义属性，要加 data- 前缀。
如果需要在手机或平板等触摸设备上使用 React，需要调用 React.initializeTouchEvents(true); 启用触摸事件处理。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析</p>
<p>添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字</p>
<div id="example1"></div>
<div id="example2"></div>
<div id="example3"></div>
<div id="example4"></div>
<div id="example5"></div>
<div id="example6"></div>
<script src="react.js"></script>
<script src="JSXTransformer.js"></script>
<script type="text/jsx">
var names = ['Alice', 'Emily', 'Kate']; React.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example1')
); var myDivElement = <div className="foo" />;
React.render(myDivElement, document.getElementById('example2')); var MyComponent = React.createClass({
render: function() {
return (
<div className="commentBox">{this.props.name}</div>
)
},
componentDidMount: function() {
console.log(this.props.someProperty)
}
});
var myElement = <MyComponent name="John" someProperty={true} />;
React.render(myElement, document.getElementById('example3')); var NotesList = React.createClass({
render: function() {
return (
<ol>
{
this.props.children.map(function (child) {
return <li>{child}</li>
})
}
</ol>
);
}
}); // 这里需要注意，只有当子节点多余1个时，this.props.children 才是一个数组，否则是不能用 map 方法的， 会报错。
React.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,
document.getElementById('example4')
); var MyTitle = React.createClass({
getDefaultProps : function () {
return {
title : 'Hello World'
};
}, // PropTypes 告诉 React，这个 title 属性是必须的，而且它的值必须是字符串
propTypes: {
title: React.PropTypes.string.isRequired,
}, render: function() {
return <h1> {this.props.title} </h1>;
}
}); var data = '123'; React.render(
<MyTitle title={data} />,
document.getElementById('example5')
); var MyComponent = React.createClass({
handleClick: function() {
React.findDOMNode(this.refs.myTextInput).focus();
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>
);
}
}); React.render(
<MyComponent />,
document.getElementById('example6')
);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="example1"></div>
<div id="example2"></div>
<div id="example3"></div>
<script src="react.js"></script>
<script src="JSXTransformer.js"></script>
<script type="text/jsx">
var GroceryList = React.createClass({
handleClick: function(i) {
alert('You clicked: ' + this.props.items[i]);
}, render: function() {
return (
<div>
{this.props.items.map(function(item, i) {
return (
<div onClick={this.handleClick.bind(this, i)} key={i}>{item}</div>
);
}, this)}
</div>
);
}
}); React.render(
<GroceryList items={['Apple', 'Banana', 'Cranberry']} />, document.getElementById('example1')
); var Box = React.createClass({
getInitialState: function() {
return {windowWidth: window.innerWidth};
}, handleResize: function(e) {
this.setState({windowWidth: window.innerWidth});
}, componentDidMount: function() {
window.addEventListener('resize', this.handleResize);
}, componentWillUnmount: function() {
window.removeEventListener('resize', this.handleResize);
}, render: function() {
return <div>Current window width: {this.state.windowWidth}</div>;
}
}); React.render(<Box />, document.getElementById('example2')); function createMarkup() { return {__html: '<script>alert(2);<\/script><b>22</b>First · Second'}; };
React.render(<div dangerouslySetInnerHTML={createMarkup()} />, document.getElementById('example3'));
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="example1"></div>
<div id="example2"></div>
<div id="example3"></div>
<script src="react.js"></script>
<script src="JSXTransformer.js"></script>
<script type="text/jsx">
React.render(<input value="hi" />, document.getElementById('example1')); React.render(<input value={null} />, document.getElementById('example2')); var mountNode = document.getElementById('example3') var Todo = React.createClass({
render: function() {
return <div onClick={this.props.onClick}>{this.props.title}</div>;
}, //this component will be accessed by the parent through the `ref` attribute
animate: function() {
console.log('Pretend %s is animating', this.props.title);
}
}); var Todos = React.createClass({
getInitialState: function() {
return {items: ['Apple', 'Banana', 'Cranberry']};
}, handleClick: function(index) {
var items = this.state.items.filter(function(item, i) {
return index !== i;
});
this.setState({items: items}, function() {
if (items.length === 1) {
this.refs.item0.animate();
}
}.bind(this));
}, render: function() {
return (
<div>
{this.state.items.map(function(item, i) {
var boundClick = this.handleClick.bind(this, i);
return (
<Todo onClick={boundClick} key={i} title={item} ref={'item' + i} />
);
}, this)}
</div>
);
}
}); React.render(<Todos />, mountNode);
</script>
</body>
</html>
React入门2的更多相关文章
- react入门（3）
在第一篇文章里我们介绍了jsx.组件.css写法 点击查看react入门(1) 第二篇文章里我们介绍了事件.this.props.children.props....other.map循环 点击查 ...
- react入门（1）
这篇文章也不能算教程咯,就算是自己学习整理的笔记把. 关于react一些相关的简介.优势之类的,随便百度一下一大堆,我就不多说了,可以去官网(http://reactjs.cn/)看一下. 这片主要讲 ...
- react入门（2）
接着上一次的讲,如果没有看过上一篇文章的小伙伴可以先看一下http://www.cnblogs.com/sakurayeah/p/5807821.html React事件 可以先看一下官网讲解的内容h ...
- react入门（4）
首先还是来回顾一下前三篇讲的内容 react入门(1): jsx,组件,css写法 react入门(2):事件,this.props.children,props,...other react入门(3 ...
- React 入门实例教程(转载)
本人转载自: React 入门实例教程
- React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- React入门 (1)—使用指南（包括ES5和ES6对比）
前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...
- React入门简单实践
参考文献: 1.React入门示例教程——阮一峰 2.React仅仅只是你的界限 React主要的优点就是增量更新(虚拟DOM)和组件化(状态机). <!DOCTYPE html> < ...
- 2015年最热门前端框架React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- React入门资源整理
另外,附上我搜集的一些比较实用的学习资料,建议先看这些撸起来,再看什么乱七八糟的awsome系列. React入门资源整理 React项目新手指南 http://www.w3ctech.com/top ...
随机推荐
- 手动修复OneDrive的DNS污染屏蔽的方法
随着云计算的发展和微软云战略的持续推进,使用网盘进行文档存储.协同编辑与共享已成为文档操作的新流程.而Office.Office 365和OneDrive等微软产品是Windows用户的首选.但由于国 ...
- mysql分区功能详细介绍，以及实例
一,什么是数据库分区 前段时间写过一篇关于mysql分表的 的文章,下面来说一下什么是数据库分区,以mysql为例.mysql数据库中的数据是以文件的形势存在磁盘上的,默认放在/mysql/data下 ...
- 完全备份ORACLE数据库 并在另一台电脑上恢复
由于最近有oracle的项目,需要把数据库在另外一台电脑里面配置一个一样的数据库用来测试开发用,之前是一直使用mssql,只需要附加或者还原就行,但是在oracle里面,就没有这么简单,但是也不难,操 ...
- weblogic9.2重置密码
1.删除DefaultAuthenticatorInit.ldift 2.执行命令:java -cp /home/weblogic/bea/weblogic92/server/lib/weblogic ...
- IOS如何刷新视图上的显示内容
大家都知道,UItableView 有个 reloadData的方法,可以tableview刷新视图.而普通的View上面.我们如何刷新视图的呢? 下图是我做的一个用户登录之后显示用户昵称和个性签名还 ...
- autorelease 的基本使用
5-autorelease 的基本使用 0,引入 Person *p = [Persom new];[p release]; [p run]; [p run]; // 希望不立即释放,待 run执行完 ...
- 九度OJ 1107 搬水果 -- 哈夫曼树 2011年吉林大学计算机研究生机试真题
题目地址:http://ac.jobdu.com/problem.php?pid=1107 题目描述: 在一个果园里,小明已经将所有的水果打了下来,并按水果的不同种类分成了若干堆,小明决定把所有的水果 ...
- 24种设计模式--状态模式【State Pattern】
现在城市发展很快,百万级人口的城市一堆一堆的,那其中有两个东西的发明在城市的发展中起到非常重要的作用:一个是汽车,一个呢是...,猜猜看,是什么?是电梯!汽车让城市可以横向扩展,电梯让城市可以纵向延伸 ...
- ubuntu下编译安装apache
官网http://httpd.apache.org/download.cgi下载apache源码包后 /*解包*/ gzip -d httpd-2_x_NN.tar.gz tar -xf httpd- ...
- JavaScript之Chart.js图例(legend)
#html <div id="chart_line_legend" class="chart-legend"></div> <ca ...