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
78
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
330
Performance as design: doing responsive responsibly
14islands
32
8k
Other Decks in Programming
See All in Programming
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
130
私の後悔をAWS DMSで解決した話
hiramax
4
140
実践!App Intents対応
yuukiw00w
1
350
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
13
3.2k
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
240
未来を拓くAI技術〜エージェント開発とAI駆動開発〜
leveragestech
2
180
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
470
ソフトウェアテスト徹底指南書の紹介
goyoki
1
110
自作OSでDOOMを動かしてみた
zakki0925224
1
1.4k
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
110
為你自己學 Python - 冷知識篇
eddie
1
170
新世界の理解
koriym
0
140
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Balancing Empowerment & Direction
lara
2
590
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Faster Mobile Websites
deanohume
309
31k
How GitHub (no longer) Works
holman
315
140k
Producing Creativity
orderedlist
PRO
347
40k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Designing for humans not robots
tammielis
253
25k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
780
Git: the NoSQL Database
bkeepers
PRO
431
65k
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!