摘要
react 学习包括几个部分：
- 文本渲染
- JSX 语法
- 组件化思想
- 数据流
文本渲染
1. 纯文本渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<title>页面无变量渲染模板</title>
</head>
<body>
<div id="container"></div>
</body>
<script src="../build/react.js"></script>
<script src="../build/JSXTransformer.js"></script>
<script type="text/jsx">
var ExampleApplication = React.createClass({
render: function() {
return (
<div className="test">
猴赛雷，我的第一个react demo 啊。
</div>
);
}
});
var ExampleApplication1 = React.createClass({
render: function () {
return (<div>hello word</div>);
}
});
React.render(
<ExampleApplication1 />,
document.getElementById('container')
);
</script>
</html>
2. 普通变量渲染及按时间循环渲染
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>普通变量渲染及按时间循环渲染</title>
</head>
<body>
<div id="HelloWorld"></div>
<div id="HelloWorldTime"></div>
<div id="HelloWorldIndex"></div>
</body>
<script src="../build/react.js"></script>
<script src="../build/JSXTransformer.js"></script>
<script type="text/jsx">
var HelloWorldTime = React.createClass({
render: function() {
return (
<p>
It is {this.props.date.toTimeString()}
</p>
);
}
});
var HelloWorldIndex = React.createClass({
render: function() {
return (
<p>
index: {this.props.index}
</p>
);
}
});
var HelloWorld = React.createClass({
render: function() {
return (
<p>
你好，{this.props.name}, 欢迎大驾光临！
</p>
);
}
});
React.render(
<HelloWorld name={'huxiaoyun'} />,
document.getElementById('HelloWorld')
);
var index = 0;
setInterval(function() {
React.render(
<HelloWorldTime date={new Date()} />,
document.getElementById('HelloWorldTime')
);
React.render(
<HelloWorldIndex index={index ++} />,
document.getElementById('HelloWorldIndex')
);
}, 500);
</script>
</html>
3. 没有 JSX 的 React
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>没有 JSX 的 React</title>
</head>
<body>
<div id="example"></div>
<div id="example1"></div>
</body>
<script src="../build/react.js"></script>
<script src="../build/JSXTransformer.js"></script>
<script>
React.render(
React.createElement('div', null,
React.createElement('div', null,
React.createElement('div', null, 'content')
)
),
document.getElementById('example')
);
var child = React.createElement('li', null, 'Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child);
React.render(root, document.getElementById('example1'));
</script>
</html>