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
Construindo interfaces interativas com React
Search
14islands
October 09, 2019
Programming
0
80
Construindo interfaces interativas com React
14islands
October 09, 2019
Tweet
Share
More Decks by 14islands
See All by 14islands
Sneaky Santa
14islands
0
55
Innovation & Prototyping
14islands
0
170
Google Santa Tracker: Present Bounce
14islands
0
240
Responsive Web Design Recap
14islands
8
1.4k
Lessons learned using WordPress as a CMS
14islands
2
960
The good, the bad and the ugly with responsive web design
14islands
4
1.9k
Faster Responsive Websites
14islands
2
340
Performance as design: doing responsive responsibly
14islands
32
8k
Other Decks in Programming
See All in Programming
Catch Up: Go Style Guide Update
andpad
0
260
AI 駆動開発におけるコミュニティと AWS CDK の価値
konokenj
5
270
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.6k
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
360
AI時代に必須!状況言語化スキル / ai-context-verbalization
minodriven
2
110
Blazing Fast UI Development with Compose Hot Reload (Bangladesh KUG, October 2025)
zsmb
1
200
マンガアプリViewerの大画面対応を考える
kk__777
0
340
AI Agent 時代的開發者生存指南
eddie
4
2.2k
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
310
AkarengaLT vol.38
hashimoto_kei
1
130
iOSでSVG画像を扱う
kishikawakatsumi
0
170
Featured
See All Featured
Music & Morning Musume
bryan
46
6.9k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
How to Ace a Technical Interview
jacobian
280
24k
The Cult of Friendly URLs
andyhume
79
6.6k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Facilitating Awesome Meetings
lara
57
6.6k
RailsConf 2023
tenderlove
30
1.3k
Git: the NoSQL Database
bkeepers
PRO
431
66k
The Pragmatic Product Professional
lauravandoore
36
7k
Faster Mobile Websites
deanohume
310
31k
Building Applications with DynamoDB
mza
96
6.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Transcript
Construindo interfaces interativas com React
Interação de usuário é como o usuário interage com a
interface e como a interface reage com o usuário.
Interação de usuário é como o usuário interage com a
interface e como a interface reage com o usuário. Scroll Hover Drag Click… Render Animate…
Somos a
None
None
None
✈ "
✈ ☀ ☁
✈ " ✈ ⛄
☀ ☀ ✌
None
O nosso processo
React é uma biblioteca de JavaScript declarativa, eficiente e flexível
para construir interfaces de usuário.
Componentes auxiliam a organizar a arquitetura. Uma língua comum entre
design e desenvolvimento.
SCREENSHOT OF PROXY ARCH?
None
Prototype Inspect
None
None
Estrutura dos componentes
None
Component.js Component.story* Component.module.css index.js Component 1 Components Component 1 Component
2 Component 3
None
None
Componentes funcionais + hooks ( Yes, please.
None
None
Implementando animaçōes
Tenha regras bem definidas sobre como implementar.
Nenhuma animação é melhor que uma mal feita.
Mexa apenas no opacity e transform.
Position transform: translate(npx, npx); Scale transform: scale(n); Rotation transform: rotate(ndeg);
Opacity opacity: 0…1;
None
None
None
None
None
None
None
None
O ciclo do React, apesar de flexível, não é o
suficiente para orquestrar a ordem das coisas.
Algumas libs animam os valores fora do ciclo do React,
para melhor performance.
Orquestrando com refs.
None
Orquestrando com componentes.
None
Se necessário, FLIP it.
Caso necessário, FLIP it.
isFullScreen: false
min-height: 400px position: relative …
isFullScreen: true
position: fixed top: 0 left: 0 width: 100% height: 100%
isFullScreen: false 01 First
02 Last
03 Invert
https://aerotwist.com/blog/flip-your-animations/
None
None
Jogue a responsa no After Effects.
None
None
None
None
None
Algumas dicas
awesome-react-components
React DevTools
React DevTools
Analise a performance
Libs que recomendamos.
+
Obrigado!