React 基础学习(1)
1. ReactDom.render()
react最基本的方法 用于将内容插入指定的dom节点。
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
2. JSX基本语法规则
遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析。
var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
);
3. React组件
//组件声明方式
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
- 组件名称必须大写开头
- 组件只能包含一个顶级标签
- 组件的属性可以通过this.props来获取
- 组件的所有子节点可以通过this.props.children来获取
//组件的使用方式
ReactDOM.render(
<HelloMessage name="John"></HelloMessage>,
document.getElementById('example')
);