React Naive Book Guided Reading

Transcript

1. React ⼩小書 超 速 導 讀 Fork M e On Github
2. • 有⽤用過 JS, CSS, HTML 寫過網⾴頁 • 會⽤用 git 切換分⽀支 • 了了解 ES6 語法 • 有⽤用過 npm • 看過 react 與 redux 的官⽅方⽂文件, 但是還抓不不到要領 適⽤用對象
3. 程式碼 repo https://github.com/kmsheng/react-naive-book- guided-reading
4. CLI 指令範例例 echo $HELLO_WORLD
5. 程式碼範例例 console.log('hello world');
6. 分⽀支名稱範例例 branch1 branch2
7. 1. ⾃自⼰己練習動⼿手做⼀一套 React 2. React 基本環境安裝 3. JSX 4. 元件的組合與設計 5. 事件監聽 6. state 與 setState 的應⽤用 7. props 的應⽤用 8. PropTypes 元件參參數數驗證
8. 9. 元件⽣生命週期 10. ref 的使⽤用情境 11. props.children 12. dangerouslySetInnerHTML 13. style 屬性應⽤用 14. context 的應⽤用 15. High Order Component ( HOC ) 16. redux 17. react-redux
9. 1. ⾃自⼰己練習做⼀一套 React simple-example-vanilla simple-example-class simple-example-dom-optimization simple-example-abstraction
10. 2. React 基本環境安裝 npm i -g create-react-app create-react-app 專案名稱 cd 專案名稱 npm start
11. 2. React 基本環境安裝 React Developer Tools https://goo.gl/vgneGy
12. 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'));
13. 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'));
14. 3. JSX jsx jsx-create-element jsx-render-list jsx-render-list-nested
15. 4. 元件的組合與設計 component-composition
16. 5. 事件監聽 6. state 與 setState 的應⽤用 handling-events
17. 7. props 的應⽤用 8. PropTypes 元件參參數數驗證 like-button-props
18. 9. 元件⽣生命週期 like-button-life-cycle
19. 10. ref 的使⽤用情境 ref-usage ref-usage2
20. 11. props.children props-children
21. 12. dangerouslySetInnerHTML dangerously-set-inner-html
22. 13. style 屬性應⽤用 14. context 的應⽤用 theme-color
24. 15. High Order Component hoc
25. 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
26. Redux Three Principles
27. #1 Single source of truth The state of your whole application is stored in an object tree within a single store.
28. #2 State is read-only The only way to change the state is to emit an action, an object describing what happened.
29. #3 Changes are made with pure functions To specify how the state tree is transformed by actions, you write pure reducers.
30. Pure Function = NO SIDE EFFCTS 1 + 1 = 2, 不不論在何種環境下都成⽴立 ✔ function add(first, second) { return first + second; } 使⽤用 localStorage 的⽅方法 ✘ 使⽤用 DOM API 的⽅方法 ✘ 使⽤用 window 的⽅方法 ✘
31. Ducks: Redux Reducer Bundles https://github.com/erikras/ducks-modular-redux
32. 16. redux redux
33. 17. react-redux react-redux