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
プロポーザルのコツ ~ Kaigi on Rails 2025 初参加で3名の登壇を実現 ~
naro143
1
220
許しとアジャイル
jnuank
1
150
from Sakichi Toyoda to Agile
kawaguti
PRO
1
120
社内報はAIにやらせよう / Let AI handle the company newsletter
saka2jp
8
1.4k
サイバーエージェント流クラウドコスト削減施策「みんなで金塊堀太郎」
kurochan
1
320
カンファレンスに託児サポートがあるということ / Having Childcare Support at Conferences
nobu09
1
530
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
0
150
20251007: What happens when multi-agent systems become larger? (CyberAgent, Inc)
ornew
1
250
Where will it converge?
ibknadedeji
0
210
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
130
OCI Network Firewall 概要
oracle4engineer
PRO
2
7.9k
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
390
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Scaling GitHub
holman
463
140k
Faster Mobile Websites
deanohume
310
31k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Visualization
eitanlees
149
16k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Mobile First: as difficult as doing things right
swwweet
224
10k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Automating Front-end Workflow
addyosmani
1371
200k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
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