• Hello React
    • 这段代码做了什么

    Hello React

    相信所有的编程教程都会从Hello World的例子开始，我们也不例外，就从此开始学习吧！

    以下是官方文档中的第一个 React 程序:

    1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <title>Hello React!</title>
    6.     <script src="build/react.js"></script>
    7.     <script src="build/react-dom.js"></script>
    8.     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    9.   </head>
    10.   <body>
    11.     <div id="example"></div>
    12.     <script type="text/babel">
    13.       ReactDOM.render(
    14.         <h1>Hello, world!</h1>,
    15.         document.getElementById('example')
    16.       );
    17.     </script>
    18.   </body>
    19. </html>

    嗯，你可以将上述代码直接复制、黏贴到你喜欢的编辑器中，保存之后直接在浏览器中打开这个 HTML 文件就可以看到代码的效果了。

    这段代码做了什么

    首先，我们引入了react.js, react-dom.js 以及一个托管在Cloudflare CDN 上的 babel-core 的在浏览器中运行的版本。

    然后，以上代码通过ReactDOM这个对象的render方法，创建了一个<h1>元素，并将其插入到了id为 example 的div之中。

    这里我们使用的是一种名为JSX的语法，这在下一节JSX 中会比较详细的讲解。简单来说，JSX 就是在 JavaScript 中使用类似 XML 的代码用以展示DOM 的结构。