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/)看一下. 这片主要讲 ...
随机推荐
- JPA Hibernate应用实例
1.配置文件:persistence.xml <?xml version="1.0" encoding="UTF-8"?> <persiste ...
- [转]oracle学习入门系列之五内存结构、数据库结构、进程
原文地址:http://www.2cto.com/database/201505/399285.html 1 Oracle数据库结构 关于这个话题,网上一搜绝对一大把,更别提书籍上出现的了,还有很多大 ...
- Freemarker list标签,list数据判断使用
<#if listSecMDIF?exists && (listSecMDIF?size>0)> <ul style="float: left;mar ...
- servlet监听器Listener（理论+例子）
Listener采用了观察者模式(24种模式之一),Listener是servlet的监听器,他可以监听客户端的请求.服务器端的操作等, 通过监听器,可以自动激发一些操作.比如:监听在线用户数量 当增 ...
- 【POJ 2942】Knights of the Round Table（点双连通分量，二分图染色）
圆桌会议必须满足:奇数个人参与,相邻的不能是敌人(敌人关系是无向边). 求无论如何都不能参加会议的骑士个数.只需求哪些骑士是可以参加的. 我们求原图的补图:只要不是敌人的两个人就连边. 在补图的一个奇 ...
- java高新技术-泛型
1.体验泛型 泛型是提供给javac编译器使用的,可以限定集合中的输入类型,让编译器挡住源程序中的非法输入,编译器编译带类型说明的集合时去除掉"类型"信息,使程序运行小效率不受影响 ...
- bzoj 1503 splay
因为是整体加减,所以直接记录在外面. #include<iostream> #include<cstdio> #include<cstring> #include& ...
- 【BZOJ-3786】星系探索 Splay + DFS序
3786: 星系探索 Time Limit: 40 Sec Memory Limit: 256 MBSubmit: 647 Solved: 212[Submit][Status][Discuss] ...
- [iOS Hybrid实践：UIWebView中Html中用JS调用OC方法，OC执行JS代码]
原理: 1.JS调用OC 每次webview执行跳转时都会被iOS给拦截,执行下面函数获得系统允许. 因此可以根据跳转信息转给系统,执行相应功能,比如打开相册等. // 网页中的每一个请求都会被触发 ...
- （原）String、StringBuilder、StringBuffer作为形参
今天在刷一道算法题时,突然遇到StringBuilder作为形参和String作为形参时,最终得出来的结果不同.故尝试了几个demo看看它们之间的区别. 当String类型作为参数时, public ...