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/)看一下. 这片主要讲 ...
随机推荐
- js 对象数组根据对象中的属性排序
function createComparisonFunction(propertyName){ return function(object1,object2){ var value1 = obje ...
- java定时器
package com.lid; import java.util.Calendar; import java.util.Date; import java. ...
- Xcode 修改工程名以及注意事项
1.先把整个工程文件夹名改为新的工程名. 2.打开工程,单击,输入新的工程名,会出现,点击确定. 3.回到工程界面,在中选择 Manage Schemes,然后再弹出的对话框,把工程名改为新的名字. ...
- matplotlib 和 pandas 两个包的安装
matplotlib是强大的python 绘图包.pandas 是强大的python分析工具包.numpy是强大的python统计包. 都超级好用,而且最近开始动手实践机器学习算法了.特此备注一下安装 ...
- Ubuntu下C/C++man手册安装方法及使用方法
C++在线文档: http://www.cplusplus.com/reference/ https://msdn.microsoft.com/zh-cn/library/aa187916.aspx ...
- bzoj1104: [POI2007]洪水pow
#include <iostream> #include <cstdio> #include <cmath> #include <cstring> #i ...
- JS监听DOM结构变化
在做一个微博的接入,需要判断微博是否被关注,要检查微博标签的DIV是否有“已关注”的字符,但这个DIV的内容是微博JSSDK动态生成.$("#id").html()是获取不到我想要 ...
- IDEA新建MAVEN项目时速度缓慢
原因 IDEA根据maven archetype的本质,其实是执行mvn archetype:generate命令,该命令执行时,需要指定一个archetype-catalog.xml文件. 该命令的 ...
- HDU 1213 How Many Tables（并查集）
传送门 Description Today is Ignatius' birthday. He invites a lot of friends. Now it's dinner time. Igna ...
- 【Beta版本】冲刺-Day2
队伍:606notconnected 会议时间:12月10日 目录 一.行与思 二.站立式会议图片 三.燃尽图 四.代码Check-in 一.行与思 张斯巍(433) 今日进展:对登录界面做了相应的修 ...