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
180
react best practice
react best practice
yiminghe
May 14, 2015
Tweet
Share
More Decks by yiminghe
See All by yiminghe
小程序终端技术架构
yiminghe
0
150
支付宝小程序的开放架构
yiminghe
0
170
gitc2016 react based architecture
yiminghe
1
130
antd at qcon2016
yiminghe
1
190
react-based architecture
yiminghe
2
150
React Ecosystem At Ant Financial
yiminghe
4
2.2k
ant design preview
yiminghe
1
260
react at alipay
yiminghe
43
4.2k
form validation in react
yiminghe
4
540
Other Decks in Technology
See All in Technology
2.5Dモデルのすべて
yu4u
2
610
Culture Deck
optfit
0
330
7日間でハッキングをはじめる本をはじめてみませんか?_ITエンジニア本大賞2025
nomizone
2
1.4k
MC906491 を見据えた Microsoft Entra Connect アップグレード対応
tamaiyutaro
1
480
CZII - CryoET Object Identification 参加振り返り・解法共有
tattaka
0
240
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
460
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
130
インフラをつくるとはどういうことなのか、 あるいはPlatform Engineeringについて
nwiizo
5
2.1k
Bounded Context: Problem or Solution?
ewolff
1
210
君も受託系GISエンジニアにならないか
sudataka
2
370
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
130
トラシューアニマルになろう ~開発者だからこそできる、安定したサービス作りの秘訣~
jacopen
2
1.5k
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
50
11k
What's in a price? How to price your products and services
michaelherold
244
12k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Being A Developer After 40
akosma
89
590k
BBQ
matthewcrist
86
9.5k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
Building Applications with DynamoDB
mza
93
6.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
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