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 names = ['Alice', 'Emily', 'Kate'];
    12. ReactDOM.render(
    13. <div>
    14. {
    15. names.map(function (name) {
    16. return <div>Hello, {name}!</div>
    17. })
    18. }
    19. </div>,
    20. document.getElementById('example')
    21. );
    22. </script>
    23. </body>
    24. </html>
    25. 01、JSX 语法基本规则:
    26. 遇到HTML 标签( 以 "<" 开头),就用HTML规则解析,遇到代码块(以{开头)
    27. 就用JavaScript 规则解析。