Criando uma Web App com React.js + Firebase

Neste workshop vamos criar uma Web App com React.js + Firebase do inicio ao fim. Entender a comunicação entre componentes, utilizar o melhor do ECMAScript 2015 (ES6) e armazenar e sicronizar os dados da aplicação com Firebase.

Transcript

1. Criando uma Web App com React + Firebase 1
2. Breno Polanski Front End Software Engineer Meteorite.bi @brenopolanski 2
4. 4 cghackspace.org
5. O que é React ? 5
6. O que é React ? • O React é uma BIBLIOTECA; • Desenvolvida pelo Facebook e Instagram; • O “V” do MVC; • Criação de componentes interativos e reusáveis; • Utiliza Virtual DOM, que é bem mais rápido e inteligente do que a API nátiva do DOM. 6
7. Cada vez que algo for complexo, quebre em pequenas partes e desenvolva esses componentes, essa técnica é chamada de component driven development. O que é React ? 7
8. Empresas que usam React 8
9. Empresas que usam React 9
10. Quando eu devo usar React ? 10
11. Quando eu devo usar React ? 1. Minha aplicação precisará manipular o DOM com muita frequência? 2. Eu quero componentizar meus elementos sem ter que ficar criando templates pra tudo? 11
12. Mas e esse React ? É tipo um Angular né ? 12
15. Angular é um framework ;) 15
16. Já uma biblioteca serve para resolver algo específico. 16
17. Como funciona ? 17
18. Como funciona ? 1. Quando um componente é inicializado; 2. O método render é chamado, gerando uma representação da view; 3. Dessa representação, um markup é produzido e injetado no documento; 4. Quando algum dado muda, o método render é chamado novamente; 5. Para que tenhamos uma atualização mais eficiente possível, o React faz uma diferenciação (diff) do valor novo com o valor velho; 6. Aplicando no DOM somente a nova mudança. 18
20. Virtual DOM 20
24. Algoritmo Virtual DOM http://bit.ly/1onRp8V 24
25. Pensando em Componentes 25
26. Mas como conseguir separar esses componentes e seus subcomponentes ? 26
27. Classes e Métodos 27
28. … e seguir o princípio da responsabilidade única 28
29. Uma classe deve fazer apenas uma coisa, deve fazê-la bem e deve fazer somente ela. 29
31. Exemplo :) 31
37. Hierarquia desses componentes • Grid ◦ GridItem ▪ GridTitle ▪ GridSubtitle 37
40. JSX XML-LIKE SYNTAX EXTENSION TO ECMASCRIPT 40
42. XML → JavaScript 42
44. React Props e State 44
45. Props podem ser passados para nosso componente como atributos, exatamente como no HTML. 45
47. State é um objeto interno do componente que atualiza os dados do componente toda vez que suas informações mudarem. 47
49. Mas o que acontece no DOM ? 1. A cada vez que clicamos no botão o método increment é chamado através de um listener; 2. O estado count muda e é renderizado novamente dentro do elemento h1; 3. O React renderiza novamente utilizando o Virtual DOM; 4. O React compara o novo DOM virtual com o DOM que ele possui em nossa view; 5. O React isola o que mudou e atualiza apenas essas mudanças diretamente em nosso DOM. 49
50. Demo 50
51. React Events 51
52. React Events • onChange • onInput • onSubmit • onClick • onSelect • onScroll • ... Mais em: https://facebook.github.io/react/docs/events.html 52
53. React Life Cycle 53
54. React Life Cycle • componentWillMount: Chamado apenas uma vez antes da chamada render; • componentDidMount: Chamado apenas uma vez depois da chamada render; • componentWillUnmount: Chamado quando o componente é destruido; • shouldComponentUpdate: Chamado antes do componente setar seus estados e propriedades, e retorna um valor (boolean) que determina se o componente deve se atualizar ou não. 54
55. The Beer Store 55
65. Antes de tudo... ...configurar ambiente! 65
67. Git Bash 67
69. Agora... ...baixar o projeto! 69
70. $ git clone https://github.com/react- beer/the-beer-store-jsday- facisa 70
72. Tecnologias Utilizadas 72
74. 74 Gulp
75. 75 Bower
77. Padrão CommonJS 77
79. Visão geral do projeto 79
80. Instalando dependências 80
81. Criando arquivo App.js 81
82. Criando o primeiro componente 82
84. Executando aplicação com Gulp 84
85. Importando componentes 85
86. Trabalhando com props 86
87. Criando componente Header 87
89. Trabalhando com states 89
90. Carregando arquivo JS com dados das cervejas 90
91. Criando funções de Add e Deletar cervejas do carrinho 91
92. Criando componente Products 92
94. Criando componente Product 94
96. Add botão em componente Product 96
97. Add callback para adicionar produto/cerveja no carrinho 97
98. Criando componente Cart 98
100. Add component Bootstrap Modal para Cart 100
101. Mostrar itens no carrinho do Modal 101
103. Firebase é uma plataforma para desenvolvimento de aplicativos baseados em armazenamento e sincronização de dados em tempo real utilizando apenas código client-side. 103
110. OBRIGADO ;) 110
111. Referências • https://facebook.github.io/react/index.html • https://facebook.github.io/jsx/ • http://rafaell-lycan.com/2015/comecando-com-react/ • http://gabrielsobrinho.com/introducao-ao-react-js/ • http://javascript.tutorialhorizon.com/2014/09/13/execution-sequence-of-a- react-components-lifecycle-methods/ • https://en.wikipedia.org/wiki/CommonJS • http://tableless.com.br/criando-um-aplicativo-simples-de-chat-com- firebase/ 111