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
160
react best practice
react best practice
yiminghe
May 14, 2015
Tweet
Share
More Decks by yiminghe
See All by yiminghe
小程序终端技术架构
yiminghe
0
57
支付宝小程序的开放架构
yiminghe
0
140
gitc2016 react based architecture
yiminghe
1
130
antd at qcon2016
yiminghe
1
170
react-based architecture
yiminghe
2
130
React Ecosystem At Ant Financial
yiminghe
4
2.1k
ant design preview
yiminghe
1
200
react at alipay
yiminghe
43
4k
form validation in react
yiminghe
4
510
Other Decks in Technology
See All in Technology
FrontDoorとWebAppsを組み合わせた際のリダイレクト処理の注意点
kenichirokimura
1
510
コンテナセキュリティの基本と脅威への対策
kyohmizu
3
760
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
120
長期運用プロジェクトでのMySQLからTiDB移行の検証
colopl
2
850
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
170
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
400
ServiceNow Knowledge Learning Rise up
manarobot
0
210
Azure犬駆動開発の記録/GlobalAzureFukuoka2024_20240420
nina01
1
210
AWSに詳しくない人でも始められるコスト最適化ガイド
yuhta28
0
190
Databricks における 『MLOps』
databricksjapan
2
170
KubeCon EU 2024 Recap “Kubernetes Policy Time Machine: Where to Next?”
ryysud
0
210
コードを書く隙間を見つけて生きていく技術/Findy 思考の現在地
fujiwara3
27
5.9k
Featured
See All Featured
Building Applications with DynamoDB
mza
88
5.6k
Product Roadmaps are Hard
iamctodd
44
9.7k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
A designer walks into a library…
pauljervisheath
200
23k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Gamification - CAS2011
davidbonilla
76
4.6k
Adopting Sorbet at Scale
ufuk
68
8.6k
Atom: Resistance is Futile
akmur
259
25k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
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