React入门简单实践
参考文献：
React主要的优点就是增量更新（虚拟DOM）和组件化（状态机）。
<!DOCTYPE html>
<html>
<head>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.min.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head>
<body>
1<div id="example1"></div><br><br>
2<div id="example2"></div><br><br>
3<div id="example3"></div><br><br>
4<div id="example4"></div><br><br>
5<div id="example5"></div><br><br>
6<div id="example6"></div><br><br>
7<div id="example7"></div><br><br>
8<div id="example8"></div><br><br>
9<div id="example9"></div><br><br>
10<div id="example10"></div><br><br>
<script type="text/babel">
//ReactDOM.render()
var names=['LiMing','Zhangsam','Xiaoming'];
var addr=[<p>Beijing</p>,<p>Tianjin</p>];
ReactDOM.render(
<div>
{addr},
{
names.map
(
function(name)
{
return <div>hell0,{name}</div>
}
)
}
</div>,
document.getElementById('example1')); //组件,组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM
var HelloMessage1=React.createClass
({
render:function()
{
return (<h5>hello,{this.props.nameStr},{this.props.size}</h5>)
}
});
ReactDOM.render(
<HelloMessage1 nameStr='John' size='12'/>,document.getElementById("example2")
); var HelloMessage2=React.createClass
({
render:function()
{
return (
<ol>
{
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>
})
}
</ol>
);
}
});
ReactDOM.render(
<HelloMessage2>
<span>one</span>
<span>two</span>
<span>three</span>
</HelloMessage2>
,document.getElementById("example3")
); //PropTypes验证参数
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,//PropTypes验证组件参数
},
getDefaultProps : function () {//getDefaultProps设置组件默认值
return {
msg : 'Hello World'
};
},
render: function() {
return <h1> {this.props.title}，{this.props.msg} </h1>;
}
});
var data = 123;
ReactDOM.render(
<MyTitle title={data} />,
document.getElementById("example4")
);//you can see message in console: Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`. //获得真实的DOM节点,ref属性
var MyComponent = React.createClass({
handleClick: function() {
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>
);
}
}); ReactDOM.render(
<MyComponent />,
document.getElementById('example5')
); //this.state,React的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
}); ReactDOM.render(
<LikeButton />,
document.getElementById('example6')
); //this.props 和 this.state 都用于描述组件的特性,this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性
//表单
var Input = React.createClass({
getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function () {
var value = this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.handleChange} />
<p>{value}</p>
</div>
);
}
});
ReactDOM.render(<Input/>, document.getElementById('example7')); //组件的生命周期
var Hello = React.createClass({
getInitialState: function () {
return {
opacity: 1.0
};
}, componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), 200);
}, render: function () {
return (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);//React 组件样式是一个对象，所以style里第一重大括号表示这是 JavaScript 语法，第二重大括号表示样式对象。// }
}); ReactDOM.render(
<Hello name="world"/>,
document.getElementById('example8')
); //Ajax (1)
var UserGist = React.createClass({
getInitialState: function() {
return {
username: '',
lastGistUrl: ''
};
}, componentDidMount: function() {
$.get(this.props.source, function(result) {
var lastGist = result[0];
if (this.isMounted()) {
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}
}.bind(this));
}, render: function() {
return (
<div>
{this.state.username}'s last gist is
<a href={this.state.lastGistUrl}> {this.state.lastGistUrl}</a>.
</div>
);
}
});
ReactDOM.render(
<UserGist source="https://api.github.com/users/ruanyf/gists" />,
document.getElementById('example9')
) //Ajax (2) Promise
var RepoList = React.createClass({
getInitialState: function() {
return { loading: true, error: null, data: null};
}, componentDidMount() {
this.props.promise.then(
value => this.setState({loading: false, data: value}),
error => this.setState({loading: false, error: error}));
}, render: function() {
if (this.state.loading) {
return <span>Loading...</span>;
}
else if (this.state.error !== null) {
return <span>Error: {this.state.error.message}</span>;
}
else {
var repos = this.state.data.items;
var repoList = repos.map(function (repo) {
return (
<li>
<a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}
</li>
);
});
return (
<main>
<h1>Most Popular JavaScript Projects in Github</h1>
<ol>{repoList}</ol>
</main>
);
}
}
});
ReactDOM.render(
<RepoList
promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')}
/>,
document.getElementById('example10')
);
</script>
</body>
</html>
React入门简单实践的更多相关文章
- React Native入门——布局实践：开发京东client首页（一）
有了一些对React Native开发的简单了解,让我们从实战出发.一起来构建一个简单的京东client. 这个client是仿照之前版本号的京东client开发的Android版应用,来源于CSDN ...
- Python编程从入门到实践笔记——变量和简单数据类型
Python编程从入门到实践笔记——变量和简单数据类型 #coding=gbk #变量 message_1 = 'aAa fff' message_2 = 'hart' message_3 = &qu ...
- react 入门与进阶教程
react 入门与进阶教程 前端学习对于我们来说越来越不友好,特别是随着这几年的发展,入门门槛越来越高,连进阶道路都变成了一场马拉松.在学习过程中,我们面临很多选择,vue与react便是一个两难的选 ...
- React入门 (2)—实现微博展示列表
前言 如果从来不了解React先看前篇React入门 (1)-使用指南(包括ES5和ES6对比). 本文为了能将前篇学到的react知识学以致用,做了一个类似微博展示列表的demo.使用的是ES6+R ...
- react技术栈实践（2）
本文来自网易云社区 作者:汪洋 这时候还没完,又有两个问题引出来了. 按照上面的配置,第三方库 antd 竟然也被编译了,导致样式失败. react中,一旦包裹了子组件,子组件没办法直接使用 styl ...
- 初探Electron，从入门到实践
本文由葡萄城技术团队于博客园原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 在开始之前,我想您一定会有这样的困惑:标题里的Electron ...
- React入门学习
为了获得更好的阅读体验,请访问原地址:传送门 一.React 简介 React 是什么 React 是一个起源于 Facebook 的内部项目,因为当时 Facebook 对于市场上所有的 JavaS ...
- react入门（3）
在第一篇文章里我们介绍了jsx.组件.css写法 点击查看react入门(1) 第二篇文章里我们介绍了事件.this.props.children.props....other.map循环 点击查 ...
- react入门（1）
这篇文章也不能算教程咯,就算是自己学习整理的笔记把. 关于react一些相关的简介.优势之类的,随便百度一下一大堆,我就不多说了,可以去官网(http://reactjs.cn/)看一下. 这片主要讲 ...
随机推荐
- PHP Apache 配置伪静态
1.首先是开启rewrite_module(如何开启,百度搜索) 2.创建.htaccess文件(如何创建,百度搜索) 3.在.htaccess文件中打开重写服务:RewriteEngine On 4 ...
- Ceph: validate that the RBD cache is active
Ceph: validate that the RBD cache is active Quick and simple test to validate if the RBD cache is en ...
- 提高你的数据库编程效率：Microsoft CLR Via Sql Server
你还在为数据库编程而抓狂吗?那些恶心的脚本拼接,低效的脚本调试的日子将会与我们越来越远啦.现在我们能用支持.NET的语言来开发数据库中的对象,如:存储过程,函数,触发器,集合函数已及复杂的类型.看到这 ...
- Shell脚本_备份/etc数据
vim backup_etc.sh chmod 755 backup_etc.sh 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 2 ...
- selenium启动IE浏览器报错：Unexpected error launching Internet Explorer. Browser zoom level was set to
解决此问题的方法就是查看自己的浏览器是否没有放大至100%,如下 如果不是100%就会报错
- Java实现本地 fileCopy
前言: Java中流是重要的内容,基础的文件读写与拷贝知识点是很多面试的考点.故通过本文进行简单测试总结. 2.图展示[文本IO/二进制IO](这是参考自网上的一张总结图,相当经典,方便对比记忆) 3 ...
- Django入门之自定义页面
1.创建项目,创建app django-admin.py startproject HelloWord python3 manage.py startapp sync_one #第二步需要进入Hell ...
- Hive 窗口函数、分析函数
1 分析函数:用于等级.百分点.n分片等 Ntile 是Hive很强大的一个分析函数. 可以看成是:它把有序的数据集合 平均分配 到 指定的数量(num)个桶中, 将桶号分配给每一行.如果不能平均分配 ...
- Java多线程与并发库高级应用-工具类介绍
java.util.concurrent.Lock 1.Lock比传统线程模型中的synchronized方式更加面向对象,与生活中的锁类似,锁本身也应该是一个对象.两个线程执行的代码片段要实现同步互 ...
- 【BZOJ-2648&2716】SJY摆棋子&天使玩偶 KD Tree
2648: SJY摆棋子 Time Limit: 20 Sec Memory Limit: 128 MBSubmit: 2459 Solved: 834[Submit][Status][Discu ...