React学习小知识点

1.react易错：ReactDOM.render()方法第一个字母和后三个字母都需要大写，script文件type类型为text/babel。

2.组件定义时，组件名字第一个字母必须大写。此外，组件类只能包含一个顶层标签。

3.组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，组件的属性可以在组件类的 this.props 对象上获取，比如 name 属性就可以通过 this.props.name 读取。添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。

<script type="text/babel">
var HelloMessage = React.createClass({
render:function(){
return <h1 className = {this.props.cl}>hello {this.props.name}</h1>
}
});
ReactDOM.render(
<HelloMessage name = "john" cl = 'xx' />,
document.getElementById('ex')
)
</script>

 4.

JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员。

var arr = [
  <h1>Hello world!</h1>,
  <h2>React is awesome</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

上面代码的arr变量是一个数组，结果 JSX 会把它的所有成员，添加到模板。