2014年10月11日 星期六

試玩React facebook 開發的js library !!!

http://facebook.github.io/react/docs/getting-started.html

是一套facebook所創造的 JS library


想要解決的問題!
solve one problem: building large applications with data that changes over time. To do this, React uses two main ideas.



Hello React 範例!!

ps:在<script type="text/jsx">的程式碼內第一行要/** @jsx React.DOM */ 才不會錯誤!!

<!DOCTYPE html>
<html>
  <head>
  <title>Hello React</title>
    <script src="react.js"></script>
    <script src="JSXTransformer.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx">
    /** @jsx React.DOM */
    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.renderComponent(
        <HelloWorld date={new Date()} />,
        document.getElementById('example')
      );
    }, 500);
    </script>
  </body>
</html>

0 意見:

張貼留言