Meet React

Talk about React. The new open-source JS library from Facebook and Instagram, is a different way to write JavaScript apps.

Transcript

1. Meet React Sir. Raphael Amorim
2. Raphael Amorim twitter.com/raphamundi github.com/raphamorim
5. Write code every day
9. Isso é um módulo ou não?
10. Isso é um módulo ou não? É melhor criar uma diretiva para isso?
11. Isso é um módulo ou não? É melhor criar uma diretiva para isso? É melhor criar um service para isso?
12. Isso é um módulo ou não? É melhor criar uma diretiva para isso? É melhor criar um service para isso? Ou eu crio um factory?
13. Isso é um módulo ou não? É melhor criar uma diretiva para isso? É melhor criar um service para isso? Ou eu crio um factory? Por que essa tralha não funciona?
18. React
21. Tá, então você pode construir aplicativos com ele?
22. Tá, então você pode construir aplicativos com ele? github.com/facebook/react/wiki/Complementary-Tools
24. Fluxø
25. Flux
27. Primeiras Impressões
28. Primeira Impressão BtnLike.jsx
29. Primeira Impressão BtnLike.jsx WTF?
30. Primeira Impressão BtnLike.jsx “Achei Feio”
31. Primeira Impressão BtnLike.jsx “Achei Feio” “O HTML deveria ser separado do JS”
32. Primeira Impressão BtnLike.jsx “Achei Feio” “O HTML deveria ser separado do JS” “Então o React é templating language”
33. Não se preocupe… JSX gera o JavaScript pós-compilação
34. Não se preocupe… JSX gera o JavaScript pós-compilação O código gerado corre mais rápido do que um código equivalente escrito diretamente em JavaScript.
35. Não se preocupe… JSX gera o JavaScript pós-compilação O código gerado corre mais rápido do que um código equivalente escrito diretamente em JavaScript. … e o React não é um templating language
36. Não se preocupe… JSX gera o JavaScript pós-compilação O código gerado corre mais rápido do que um código equivalente escrito diretamente em JavaScript. … e o React não é um templating language
37. Segunda Impressão “ Ahhhh! Existe Data-Binding assim como o Angular.js! ” “ Ahhhh! Eu consigo rodar isso com o Backbone, certo? ” “ Ahhhh! Eu consigo fazer animações e SVG! ”
38. Segunda Impressão “ Ahhhh! Existe Data-Binding assim como o Angular.js! ” “ Ahhhh! Eu consigo rodar isso com o Backbone, certo? ” “ Ahhhh! Eu consigo fazer animações e SVG! ” Opa! Espera um pouco!
39. Alguns Fundamentos
40. #1 Tudo é um Componente
41. React não tem….
42. React não tem…. …controllers
43. React não tem…. …controllers …directive
44. React não tem…. …controllers …directive …templates
45. React não tem…. …controllers …directive …templates …global event listeners
46. React não tem…. …controllers …directive …templates …global event listeners …models
47. React não tem…. …controllers …directive …templates …global event listeners …models …view models
48. React não tem…. …controllers …directive …templates …global event listeners …models …view models APENAS COMPONENTES
54. E se separássemos de outra forma?
55. CartComponent
56. CartComponent CartListComponent
57. CartComponent CartListComponent CartItemComponent
58. Separação de Componentes
59. Separação de Componentes Reutilizáveis
60. Separação de Componentes Reutilizáveis Manuteníveis
61. Separação de Componentes Reutilizáveis Manuteníveis Sustentáveis
62. Separação de Componentes Reutilizáveis Manuteníveis Sustentáveis Testáveis
63. #2 O jeitinho React de ser
64. Data Flows Tradicionais item.on(‘change:name’, function() {…. Backbone.js $scope.name = …. Angular.js
65. Data Flows Tradicionais item.on(‘change:name’, function() {…. Backbone.js $scope.name = …. Angular.js
66. props “ Data Handed de pai para filho ”
67. props
68. props
69. state
70. #3 Virtual DOM
71. Virtual DOM É rápido
72. Virtual DOM É rápido É puro
73. Virtual DOM É rápido É puro É o javascript puro, como abstração do DOM
74. Virtual DOM É rápido É puro É o javascript puro, como abstração do DOM Renderiza totalmente
75. #4 Semântica para um arquitetura de componentes
76. #4 Semântica para um arquitetura de componentes nicolasgallagher.com/about-html-semantics-front-end-architecture/
77. #5 React Native
78. Hora do código! github.com/raphamorim/react-sample
79. Obrigado!