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

5. None
6. None
7. None

8. ✈ "

9. ✈ ☀ ☁

10. ✈ " ✈ ⛄

11. ☀ ☀ ✌

12. None

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?

17. None

18. Prototype Inspect

19. None
20. None

21. Estrutura dos componentes

22. None

23. Component.js Component.story* Component.module.css index.js Component 1 Components Component 1 Component

    2 Component 3
24. None
25. None

26. Componentes funcionais + hooks ( Yes, please.

27. None
28. None

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;
34. None
35. None
36. None
37. None
38. None
39. None
40. None
41. None

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.

45. None

46. Orquestrando com componentes.

47. None

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/

58. None
59. None

60. Jogue a responsa no After Effects.

61. None
62. None
63. None
64. None
65. None

66. Algumas dicas

67. awesome-react-components

68. React DevTools

69. React DevTools

70. Analise a performance

71. Libs que recomendamos.

72. +

73. Obrigado!