2017-04-03

React.js開發入門教學(4)-JSX寫法

在React中，其實可以用JSX來寫，那JSX是什麼東西呢？似乎是一種JavaScript與XML的一種

結合，所以你寫出來瀏覽器是看不懂的啦～哈哈哈哈哈哈………..所以他還是得被轉換一次

才能夠用，既然這樣位什麼還要用JSX呢？據說是可以淺顯易懂，而且寫起來也比較漂亮的樣子？

我也不太清楚，所以我一邊作一邊學吧～大部分的React.js都是用JSX在寫，所以要說不想學

好像也不行。所以還是來學學JSX在寫些什麼…

我看了一個範例是這樣的。

ReactDOM.render(
    <h1>Hello JSX</h1>,
  document.getElementById('test')
);

執行….！動不了，在 jsfiddle.net 上，如果要執行JSX必須將 JavaScript換成BABEL才行！

換法是點一下右上角的 JavaScript 後語言選擇 BABEL 就可以了！選完後在執行馬上就能看到我們

的結果了！好像真的很直覺！因為我們都會寫HTML了嘛～～～

馬上又來跟之前一樣換換背景顏色吧！在JSX當中是可以這樣寫的

var css = {backgroundColor: 'black', color: '#FFFFFF'};

ReactDOM.render(
      <h1 style={css}>Hello JSX</h1>,
      document.getElementById('test')
);

再來挑戰一下傳值的寫法看看 A__A

var css = {backgroundColor: 'black', color: '#FFFFFF'};
var name = {name: 'Leo'}

var helloworld = React.createClass({
      render: function() {  //這裡要特別注意傳入的變數要用大括弧包起來喔
        return <h1 style={css}>Hello {this.props.name}</h1>
    }
});

ReactDOM.render(
    React.createElement(helloworld, name),
    document.getElementById('test')
);

基本上寫法大同小異，只是在HTML的部份寫法與原本 JavaScript 不同，記得使用大括弧把變數給包起來才行！

最後在寫一下上一篇學到的取得輸入值吧！

var form = React.createClass({
  getInitialState: function() {
      return {
        val: ''
      };
},
showVal: function(e) {
    this.setState({
           val: document.getElementById('input_a').value
       });
},
  render: function() {
    return (
          <div>
              <input type="text" id="input_a" />
              <input type="button" value="送出" onClick={this.showVal}/>
              <h1>{this.state.val}</h1>
          </div>
      );
  }
});

ReactDOM.render(
      React.createElement(form),
      document.getElementById('test')
);

到這邊我們應該已經大致上了解JSX的基本寫法了吧！感覺上就是用JavaScript把HTML包起來但是HTML中又包了JavaScript

的感覺XDDDD

好了，睏了，今天到此為止:P

React