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
4k
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
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
280
JavaScript 研修
recruitengineers
PRO
6
1.5k
「魔法少女まどか☆マギカ Magia Exedra」の必殺技演出を徹底解剖! -キャラクターの魅力を最大限にファンに届けるためのこだわり-
gree_tech
PRO
0
500
Vault meets Kubernetes
mochizuki875
0
250
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
3
730
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
160
サンドボックス技術でAI利活用を促進する
koh_naga
0
170
20250903_1つのAWSアカウントに複数システムがある環境におけるアクセス制御をABACで実現.pdf
yhana
2
320
「魔法少女まどか☆マギカ Magia Exedra」での負荷試験の実践と学び
gree_tech
PRO
0
510
DevIO2025_継続的なサービス開発のための技術的意思決定のポイント / how-to-tech-decision-makaing-devio2025
nologyance
0
130
おやつは300円まで!の最適化を模索してみた
techtekt
PRO
0
270
AI開発ツールCreateがAnythingになったよ
tendasato
0
100
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
70
11k
How to Ace a Technical Interview
jacobian
279
23k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Navigating Team Friction
lara
189
15k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
We Have a Design System, Now What?
morganepeng
53
7.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Designing Experiences People Love
moore
142
24k
Six Lessons from altMBA
skipperchong
28
4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Docker and Python
trallard
45
3.5k
Embracing the Ebb and Flow
colly
87
4.8k
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