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
210
支付宝小程序的开放架构
yiminghe
0
180
gitc2016 react based architecture
yiminghe
1
150
antd at qcon2016
yiminghe
1
210
react-based architecture
yiminghe
2
150
React Ecosystem At Ant Financial
yiminghe
4
2.2k
ant design preview
yiminghe
1
280
react at alipay
yiminghe
43
4.3k
form validation in react
yiminghe
4
550
Other Decks in Technology
See All in Technology
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
6.1k
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
5
690
KiCadでPad on Viaの基板作ってみた
iotengineer22
0
280
敢えて生成AIを使わないマネジメント業務
kzkmaeda
1
260
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
220
WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス
nyata
0
430
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
150
ビギナーであり続ける/beginning
ikuodanaka
3
690
作曲家がボカロを使うようにPdMはAIを使え
itotaxi
0
430
American airlines®️ USA Contact Numbers: Complete 2025 Support Guide
oliversmith12
0
100
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
0
200
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
7.7k
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
What's in a price? How to price your products and services
michaelherold
246
12k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Facilitating Awesome Meetings
lara
54
6.4k
Gamification - CAS2011
davidbonilla
81
5.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
810
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Embracing the Ebb and Flow
colly
86
4.7k
Transcript
react best prac*ce yiminghe@gmail.com 承玉
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