React學習筆記

API的查詢

[https://facebook.github.io/react/docs/top-level-api.html]

---

學習主要來自於ruanyifeng老師的demo

[https://github.com/ruanyf/react-demos]

---

DEMO1

使用React需要調用：

<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>

另外如果使用React，script的type比較特殊：

<script type="text/babel">

想要進行DOM操作的時候，使用:

ReactDOM.render(a,b)

其中第一個參數是想要輸入的HTML文件，第二個參數是DOM的element選中的操作比如：（這個時候其實使用的是JSX)

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

DEMO2:

怎麼在render的第一個參數中使用javascript?

<>告訴程序是‘我在使用HTML’的標籤。

其中如果使用{} 則會被解析爲源生javascript

    <script type="text/babel">
      var names = ['Alice', 'Emily', 'Kate'];

      ReactDOM.render(
        <div>
        {
          names.map(function (name) {
            return <div>Hello, {name}!</div>
          })
        }
        </div>,
        document.getElementById('example')
      );
    </script>

DEMO3:

如果var是一個數組，使用ReactDOM.render的時候，數組會被合併，例如：

<script type="text/babel">
  var names = ['Alice', 'Emily', 'Kate'];

  ReactDOM.render(
    <div>
    Hello, {name}!
    </div>,
    document.getElementById('example')
  );
</script>

上面這個例子，輸出就會變成 Hello,AliceEmilyKate

DEMO4:

<script type="text/babel">
  var HelloMessage = React.createClass({
    render: function() {
      return <h1>Hello {this.props.name}</h1>;
    }
  });

  ReactDOM.render(
    <HelloMessage name="John" />,
    document.getElementById('example')
  );
</script>

把function壓入到tag裏面 （6666666666的思想）

利用React.createClass創建了一個名爲HelloMessage的tag然後將這個tag所代表的function寫在render裏面。老節奏,render: function裏面的代碼用 {}包起來。到了ReactDOM.render的時候，讀到HelloMessage的tag會去調用這個function，然後這個function返回真正需要的h1來放到DOM裏面。
另外需要HelloMessage這種通過React.createClass的component需要用大寫字母開頭，不然會報錯。還有如果React.createClass中, render出來的components擁有多個平級的tag, 要用一個總tag把他們包起來，

比如

var HelloMessage = React.createClass({
  render: function() {
    return <div>
       <h1>sdfsdfsdf</h1>
       <p>sdfsdfsdf</p>
    </div>

不然會出問題的！

DEMO5:

<script type="text/babel">
  var NotesList = React.createClass({
    render: function() {
      return (
        <ol>
          {
            React.Children.map(this.props.children, function (child) {
              return <li>{child}</li>;
            })
          }
        </ol>
      );
    }
  });

  ReactDOM.render(
    <NotesList>
      <span>hello</span>
      <span>world</span>
    </NotesList>,
    document.getElementById('example')
  );
</script>

使用React.createClass創建一個名爲NodesList的tag, 使用createClass中的render方法將一個function壓入這個tag中，這個function返回的東西是一個ol,ol中的內容是利用React.Children.map方法將NodesList中的children分別變成li的內容。
其中需要注意的是dom樹的結構實際爲：

<ol>
    <li><span>hello</span></li>
    <li><span>world</span></li>
</ol>        

DEMO6:

關於

   <script type="text/babel">
      var data = 123;
      var MyTitle = React.createClass({
        propTypes: {
          title: React.PropTypes.string.isRequired,
        },
        render: function() {
          return <h1> {this.props.title} </h1>;
        }
      });
      ReactDOM.render(
        <MyTitle title={data} />,
        document.getElementById('example')
      );

    </script>

在使用React.createClass的時候，除了render還有propTypes這個屬性，這個屬性爲title這個tag設置了一個需要被輸入的attribute，而且利用其中的

React.PropTypes.string.isRequired,

還說明了所需數據的數據類型是string,而且是必須需要的，如果沒有給出這個值或者給出的值不是我所需要的類型，就會報錯。
另外，可以使用getDefaultProps這個屬性爲React.createClass添加default值，例如:

var MyTitle = React.createClass({
  getDefaultProps : function () {
    return {
      title : 'Hello World'
    };
  },
  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});

DEMO7

<script type="text/babel">
var MyComponent = React.createClass({
  handleClick: function() {
    this.refs.myTextInput.focus();
  },
  render: function() {
    return (
      <div>
        <input type="text" ref="myTextInput" />
        <input type="button" value="Focus the text input" onClick={this.handleClick} />
      </div>
    );
  }
});
ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);
</script>

其中那個ref是用來在MyComponent中尋找帶有ref標籤並且refmyTextInput的node.

DEMO8

利用this.state可以來確定當前component的狀態，（所以把component可以看做一個狀態機？）其中還有比較重要的API的包括：setState()，getInitialState()。

  var LikeButton = React.createClass({
    getInitialState: function() {
      return {liked: false};
    },
    handleClick: function(event) {
      this.setState({liked: !this.state.liked});
    },
    render: function() {
      var text = this.state.liked ? 'like' : 'haven\'t liked';
      return (
        <p onClick={this.handleClick}>
          You {text} this. Click to toggle.
        </p>
      );
    }
  });

  ReactDOM.render(
    <LikeButton />,
    document.getElementById('example')
  ); 

另外like這個狀態其實並沒有聲明，但是可以直接用。

DEMO9
隨時變化：

var Input = React.createClass({
  getInitialState: function() {
    return {value: 'Hello!'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function () {
    var value = this.state.value;
    return (
       <div>
         <input type="text" value={value} onChange=  {this.handleChange} />
          <p>{value}</p>
       </div>
     );
   }
 });
ReactDOM.render(
  <Input/>, 
  document.getElementById('example')
);

狀態機的狀態爲不同的值，每當有變化的時候就產生state的變化。監聽變化事件用的是handleChange: function(event) {},

DEMO10