Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Construindo interfaces interativas com React

D34efae5a5bdbb00ce3b300c78cf359a?s=47 14islands
October 09, 2019

Construindo interfaces interativas com React

D34efae5a5bdbb00ce3b300c78cf359a?s=128

14islands

October 09, 2019
Tweet

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!