React TodoList

StarterKit

• Github

npm install

npm run dev

環境介紹

• ES6 + webpack + React + BABEL core

ES6(ECMAScript 2015)

• Netscape公司將Javascript交給國際標準化組織ECMA，希望這種語言可以成國際標準
• 標準委員會最終決定，標準在每年6月正式發表一次，當作當年的正式版本
• ES6於2015年6月發佈，正式名稱就是ECMAScript 2015

Babel

• Babel是一個轉碼器，可以將ES6轉成ES5

Webpack

• 前端模組管理和打包工具
• 將CSS、圖片與其他資源打包
• 預處理(SASS、JSX、ES6等)檔案
• 豐富的loader可以使用

社群分享

React + Redux Workshop

React 優點

• 組件化(Component)設計，利於Reuse
• 用JSX進行UI設計
• 使用 Virtual DOM快速進行頁面重繪
• Component 就像個狀態機（State Machine），而且也有生命週期（Life Cycle）
• 一律重繪（Always Redraw）和單向資料流

This is HTML

<table>
    <tbody> 
        <tr> 
            <td>Shady Grove</td>
            <td>Aeolian</td> 
        </tr> 
        <tr>
            <td>Over the River, Charlie</td>        
            <td>Dorian</td> 
        </tr> 
    </tbody>
</table>

and this is DOM

DOM feature

• 直接操作DOM很慢
• doc

Browser layout

// Read
var h1 = element1.clientHeight;
// Write (invalidates layout)
element1.style.height = (h1 * 2) + 'px';
// Read (triggers layout)
var h2 = element2.clientHeight;
// Write (invalidates layout)
element2.style.height = (h2 * 2) + 'px';
// Read (triggers layout)
var h3 = element3.clientHeight;
// Write (invalidates layout)
element3.style.height = (h3 * 2) + 'px';  

Browser layout

Even load element from DOM will cause layout event.

Virtual DOM

reference

Vitrual DOM working flow

JSX

• 類似XML的語法
• 語意化的DOM宣告
• 更加簡潔

JSX

render() {
  return 
    <div className="divider">
	  Label Text<hr />
    </div>
}

Plan JS

render: function () {
  return 
    React.DOM.div({className:"divider"},
	  "Label Text",
	  React.DOM.hr()
    );
}

Rules

JSX event

class Hello extends React.Component{
	handleClick = (event) => {
	  // do something
	};
	render() {
	  return (<div onClick={this.handleClick}> click me </div>)
	}	
}

event list

Props

• 父組件傳值至子組件(單向)

Props

class Child extends React.Component {
  render(){
    return (
      <div>
        {
          this.props.children.map(
            (childName)=>(<div>{ childName }</div>)
          )
        }
      </div>
    )
  }
}


class Father extends React.Component {
  render(){
    let childList = ['Nina', 'Ona', 'Bina']
    return (<Child children={childList} />)
  }
}

ReactDOM.render(<Father/>, document.getElementById('app'))

State

• 整個Component當作一個狀態機(State Machine)
• 一開始有個初始狀態，隨著使用者的互動會讓狀態改變，此時就會觸發讓 UI 重繪 (render)
• 使用this.setState()更新state

State

class TestStateComponent extends React.Component {
  constructor () {
    super();
    this.state = {
      name: 'jack'
    };
  }
  
  clickComp = () => {
    let new_state = {
      name: this.state.name + 'click'
    }
    this.setState(new_state);
  };
 
  render () {
    return (
      <div className="teststate-component" onClick={this.clickComp}>
        {this.state.name}
      </div>
    );
  }
 
}

1. Add Components - AddTodo, TodoList

https://github.com/bbandydd/React_Todolist_Demo/commit/e31a496b9b43282c612d2471cf05852c3446501b

2. add AddTodo content

https://github.com/bbandydd/React_Todolist_Demo/commit/8b7c34f9ec20ed5a0af53039cf21b87090b20a4e

3. add TodoList content

https://github.com/bbandydd/React_Todolist_Demo/commit/a7934a551fda268fab097e41cd11eca29c0c149f

4. AddTodo - add changeText

https://github.com/bbandydd/React_Todolist_Demo/commit/be8acf8eb101283a4749f8bd05b7ac783818813a

5. TodoList - add todos

https://github.com/bbandydd/React_Todolist_Demo/commit/e3d0895232dc171f715265f6a8e5a1acbf06e7fe

6. AddTodo - completed Add todo

https://github.com/bbandydd/React_Todolist_Demo/commit/ae84478067609e9aaad973e9e689d409926b36c0

7. TodoList - add handleRemoveTodo

https://github.com/bbandydd/React_Todolist_Demo/commit/ce69d5d026f09cc4471769e425802fdbd52fdf8c

8. AddTodo - add loadFromServer

https://github.com/bbandydd/React_Todolist_Demo/commit/7ce4ea064f71834d1e59ca953c8ff6c6187f7232