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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
yiminghe
May 14, 2015
Technology
230
3
Share
react best practice
react best practice
yiminghe
May 14, 2015
More Decks by yiminghe
See All by yiminghe
小程序终端技术架构
yiminghe
0
280
支付宝小程序的开放架构
yiminghe
0
210
gitc2016 react based architecture
yiminghe
1
180
antd at qcon2016
yiminghe
1
240
react-based architecture
yiminghe
2
180
React Ecosystem At Ant Financial
yiminghe
4
2.3k
ant design preview
yiminghe
1
330
react at alipay
yiminghe
43
4.5k
form validation in react
yiminghe
4
580
Other Decks in Technology
See All in Technology
20260515 ⾃分のアカウントとプライバシーを守る認証と認可の話〜利⽤者向け〜
oidfj
0
600
Sociotechnical Architecture Reviews: Understanding Teams, not just Artefacts
ewolff
1
180
Swift Sequence の便利 API 再発見
treastrain
1
280
20260515 OpenIDファウンデーション・ジャパンご紹介
oidfj
0
120
鹿野さんに聞く!CSSの最新トレンド Ver.2026
tonkotsuboy_com
6
3.1k
分断された OT と IT を繋ぐ架け橋 -Kubernetes が切り拓く 産業用組み込み製品の現在地 -
yudaiono
1
110
クラウドネイティブ DB はいかにして制約を 克服したか? 〜進化歴史から紐解く、スケーラブルアーキテクチャ設計指針〜
hacomono
PRO
6
1k
サイボウズ、プラットフォームエンジニアリング始めるってよ ― プラットフォームチームの事業貢献と組織アラインメントの強化
ueokande
0
110
バイブコーディング、仕様駆動、その先へ - 「不確実性に対する検査‧適応のサイクル」を設計する
littlehands
1
250
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
4.4k
How to learn AWS Well-Architected with AWS BuilderCards: Security Edition
coosuke
PRO
0
140
Every Conversation Counts
kawaguti
PRO
0
230
Featured
See All Featured
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
550
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
61
44k
Technical Leadership for Architectural Decision Making
baasie
3
360
WENDY [Excerpt]
tessaabrams
10
37k
Google's AI Overviews - The New Search
badams
0
1k
Navigating Team Friction
lara
192
16k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
820
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
10
1.2k
Applied NLP in the Age of Generative AI
inesmontani
PRO
4
2.2k
Skip the Path - Find Your Career Trail
mkilby
1
120
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
120
[SF Ruby Conf 2025] Rails X
palkan
2
1k
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