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/)看一下. 这片主要讲 ...
随机推荐
- zabbix 用 LLD 完全自动化监控 Oracle
文章转载自:http://mp.weixin.qq.com/s?__biz=MzA3MzYwNjQ3NA==&mid=2651296856&idx=1&sn=2bdf78071 ...
- 简单的JS控制button颜色随点击更改
先上效果图: 默认“今日”是选中状态,是行内样式: <button type="button" id="today" class="btn-li ...
- Region的周长, 面积与紧凑程度
Perimeter 边界长度. 计算方式跟边界的表示方式有关 Area 包含的点的个数 Compactness 两种常用的计算方式 \(\frac {perimeter^2}{area}\). cir ...
- subroutines of perl
#!/usr/bin/perl -w @students = qw/Doreen Oskar Elin Sangeet Malin/; &next_student; &next_stu ...
- [bzoj1618][Usaco2008 Nov]购买干草
Description 约翰的干草库存已经告罄,他打算为奶牛们采购磅干草． 他知道个干草公司,现在用1到给它们编号．第个公司卖的干草包重量为磅,需要的开销为美元．每个干草公司的货源都十分充 ...
- 【poj2459】 Feed Accounting
http://poj.org/problem?id=2459 (题目链接) 题意 一堆不知何时运到的草料原有F1 kg,在第D天被牛吃成F2 kg,每头牛在[l,r]吃草料,每天吃1kg.求草料是什么 ...
- Linux内核版本类型
对于Linux内核发布的版本类型有如下,也是自己的理解: [mainline]:主线版本,由Linux Torvalds维护和发布. [stable/EOL]:稳定版本,每个由主线发布的版本都叫做稳定 ...
- Jenkins使用jenkins-cli.jar进行远程调用时出现“ERROR: No such job 'test'”的问题解决（Windows）
网上最提倡的解决办法是用SSH的key进行登录,但是我发觉Linux上非常容易实现,但是Windows压根不知道在哪里设置. 原文:https://issues.jenkins-ci.org/brow ...
- “SQLServerAgent当前未运行”问题解决
在执行SQLServer计划任务的时候,出现了如下所示的错误: 解决方法: 配置工具--sqlserver 配置管理器--SQLSERVER服务--右侧最下面--点击启动AGENT即可
- Linux Crontab 定时任务 命令详解
一. Crontab 介绍 crontab命令的功能是在一定的时间间隔调度一些命令的执行. 1.1 /etc/crontab 文件 在/etc目录下有一个crontab文件,这里存放有系统运行的一些调 ...