Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Naive Book Guided Reading
Search
kmsheng
June 13, 2017
Technology
1
4.1k
React Naive Book Guided Reading
kmsheng
June 13, 2017
Tweet
Share
More Decks by kmsheng
See All by kmsheng
the-evolution-of-garchen-panel.pdf
kmsheng
0
45
JSDC 2016 心得
kmsheng
0
150
我的 sitcon 心得
kmsheng
0
72
Other Decks in Technology
See All in Technology
AI AgentをLangflowでサクッと作って、1日働かせてみた!
yano13
1
160
ハノーファーメッセ2025で見た生成AI活用ユースケース.pdf
hamadakoji
1
490
オブザーバビリティと育てた ID管理・認証認可基盤の歩み / The Journey of an ID Management, Authentication, and Authorization Platform Nurtured with Observability
kaminashi
1
1k
CNCFの視点で捉えるPlatform Engineering - 最新動向と展望 / Platform Engineering from the CNCF Perspective
hhiroshell
0
140
RemoteFunctionを使ったコロケーション
mkazutaka
1
130
AI時代、“平均値”ではいられない
uhyo
8
2.6k
OSSで50の競合と戦うためにやったこと
yamadashy
3
1k
ヘンリー会社紹介資料(エンジニア向け) / company deck for engineer
henryofficial
0
400
アウトプットから始めるOSSコントリビューション 〜eslint-plugin-vueの場合〜 #vuefes
bengo4com
3
1.8k
様々なファイルシステム
sat
PRO
0
260
dbtとAIエージェントを組み合わせて見えたデータ調査の新しい形
10xinc
6
1.2k
serverless team topology
_kensh
3
240
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
15k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
116
20k
Practical Orchestrator
shlominoach
190
11k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Optimizing for Happiness
mojombo
379
70k
A Tale of Four Properties
chriscoyier
161
23k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Building Adaptive Systems
keathley
44
2.8k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Transcript
React ⼩小書 超 速 導 讀 Fork M e On
Github
• 有⽤用過 JS, CSS, HTML 寫過網⾴頁 • 會⽤用 git 切換分⽀支
• 了了解 ES6 語法 • 有⽤用過 npm • 看過 react 與 redux 的官⽅方⽂文件, 但是還抓不不到要領 適⽤用對象
程式碼 repo https://github.com/kmsheng/react-naive-book- guided-reading
CLI 指令範例例 echo $HELLO_WORLD
程式碼範例例 console.log('hello world');
分⽀支名稱範例例 branch1 branch2
1. ⾃自⼰己練習動⼿手做⼀一套 React 2. React 基本環境安裝 3. JSX 4. 元件的組合與設計
5. 事件監聽 6. state 與 setState 的應⽤用 7. props 的應⽤用 8. PropTypes 元件參參數數驗證
9. 元件⽣生命週期 10. ref 的使⽤用情境 11. props.children 12. dangerouslySetInnerHTML 13.
style 屬性應⽤用 14. context 的應⽤用 15. High Order Component ( HOC ) 16. redux 17. react-redux
1. ⾃自⼰己練習做⼀一套 React simple-example-vanilla simple-example-class simple-example-dom-optimization simple-example-abstraction
2. React 基本環境安裝 npm i -g create-react-app create-react-app 專案名稱 cd
專案名稱 npm start
2. React 基本環境安裝 React Developer Tools https://goo.gl/vgneGy
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'));
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'));
3. JSX jsx jsx-create-element jsx-render-list jsx-render-list-nested
4. 元件的組合與設計 component-composition
5. 事件監聽 6. state 與 setState 的應⽤用 handling-events
7. props 的應⽤用 8. PropTypes 元件參參數數驗證 like-button-props
9. 元件⽣生命週期 like-button-life-cycle
10. ref 的使⽤用情境 ref-usage ref-usage2
11. props.children props-children
12. dangerouslySetInnerHTML dangerously-set-inner-html
13. style 屬性應⽤用 14. context 的應⽤用 theme-color
None
15. High Order Component hoc
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
Redux Three Principles
#1 Single source of truth The state of your whole
application is stored in an object tree within a single store.
#2 State is read-only The only way to change the
state is to emit an action, an object describing what happened.
#3 Changes are made with pure functions To specify how
the state tree is transformed by actions, you write pure reducers.
Pure Function = NO SIDE EFFCTS 1 + 1 =
2, 不不論在何種環境下都成⽴立 ✔ function add(first, second) { return first + second; } 使⽤用 localStorage 的⽅方法 ✘ 使⽤用 DOM API 的⽅方法 ✘ 使⽤用 window 的⽅方法 ✘
Ducks: Redux Reducer Bundles https://github.com/erikras/ducks-modular-redux
16. redux redux
17. react-redux react-redux