2017-12-26
React允许把代码封装成组件(component),然后像插入普通html标签一样，在网页中插入这个组件。
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="Runoob" />,
document.getElementById('example')
);
</script>
</body> React.createClass()方法用于生成一个组件类
HelloMessage所有的组件都必须有自己的render方法，用于输出组件
自定义的React组件类 类名以大写字母开头，否则会报错
自定义的 React组件类只能包含一个顶层标签，否则也会报错。
<HelloMessage name="Runoob" />`<HelloMessage />` 实例组件类并输出信息。模板插入 <HelloMessage /> 时，会自动生成 HelloMessage 的一个实例
以上代码，实例化一个HelloMesssage组件，并设置它的name属性为Runoob
组件属性
在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
Node.js 创建一个动态网页
第一步：通过sublime编译器编辑 如下代码，并保存为server.js 到E盘
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World\n');
}).listen(8000);第三步：打开浏览器，输入http://localhost:8000/
JS Array.map方法
React 渲染元素：把元素传递给ReactDOM.render()方法
<html><div id="root"></div>
javascript
const element = <h1>hello,world</h1>;
//渲染元素element到DOM节点
ReactDOM.render(
element,
document.getElementById("root")
);