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
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
490
はじめてのOSS開発からみえたGo言語の強み
shibukazu
3
950
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
jeongjaesoon
0
230
エンジニアリングマネージャーの成長の道筋とキャリア / Developers Summit 2025 KANSAI
daiksy
2
620
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
470
データ分析エージェント Socrates の育て方
na0
5
1.5k
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
580
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
cmusudakeisuke
1
280
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.5k
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
kaz3284
1
210
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
270
DroidKaigi 2025 Androidエンジニアとしてのキャリア
mhidaka
2
380
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Done Done
chrislema
185
16k
Code Reviewing Like a Champion
maltzj
525
40k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Documentation Writing (for coders)
carmenintech
74
5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Site-Speed That Sticks
csswizardry
10
820
The Art of Programming - Codeland 2020
erikaheidi
56
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.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