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 的结构。