基本使用

本節使用 React 官網範例，可快速清楚 React 簡約的使用方法。

Getting Started

建立一個 index.html，並引入 React 相關連結。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React</title>
    <script src="https://fb.me/react-0.13.3.js"></script>
    <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx">

      // ** Your code goes here! **

    </script>
  </body>
</html>

使用 JSX 語法建立 Hello World

var HelloWorld = React.createClass({
  render: function() {
    return (
      <p>
        Hello, <input type="text" placeholder="Your name here" />!
        It is {this.props.date.toTimeString()}
      </p>
    );
  }
});

setInterval(function() {
  React.render(
    <HelloWorld date={new Date()} />,
    document.getElementById('example')
  );
}, 500);

使用 React.js 及 JSXTransformer.js，每500毫秒刷新 UI 內容。

react: 主要 React Library
JSXTransformer: JSX 語法轉換器

JSX Syntax

JSX 類似 HTML 語法，用來簡化 React 應用程式的開發。例：

JSX

<a href="https://facebook.github.io/react/">Hello!</a>

轉換為

React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Hello!')

上方兩種方式等價，因此開發人員可自行決定使用哪種方式。