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
200
react best practice
react best practice
yiminghe
May 14, 2015
Tweet
Share
More Decks by yiminghe
See All by yiminghe
小程序终端技术架构
yiminghe
0
230
支付宝小程序的开放架构
yiminghe
0
190
gitc2016 react based architecture
yiminghe
1
150
antd at qcon2016
yiminghe
1
220
react-based architecture
yiminghe
2
160
React Ecosystem At Ant Financial
yiminghe
4
2.2k
ant design preview
yiminghe
1
290
react at alipay
yiminghe
43
4.3k
form validation in react
yiminghe
4
550
Other Decks in Technology
See All in Technology
事業価値と Engineering
recruitengineers
PRO
8
5.4k
実践アプリケーション設計 ②トランザクションスクリプトへの対応
recruitengineers
PRO
4
1.2k
Jaws-ug名古屋_LT資料_20250829
azoo2024
3
210
エラーとアクセシビリティ
schktjm
0
230
退屈なことはDevinにやらせよう〜〜Devin APIを使ったVisual Regression Testの自動追加〜
kawamataryo
4
1.1k
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
yug1224
10
3.6k
実践AIガバナンス
asei
3
290
制約理論(ToC)入門
recruitengineers
PRO
9
3.7k
個人CLAUDE.md紹介と設定から学んだこと/introduce-my-claude-md
shibayu36
0
160
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
110
ここ一年のCCoEとしてのAWSコスト最適化を振り返る / CCoE AWS Cost Optimization devio2025
masahirokawahara
1
1.1k
ソフトウェア エンジニアとしての 姿勢と心構え
recruitengineers
PRO
26
12k
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
284
13k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Scaling GitHub
holman
463
140k
A better future with KSS
kneath
239
17k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
185
54k
Visualization
eitanlees
147
16k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Unsuck your backbone
ammeep
671
58k
RailsConf 2023
tenderlove
30
1.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
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