React/Redux 起手式

傅耀德

創科工程師

Github

Blog

今天學習的重點

  • 認識 React

  • React 跟普通 Html jquery 差異

  • React 簡單實作

為什麼要學習 React

它像健達出奇蛋一樣

Learn once write anywhere

Debug anywhere

  1. Web

  2. IOS

  3. Android

時機已經成熟了

版號大躍進  0.14.0 --> 15

他們是這樣說的「這樣有助於對穩定性的承諾，並提供了靈活性，能夠在小版本中添加向後兼容的特性」

潮！

認識 REACT

傳統網頁跟 Single page

Components ( Class)

  1. 單一責任原則

  2. 可重複使用的元件

  3. 方便測試

  4. 內部狀態、處理邏輯、事件處理、 內部的樣式

class Hello extends React.Component {
  render() {
    return (
      <div>Hello Trunk Studio</div>
    )
  }
}

Jsbin Demo

舉一個例子

Jsbin Demo

Virtual Dom

  1. 不用自己處理 Dom

  2. 更有效率更滑順，神秘的 Diff

Prop

Component 的 config

class HelloWho extends React.Component {
  render() {
    return (
      <div>Hello {this.props.name} !!</div>
    )
  }
}

class Hello extends React.Component {
  render() {
    return (
      <div>
        <div>Hello Trunk Studio</div>
        <HelloWho name={'耀德'}/>
        <HelloWho name={'Dmoon'}/>
      </div>
    )
  }
}

Jsbin Demo

Hello Trunk Studio
Hello 耀德 !!
Hello Dmoon !!

props 給予預設值

class HelloWho extends React.Component {
  render() {
    return (
      <div>Hello {this.props.name} !!</div>
    )
  }
}

HelloWho.defaultProps = {
  name: 'Trunk Studio'
}

class Hello extends React.Component {
  render() {
    return (
      <div>
        <HelloWho />
        <HelloWho name={'耀德'}/>
        <HelloWho name={'Dmoon'}/>
      </div>
    )
  }
}
Hello Trunk Studio !!
Hello 耀德 !!
Hello Dmoon !!

State

  1. 使用 setState(data)

  2. 更改 State 後畫面就會自動更新

Jsbin Demo

如果使用 jquery 就會長這樣

Jsbin Demo

$('input').bind('input', function() {
  var input = 'Hello ' + $(this).val() + ' !!!';
  $('#helloDiv').text(input);
});

哪些 Component 需要有 State？

  1. 用戶輸入

  2. server request 

  3. 時間變化等做出響應

其餘應該都使用 props 傳遞給子 Component

什麼東西需要放在 State？

State 應該包括那些可能被 Component 的事件處理器改變並觸發用戶界面更新的數據

  1. 用戶輸入

  2. server request 

  3. 時間變化等做出響應

什麼東西不需要放在 State？

  1. React  Component

  2. 基於 props 的重複數據

  3. 可以使用 state、prop  算出來的值

React 生命週期

元件初始化

給予初始值   defaultProps

componentWillMount ()

render()

componentWillMount ()

使用 setState 會立即更新 state，不會再次 render

render 後觸發

適合用來掛其他 javascript framwork

React 生命週期

更新

componentWillReceiveProps(nextProps)

shouldComponentUpdate(nextProps, nextState)

componentWillUpdate(nextProps, nextState)

componentDidUpdate (prevProps, prevState)

render()

class Hello extends React.Component {
  render() {
  
    let names = ['Alice', 'Emily', 'Kate'];

    return (
     <div> 
       {
         names.map(function (name) {
           return <div> Hello, {name}! </div>
         })
       }
     </div>
    )
  }
}

React.render(<Hello />, document.getElementById('demo'));
Hello, Alice!
Hello, Emily!
Hello, Kate!

一個小 Sample

一個看起來比較大的 Sample

Github

直接 Clone 回家試試看

常見新手錯誤一

腦袋轉不過來！！

class Hello extends React.Component {
  
  inputName(e){
    this.refs.show.value = e.target.value
  }
  
  render() {
    return (
      <div>
        <input type="text" ref='show' value="預設值" disabled />  
        <input type="text" onChange={this.inputName.bind(this)} />  
      </div>
    )
  }
}

React.render(<Hello />, document.getElementById('demo5'));

一開始一定會卡住的地方

class Hello extends React.Component {
  
  render() {
    return (
      <div>錯誤示範請勿模仿</div>  
      <input type="text" />  
    )
  }
}

React.render(<Hello />, document.getElementById('demo6'));

一開始一定不知道怎麼註解

class Hello extends React.Component {
  
  render() {
    return (
      <div>

        {/* <div> 註解範例 </div> */}

        // <div> 這樣是錯的 </div>
        /* <div> 這樣是錯的 </div> */
        <!-- <div> 這樣也是錯的 </div> -->

      </div> 
    )
  }
}

React.render(<Hello />, document.getElementById('demo7'));

一些 UI Components 的集散地

Q & A

Made with Slides.com