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
79
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
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
4
1.3k
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
920
Local Peer-to-Peer APIはどのように使われていくのか?
hal_spidernight
2
450
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
プログラミングどうやる? ~テスト駆動開発から学ぶ達人の型~
a_okui
0
190
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.2k
XP, Testing and ninja testing ZOZ5
m_seki
2
300
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1k
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3k
ててべんす独演会〜Flowの全てを語ります〜
tbsten
1
220
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
190
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
390
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
A designer walks into a library…
pauljervisheath
209
24k
Faster Mobile Websites
deanohume
310
31k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Why Our Code Smells
bkeepers
PRO
339
57k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Agile that works and the tools we love
rasmusluckow
331
21k
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!