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
220
支付宝小程序的开放架构
yiminghe
0
190
gitc2016 react based architecture
yiminghe
1
150
antd at qcon2016
yiminghe
1
210
react-based architecture
yiminghe
2
160
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
増え続ける脆弱性に立ち向かう: 事前対策と優先度づけによる 持続可能な脆弱性管理 / Confronting the Rise of Vulnerabilities: Sustainable Management Through Proactive Measures and Prioritization
nttcom
1
210
新規事業におけるAIリサーチの活用例
ranxxx
0
170
Jitera Company Deck / JP
jitera
0
250
2025-07-25 NOT A HOTEL TECH TALK ━ スマートホーム開発の最前線 ━ SOFTWARE
wakinchan
0
170
MCPに潜むセキュリティリスクを考えてみる
milix_m
1
870
ecspressoの設計思想に至る道 / sekkeinight2025
fujiwara3
12
2.1k
Tiptapで実現する堅牢で柔軟なエディター開発
kirik
1
150
マルチモーダル基盤モデルに基づく動画と音の解析技術
lycorptech_jp
PRO
2
250
地域コミュニティへの「感謝」と「恩返し」 / 20250726jawsug-tochigi
kasacchiful
0
100
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
600
少人数でも回る! DevinとPlaybookで支える運用改善
ishikawa_pro
4
1.7k
手動からの解放!!Strands Agents で実現する総合テスト自動化
ideaws
3
390
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
YesSQL, Process and Tooling at Scale
rocio
173
14k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Bash Introduction
62gerente
613
210k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
720
A designer walks into a library…
pauljervisheath
207
24k
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