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
68
Construindo interfaces interativas com React
14islands
October 09, 2019
Tweet
Share
More Decks by 14islands
See All by 14islands
Sneaky Santa
14islands
0
45
Innovation & Prototyping
14islands
0
160
Google Santa Tracker: Present Bounce
14islands
0
230
Responsive Web Design Recap
14islands
8
1.3k
Lessons learned using WordPress as a CMS
14islands
2
950
The good, the bad and the ugly with responsive web design
14islands
4
1.9k
Faster Responsive Websites
14islands
2
320
Performance as design: doing responsive responsibly
14islands
32
8k
Other Decks in Programming
See All in Programming
How to use Macrobenchmark
veronikapj
0
160
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
社内 LT 会を発足し、アウトプット文化を醸成させるために考えたこと・やったこと / Starting internal LT meetings and fostering an output culture
mackey0225
3
120
生成AIをkintoneに連携してみた
hideg
0
230
リハビリmruby
kishima
1
160
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
TiDB Serverless ~理想のServerless DBを考える~
soso_15315
1
160
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
CSC307 Lecture 09
javiergs
PRO
1
500
Activities at Cairo Library
cairolibrary720
0
1.2k
CSC307 Lecture 07
javiergs
PRO
0
220
初心者がおさえておきたいAWS CDKのベストプラクティス 2024
konokenj
15
7.3k
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.9k
A better future with KSS
kneath
231
17k
Ruby is Unlike a Banana
tanoku
96
10k
For a Future-Friendly Web
brad_frost
173
9.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
How to Ace a Technical Interview
jacobian
274
23k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Docker and Python
trallard
37
2.9k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
Building Flexible Design Systems
yeseniaperezcruz
323
37k
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!