# React TodoList ###### tags: `f2e` ## Andy Tsai --- ## 前言 ---- ## StarterKit - [Github](https://github.com/bbandydd/React_Todolist_Demo) ``` 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](https://hackmd.io/OwJgzAZgbAnCAmBaArAIxDRAWeEyLhAFMCBDLMADjCIEYIQIAGIA) --- ### Agenda - React 介紹 - Virtual DOM - JSX - State Management - Lifecycle --- ### React [](http://reactjs.cn/react/index.html) - React is a declarative, efficient, and flexible JavaScript library for building user interfaces. ---- ### React 優點 - 組件化(Component)設計，利於Reuse - 用JSX進行UI設計 - 使用 Virtual DOM快速進行頁面重繪 - Component 就像個狀態機（State Machine），而且也有生命週期（Life Cycle） - 一律重繪（Always Redraw）和單向資料流 --- ### what is DOM ### (Document Object Model) ---- ### 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](https://leozdgao.me/why-dom-slow/) ---- ### Browser layout ```javascript= // 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](http://blog.reverberate.org/2014/02/react-demystified.html) ---- ### Vitrual DOM working flow  --- ### React Component ``` class Hello extends React.Component{ constructor(props){ super(props) } render() { return (<div>Hello World</div>) } } ``` ---- ### JSX - 類似XML的語法 - 語意化的DOM宣告 - 更加簡潔 ---- JSX ```javascript= render() { return <div className="divider"> Label Text<hr /> </div> } ``` Plan JS ```javascript= render: function () { return React.DOM.div({className:"divider"}, "Label Text", React.DOM.hr() ); } ``` [Rules](https://facebook.github.io/react/docs/dom-elements.html) ---- ### JSX event ```javascript= class Hello extends React.Component{ handleClick = (event) => { // do something }; render() { return (<div onClick={this.handleClick}> click me </div>) } } ``` [event list](https://facebook.github.io/react/docs/events.html) --- ### React State Management 1. props 2. state ---- ### 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 ```javascript= 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> ); } } ``` --- ### Stateless Component - React 1.4提供一種更簡單建立Component的方法 - [Stateless](https://medium.com/@housecor/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc#.xoho8qv6l) --- ### React Component lifecycle - [Lifecycle](https://codepen.io/eduardoboucas/full/jqWbdb) ```javascript class BookNormalComponent extends React.Component { componentDidMount(){ console.log('component first show in screen'); } render() { return ( <div className="booknormal-component"> Very Good </div> ) } } ``` --- ### React Component Generator - [Github](https://github.com/bbandydd/React_Generator) - [DEMO](https://bbandydd.github.io/React_Generator/) --- ## React 實作TodoList - [Github](https://github.com/bbandydd/React_Todolist_Demo/tree/React_Version)  ----  ---- ## 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