Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Naive Book Guided Reading

Avatar for kmsheng kmsheng
June 13, 2017

React Naive Book Guided Reading

Avatar for kmsheng

kmsheng

June 13, 2017
Tweet

More Decks by kmsheng

Other Decks in Technology

Transcript

  1. • 有⽤用過 JS, CSS, HTML 寫過網⾴頁 • 會⽤用 git 切換分⽀支

    • 了了解 ES6 語法 • 有⽤用過 npm • 看過 react 與 redux 的官⽅方⽂文件, 但是還抓不不到要領 適⽤用對象
  2. 1. ⾃自⼰己練習動⼿手做⼀一套 React 2. React 基本環境安裝 3. JSX 4. 元件的組合與設計

    5. 事件監聽 6. state 與 setState 的應⽤用 7. props 的應⽤用 8. PropTypes 元件參參數數驗證
  3. 9. 元件⽣生命週期 10. ref 的使⽤用情境 11. props.children 12. dangerouslySetInnerHTML 13.

    style 屬性應⽤用 14. context 的應⽤用 15. High Order Component ( HOC ) 16. redux 17. react-redux
  4. 3. JSX import React, {Component} from 'react'; import ReactDOM from

    'react-dom'; import './index.css'; class Header extends Component { render() { return ( <div> <h1 className="title">React h1> </div> ); } } ReactDOM.render(<Header />, document.getElementById('root'));
  5. 3. JSX import React, {Component} from 'react'; import ReactDOM from

    'react-dom'; import './index.css'; class Header extends Component { render() { return ( React.createElement( 'div', null, React.createElement( 'h1', {className: 'title'}, ) ) ); } } ReactDOM.render(<Header />, document.getElementById('root'));
  6. What is Redux ? • Predictable state container for JavaScript

    apps. • Helps you write applications that behave consistently, run in different environments (client, server, and native) • Easy to test • Not only for React
  7. #1 Single source of truth The state of your whole

    application is stored in an object tree within a single store.
  8. #2 State is read-only The only way to change the

    state is to emit an action, an object describing what happened.
  9. #3 Changes are made with pure functions To specify how

    the state tree is transformed by actions, you write pure reducers.
  10. Pure Function = NO SIDE EFFCTS 1 + 1 =

    2, 不不論在何種環境下都成⽴立 ✔ function add(first, second) { return first + second; } 使⽤用 localStorage 的⽅方法 ✘ 使⽤用 DOM API 的⽅方法 ✘ 使⽤用 window 的⽅方法 ✘