1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <script src="../build/react.js"></script>
    5. <script src="../build/react-dom.js"></script>
    6. <script src="../build/browser.min.js"></script>
    7. </head>
    8. <body>
    9. <div id="example"></div>
    10. <script type="text/babel">
    11. var HelloMessage = React.createClass({
    12. render: function() {
    13. return <h1>Hello {this.props.name}</h1>;
    14. }
    15. });
    16. ReactDOM.render(
    17. <HelloMessage name="John" />,
    18. document.getElementById('example')
    19. );
    20. </script>
    21. </body>
    22. </html>
    24. 01、React 允许将代码封装成组件（component），然后像插入普通HTML标签一样，
    25. 在网页中插入这个组件。React.createClass 方法就用于生成一个组件
    27. 02、HelloMessage 就是一个组件类。模板插入 <HelloMessage /> 时，会自动生成
    28. HelloMessage 的一个实例。所有组件类必须有自己的render方法，用于输出组件。
    30. 注意：组件类的第一个字母必须大写，否则会报错，比如 HelloMessage 不能写成
    31. helloMessage 。另外，组件类只能包含一个顶层标签，否则也会报错。
    33. 03、组件的用法与原生的HTML标签完全一致，可以任意加入属性，比如<HelloMessage name="John" />,
    34. 就是HelloMessage 组件加入一个 name 属性，值为John 。组件的属性可以在组件类的
    35. this.props 对象上获取，如：name 属性就可以通过 this.props.name 读取。
    37. 04、添加组件属性，有一个地方需要注意，就是class 属性需要写成className ，for 属性
    38. 需要写成htmlFor ,这是因为 class ,for 是javaScript的保留字。