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
44
JSDC 2016 心得
kmsheng
0
150
我的 sitcon 心得
kmsheng
0
70
Other Decks in Technology
See All in Technology
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.2k
作曲家がボカロを使うようにPdMはAIを使え
itotaxi
0
350
2025-06-26_Lightning_Talk_for_Lightning_Talks
_hashimo2
2
110
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
130
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1k
Github Copilot エージェントモードで試してみた
ochtum
0
130
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
190
rubygem開発で鍛える設計力
joker1007
2
260
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
5
570
OpenHands🤲にContributeしてみた
kotauchisunsun
1
490
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
0
220
フィンテック養成勉強会#54
finengine
0
200
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Building an army of robots
kneath
306
45k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Designing for Performance
lara
609
69k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
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