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
77
Construindo interfaces interativas com React
14islands
October 09, 2019
Tweet
Share
More Decks by 14islands
See All by 14islands
Sneaky Santa
14islands
0
53
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
RubyKaigiで得られる10の価値 〜Ruby話を聞くことだけが RubyKaigiじゃない〜
tomohiko9090
0
100
「兵法」から見る質とスピード
ickx
0
200
少数精鋭エンジニアがフルスタック力を磨く理由 -そしてAI時代へ-
rebase_engineering
0
130
推論された型の移植性エラーTS2742に挑む
teamlab
PRO
0
150
從零到一:搭建你的第一個 Observability 平台
blueswen
0
220
Practical Domain-Driven Design - Workshop at NDC 2025
mufrid
0
130
Cloudflare Realtime と Workers でつくるサーバーレス WebRTC
nekoya3
0
230
インターフェース設計のコツとツボ
togishima
2
490
JVM の仕組みを理解して PHP で実装してみよう
m3m0r7
PRO
1
250
TSConfigからTypeScriptの世界を覗く
planck16
2
1.3k
ワイがおすすめする新潟の食 / 20250530phpconf-niigata-eve
kasacchiful
0
230
CRUD から CQRS へ ~ 分離が可能にする柔軟性
tkawae
0
230
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
How to train your dragon (web standard)
notwaldorf
92
6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
For a Future-Friendly Web
brad_frost
178
9.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
106
19k
The Language of Interfaces
destraynor
158
25k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.6k
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!