Hello World

Created: November-22, 2018

没有 JSX

这是一个使用 React 的主 API 来创建 React 元素的基本示例，以及用于在浏览器中呈现 React 元素的 React DOM API。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>

    <!-- Include the React and ReactDOM libraries -->
    <script src="https://fb.me/react-15.2.1.js"></script>
    <script src="https://fb.me/react-dom-15.2.1.js"></script>

  </head>
  <body>
    <div id="example"></div>

    <script type="text/javascript">

      // create a React element rElement
      var rElement = React.createElement('h1', null, 'Hello, world!');

      // dElement is a DOM container
      var dElement = document.getElementById('example');

      // render the React element in the DOM container
      ReactDOM.render(rElement, dElement);

    </script>

  </body>
</html>

使用 JSX

不是从字符串创建 React 元素，而是可以使用 JSX（由 Facebook 创建的 Javascript 扩展，用于向 JavaScript 添加 XML 语法），这允许编写

var rElement = React.createElement('h1', null, 'Hello, world!');

作为等价物（对于熟悉 HTML 的人来说更容易阅读）

var rElement = <h1>Hello, world!</h1>;

包含 JSX 的代码需要包含在 <script type="text/babel"> 标记中。此标记中的所有内容都将使用 Babel 库转换为纯 Javascript（除了 React 库之外还需要包含它）。

所以最后上面的例子变成：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>

    <!-- Include the React and ReactDOM libraries -->
    <script src="https://fb.me/react-15.2.1.js"></script>
    <script src="https://fb.me/react-dom-15.2.1.js"></script>
    <!-- Include the Babel library -->
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>

  </head>
  <body>
   <div id="example"></div>

    <script type="text/babel">

      // create a React element rElement using JSX
      var rElement = <h1>Hello, world!</h1>;

      // dElement is a DOM container
      var dElement = document.getElementById('example');

      // render the React element in the DOM container
      ReactDOM.render(rElement, dElement);

    </script>

  </body>
</html>