Most Popular JavaScript Projects in Github
- {repoList}
React Native入门学习笔记三（JSX语法）
参考示例：
https://github.com/ruanyf/react-demos
demo1 javascript/babel
很简单，react的jsx语法 与js不同，引用的script标签要这样写：
<script type="text/babel">script>
<html>
<head>
<script src="../build/react.js">script>
<script src="../build/react-dom.js">script>
<script src="../build/browser.min.js">script>
head>
<body>
<div id="example">div>
<script type="text/babel">
// ** Our code goes here! **
script>
body>
html>demo2 简单数组遍历
var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
{
names.map(function (name) {
return Hello, {name}!
})
}
,
document.getElementById('example')
);render函数遇到
就按html解析，如果遇到{}就按js解析。
demo3 直接嵌入数组
var arr = [
<h1>Hello world!h1>,
<h2>React is awesomeh2>,
];
ReactDOM.render(
<div>{arr}div>,
document.getElementById('example')
);这时会直接展开数组内容。
demo4 创建component组件类
使用React.createClass。
var HelloMessage = React.createClass({
render: function() {
return Hello {this.props.name}
;
}
});
ReactDOM.render(
"John" />,
document.getElementById('example')
); 所有组件类必须有render方法；
组件类第一个字母必须大写；
组件类只能有一个顶层标签；
组件的属性在组件对象的this.props上获取；
this.props.children遍历组件所有子节点；
遍历子节点的示例：
var NotesList = React.createClass({
render: function() {
return (
<ol>
{
React.Children.map(this.props.children, function (child) {
return <li>{child}li>;
})
}
ol>
);
}
});
ReactDOM.render(
<NotesList>
<span>hellospan>
<span>worldspan>
NotesList>,
document.body
);子节点可能是undefined/object/array。可以使用React.Children.map遍历子节点避免undefined的情况。
demo05 React.Children.map
var NotesList = React.createClass({
render: function() {
return (
{
React.Children.map(this.props.children, function (child) {
return - {child}
;
})
}
);
}
});
ReactDOM.render(
hello
world
,
document.getElementById('example')
);React.children有另外几种方法：
map
forEach
count
only
toArray
可参考：https://facebook.github.io/react/docs/top-level-api.html#react.children
demo06 protoTypes验证
以下示例当title值为数值时，控制台会输出错误。
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
render: function() {
return {this.props.title}
;
}
});getDefaultProps设置默认值：
var MyTitle = React.createClass({
getDefaultProps : function () {
return {
title : 'Hello World'
};
},
render: function() {
return {this.props.title}
;
}
});
ReactDOM.render(
demo07 查找dom
以下示例使用ref查找真实的dom节点。dom节点从虚拟节点到插入到真实dom中时，引用才有效。
var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput.focus();
},
render: function() {
return (
"text" ref="myTextInput" />
"button" value="Focus the text input" onClick={this.handleClick} />
);
}
});
ReactDOM.render(
上面使用了click事件，除此之外，还有react还支持onClick, onKeyDown, onCopy等事件，参考文档：http://facebook.github.io/react/docs/events.html#supported-events
demo08 状态机 this.state
状态机是组件的特殊属性，在值变化时会刷新UI。
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 (
this.handleClick}>
You {text} this. Click to toggle.
);
}
});
ReactDOM.render(
demo09 表单
以下示例使用event.target.value获取文本框的值。
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 (
"text" value={value} onChange={this.handleChange} />
{value}
);
}
});
ReactDOM.render(, document.getElementById('example'));更多form组件参考：http://facebook.github.io/react/docs/forms.html
demo10 组件生命周期
组件生命周期分为三种状态：
- Mounting：已插入真实 DOM
- Updating：正在被重新渲染
- Unmounting：已移出真实 DOM
以下五个主要事件：
- componentWillMount()
- componentDidMount()
- componentWillUpdate(object nextProps, object nextState)
- componentDidUpdate(object prevProps, object prevState)
- componentWillUnmount()
还有两个特殊状态事件：
- componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
- shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
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), 100);
},
render: function () {
return (
this.state.opacity}}>
Hello {this.props.name}
);
}
});
ReactDOM.render(
"world"/>,
document.getElementById('example')
); demo11 ajax
以下示例，使用 componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI 。ajax请求部分使用了jQuery库。
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}>herea>.
div>
);
}
});
ReactDOM.render(
<UserGist source="https://api.github.com/users/octocat/gists" />,
document.getElementById('example')
);demo12 promise
下面示例把异步ajax作为组件的属性，
ReactDOM.render(
<RepoList
promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')}
/>,
document.body
);根据ajax的状态，显示loading,error或结果。
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 Loading...;
}
else if (this.state.error !== null) {
return Error: {this.state.error.message};
}
else {
var repos = this.state.data.items;
var repoList = repos.map(function (repo) {
return (
{repo.name} ({repo.stargazers_count} stars)
{repo.description}
);
});
return (
);
}
}
});