react学习笔记【一】
一、 JSX语法
React中的模版语法称为JSX，在模版中可以使用html标签。ReactDOM.render()会将JSX转成HTML，然后将其渲染到指定的DOM节点。
ReactDOM.render(<h1>Hello, world!</h1>,document.getElementById('example')
);
二、在 JSX 中使用 JavaScript
尖括号 (<) 表示 HTML 语法的开始，而花括号 ( {) 表示 JavaScript 语法的开始。
var names = ['Alice', 'Emily', 'Kate'];ReactDOM.render(<div>{names.map(function (name) {return <div>Hello, {name}!</div>})}</div>,document.getElementById('example')
);
三、在 JSX 中使用数组
如果 JavaScript 变量是数组，JSX 将隐式连接数组的所有成员。
var arr = [<h1>Hello world!</h1>,<h2>React is awesome</h2>,
];
ReactDOM.render(<div>{arr}</div>,document.getElementById('example')
);
四、定义组件
class ComponentName extends React.Component创建一个组件类，该类实现一个render方法，返回该类的一个组件实例。
class HelloMessage extends React.Component {render() {return <h1>Hello {this.props.name}</h1>;}
}ReactDOM.render(<HelloMessage name="John" />,document.getElementById('example')
);
使用this.props.[attribute]来访问组件的属性。
PS：
1.组件名称的首字母必须大写，否则 React 会抛出错误。
2.一个react组件内部应该只有一个顶部子节点。
五、React 用于this.props.children访问组件的子节点。
class NotesList extends React.Component {render() {return (<ol>{React.Children.map(this.props.children, function (child) {return <li>{child}</li>;})}</ol>);}
}ReactDOM.render(<NotesList><span>hello</span><span>world</span></NotesList>,document.getElementById('example')
);
请注意，this.props.children 的值有三种可能。如果组件没有子节点，则值为undefined；如果它只有一个子节点，则值为一个对象；如果它有多个子节点，则结果为一个数组。编写代码时请记住这一点。
六、PropTypes
React 使用PropTypes来限制props的类型
//title是必须的且必须为字符串
class MyTitle extends React.Component {static propTypes = {title: PropTypes.string.isRequired,}render() {return <h1> {this.props.title} </h1>;}
}