Introdução ao React e formas de uso de CSS com React

Transcript

1. React JS A javascript library for building user interfaces
2. Luann Francisco Full Stack Engineer github.com/dudow8 linkedin.com/in/luannfrancisco medium.com/@luannfrancisco
3. O que é React?
4. O que é React? (Por definição) É uma biblioteca javascript para escrever interfaces.
5. Requisitos para desenvolver com React Javascript, javascript e … javascript. (versão ES6+); XHTML, CSS e ...
6. javascript!
7. e entender isso aqui ...
8. Pera aí … Que sintaxe é essa??
9. JSX JS + XHTML
11. JSX - Sintaxe
12. JSX - Interpolação
13. React.Component
14. Anatomia de um Componente Pode ser considerado uma micro-entidade e é construído praticamente: state, props, template e lógica Tudo isso fica disponível no mesmo arquivo. Linguagem de marcação (JSX) e a lógica que controla o componente.
15. this.props (diretivas) this.state (vm.variável)
16. Stateful Stateless
17. Handling Events vs
18. Lifecycle - (Versão Resumida)
19. Construindo Services
20. Hands-on Let’s rock!
21. Dependências - Webpack - Babel - npm - yarn - blá, blá, blá .. Problemas: =( Configurar tudo na mão seguindo tutoriais, dor de cabeça, etc …
22. create-react-app <3
23. <3
24. Agora é com você!
25. Referências e links úteis Indicação de cursos [https://reactjs.org/community/courses.html] Documentação oficial [https://reactjs.org/docs/hello-world.html] Documentação JSX [https://reactjs.org/docs/introducing-jsx.html] Redux [https://redux.js.org/] Repositório de coisas legais já prontas para usar [https://github.com/enaqx/awesome-react]
26. From the dark side of codding ... … to the Styles! Cheio de style, mas pq será que a foto dele é preto e branco?
27. CSS in React Ways to use CSS in React
28. Lucas Stoque Front-End Engineer lucastoque.com github.com/stoque twitter.com/ostoque
29. CSS é lindo!
30. Mas também pode se tornar um monstro
31. https://bit.ly/2LHQnlV
32. PROBLEMA DO ESCOPO GLOBAL
36. Alguns padrões que tentam resolver o problema do escopo global
37. • BEM • RSCSS • SMACSS • ITCSS
38. Formas de uso de CSS com React
39. • CSS Inline • CSS Externo • CSS Modules • Styled Components (CSS-IN-JS)
40. CSS Inline
42. Desempenho ruim Legibilidade ruim Não é possível reaproveitamento código Infinity
43. CSS Externo
44. styles.css
45. Card.js
46. Escopo Global Não precisamos de dependências externas Não precisamos de configurações adicionais no Webpack
48. styles.css
50. Card.js
51. Classes com hífen devem ser acessadas com notação de colchete
52. Escopo do componente (Em tempo de build é gerada uma classe única com hash para cada elemento) Precisamos configurar o Webpack para que funcione (Se estivermos usado create-react-app será necessário ejetar o Webpack)
53. Terminal
54. config/webpack.config.dev.js
55. config/webpack.config.prod.js
57. Terminal
58. Card.js
59. Adaptando com base em props
60. ThemeProvider - app.js
61. ThemeProvider - button.js
62. injectGlobal - Depreciado na v4
63. createGlobalStyle - v4
64. Escopo do componente (Em tempo de build é gerada uma classe única com hash para cada elemento) Estrutura componentizada Mantém o JSX limpo Intuitivo
65. https://bit.ly/2tsaGwg Repositório com os exemplos
66. Referências e links úteis - https://reactjs.org/ - https://github.com/css-modules/css-modules - https://www.styled-components.com/ - Styled Components Tips (https://bit.ly/2IgleE4) - CSS Evolution (https://bit.ly/2yB0xDg) - http://getbem.com/introduction/ - https://willianjusten.com.br/falando-sobre-rscss/ - https://willianjusten.com.br/organizando-seu-css-com-itcss/ - https://smacss.com/ - https://github.com/training-center
67. Obrigado! Luann Francisco Full Stack Engineer github.com/dudow8 linkedin.com/in/luannfrancisco Lucas Stoque Front-End Engineer lucastoque.com github.com/stoque