Construindo interfaces interativas com React

Transcript

1. Construindo interfaces interativas com React
2. Interação de usuário é como o usuário interage com a interface e como a interface reage com o usuário.
3. 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…
4. Somos a
8. ✈ "
9. ✈ ☀ ☁
10. ✈ " ✈ ⛄
11. ☀ ☀ ✌
13. O nosso processo
14. React é uma biblioteca de JavaScript declarativa, eficiente e flexível para construir interfaces de usuário.
15. Componentes auxiliam a organizar a arquitetura. Uma língua comum entre design e desenvolvimento.
16. SCREENSHOT OF PROXY ARCH?
18. Prototype Inspect
21. Estrutura dos componentes
23. Component.js Component.story* Component.module.css index.js Component 1 Components Component 1 Component 2 Component 3
26. Componentes funcionais + hooks ( Yes, please.
29. Implementando animaçōes
30. Tenha regras bem definidas sobre como implementar.
31. Nenhuma animação é melhor que uma mal feita.
32. Mexa apenas no opacity e transform.
33. Position transform: translate(npx, npx); Scale transform: scale(n); Rotation transform: rotate(ndeg); Opacity opacity: 0…1;
42. O ciclo do React, apesar de flexível, não é o suficiente para orquestrar a ordem das coisas.
43. Algumas libs animam os valores fora do ciclo do React, para melhor performance.
44. Orquestrando com refs.
46. Orquestrando com componentes.
48. Se necessário, FLIP it.
49. Caso necessário, FLIP it.
50. isFullScreen: false
51. min-height: 400px position: relative …
52. isFullScreen: true
53. position: fixed top: 0 left: 0 width: 100% height: 100%
54. isFullScreen: false 01 First
55. 02 Last
56. 03 Invert
57. https://aerotwist.com/blog/flip-your-animations/
60. Jogue a responsa no After Effects.
66. Algumas dicas
67. awesome-react-components
68. React DevTools
69. React DevTools
70. Analise a performance
71. Libs que recomendamos.
72. +
73. Obrigado!