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>