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
130
支付宝小程序的开放架构
yiminghe
0
160
gitc2016 react based architecture
yiminghe
1
130
antd at qcon2016
yiminghe
1
180
react-based architecture
yiminghe
2
140
React Ecosystem At Ant Financial
yiminghe
4
2.2k
ant design preview
yiminghe
1
230
react at alipay
yiminghe
43
4.2k
form validation in react
yiminghe
4
530
Other Decks in Technology
See All in Technology
[CV勉強会@関東 ECCV2024 読み会] オンラインマッピング x トラッキング MapTracker: Tracking with Strided Memory Fusion for Consistent Vector HD Mapping (Chen+, ECCV24)
abemii
0
230
初心者向けAWS Securityの勉強会mini Security-JAWSを9ヶ月ぐらい実施してきての近況
cmusudakeisuke
0
130
iOS/Androidで同じUI体験をネ イティブで作成する際に気をつ けたい落とし穴
fumiyasac0921
1
110
オープンソースAIとは何か? --「オープンソースAIの定義 v1.0」詳細解説
shujisado
10
1.3k
SSMRunbook作成の勘所_20241120
koichiotomo
3
170
強いチームと開発生産性
onk
PRO
35
12k
SREが投資するAIOps ~ペアーズにおけるLLM for Developerへの取り組み~
takumiogawa
2
480
Adopting Jetpack Compose in Your Existing Project - GDG DevFest Bangkok 2024
akexorcist
0
120
AGIについてChatGPTに聞いてみた
blueb
0
130
AWS Media Services 最新サービスアップデート 2024
eijikominami
0
200
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
770
OCI Vault 概要
oracle4engineer
PRO
0
9.7k
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Producing Creativity
orderedlist
PRO
341
39k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Designing the Hi-DPI Web
ddemaree
280
34k
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