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 best practice
Search
yiminghe
May 14, 2015
Technology
3
180
react best practice
react best practice
yiminghe
May 14, 2015
Tweet
Share
More Decks by yiminghe
See All by yiminghe
小程序终端技术架构
yiminghe
0
130
支付宝小程序的开放架构
yiminghe
0
160
gitc2016 react based architecture
yiminghe
1
130
antd at qcon2016
yiminghe
1
180
react-based architecture
yiminghe
2
140
React Ecosystem At Ant Financial
yiminghe
4
2.1k
ant design preview
yiminghe
1
230
react at alipay
yiminghe
43
4.1k
form validation in react
yiminghe
4
530
Other Decks in Technology
See All in Technology
コンテンツを支える 若手ゲームクリエイターの アートディレクションの事例紹介 / cagamefi-game
cyberagentdevelopers
PRO
1
120
分布で見る効果検証入門 / ai-distributional-effect
cyberagentdevelopers
PRO
4
690
「視座」の上げ方が成人発達理論にわかりやすくまとまってた / think_ perspective_hidden_dimensions
shuzon
2
110
30万人が利用するチャットをFirebase Realtime DatabaseからActionCableへ移行する方法
ryosk7
5
330
顧客が本当に必要だったもの - パフォーマンス改善編 / Make what is needed
soudai
24
6.7k
とあるユーザー企業におけるリスクベースで考えるセキュリティ業務のお話し
4su_para
3
320
AWSコンテナ本出版から3年経った今、もし改めて執筆し直すなら / If I revise our container book
iselegant
15
3.9k
ユーザーの購買行動モデリングとその分析 / dsc-purchase-analysis
cyberagentdevelopers
PRO
2
100
小規模に始めるデータメッシュとデータガバナンスの実践
kimujun
3
580
[AWS JAPAN 生成AIハッカソン] Dialog の紹介
yoshimi0227
0
140
CI/CDやテスト自動化の開発プロジェクトへの適用
megascus
3
740
急成長中のWINTICKETにおける品質と開発スピードと向き合ったQA戦略と今後の展望 / winticket-autify
cyberagentdevelopers
PRO
1
160
Featured
See All Featured
Code Review Best Practice
trishagee
64
17k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
What's in a price? How to price your products and services
michaelherold
243
12k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Fireside Chat
paigeccino
32
3k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Raft: Consensus for Rubyists
vanstee
136
6.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
32
1.8k
Six Lessons from altMBA
skipperchong
26
3.5k
Designing the Hi-DPI Web
ddemaree
280
34k
Happy Clients
brianwarren
97
6.7k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Transcript
react best prac*ce
[email protected]
承玉
Outline • Technology stack – react/koa/webpack/npm • Prac*ce
• Summary
• Technology stack
react • react: library for build user interface
react • render
react • diff
React-‐components • Components based on react • hDps://github.com/react-‐component
react-‐component
koa • Koa: next genera*on web framework for node.js
chain
chair • 基于 koa,整合支付宝基础服务 – Session – Hsf(Tr) – Drm
– Tair – Ls
chair • Router • logger • Proxy (generate
from jar)
webpack • hDp://webpack.github.io/ • Module bundler
npm • Package manager for javascript (react,jquery,angular…)
tnpm • 集团内部源,支持私有包
• prac*ce
tnpm • package.json:
commonjs • commonjs for browser and server
react • Components Composi*on
Custom page • aliloan
React rerender • Render on data change
webpack • commonjs compile, sourcemap • Common code extrac*on
• Css extrac*on
webpack • Development – Build into memory – koa middleware
– No hash
webpack • Build – Compress – hash
jsx on server • jsx as skeleton on server
share code with server • u*l/enum/jsx … • app/common/getUserFromIvr.js:
dev.assets • Half dead – Serve sta*c resources in nodejs
memory (webpack) – Speedy cbd cycle
summary • server-‐browser harmony – js rules all – Use
React on server and browser – Use npm on server and browser – Use webpack on server and browser