![t
Obrigado! =]
#frontmcz17
djanilson.alves@gmail.com](https://image.slidesharecdn.com/fimreact-190411170048/75/React-Front-In-Maceio-Framework-Edition-2017-81-2048.jpg)
React - Front In Maceió Framework Edition - 2017
- 5. React - PrimeirasImpressões
- 6. React - PrimeirasImpressões WHAT!?? ? WHAT!?? ?
- 7. “Reações” ao react Feio,estranho, html dentro JS Separação de preocupações (responsabilidade)!? React é uma templating language!?
- 8.
- 9.
- 10.
- 11.
- 12. JSX quando compilado… Éapenas javascript
- 13. JSX quando compilado… Éapenas javascript
- 14. React - SegundasImpressões Humm… Tem dois fluxos de dados igual Angular!? Isso roda com… mas como!? E como é que ele muda o DOM mesmo ?
- 16.
- 17. O que reactnão é: Controllers Directives Templates Global Event Listeners Models View Models
- 18. E o quereact é? Apenas Componentes!
- 23.
- 24.
- 26. E se separássemos deuma forma diferente ?
- 27.
- 28.
- 29.
- 30.
- 31. Separação de Responsabilidade Componentes Reusável Manutenível Testável Fácilde detectar erros Se os componentes forem verdadeiramente autônomos
- 32. Sobre Fluxo dedados Sem FrameWork: qualquer componente se comunica com qualquer componente; Backbone Pub-Sub: ao invés de ter fn nas chamadas dos métodos, você tem classes observando eventos. Angular JS: 2-way data binding (View, scope, Controller) e $digest loop
- 33. Sobre Fluxo dedados ReactJS: 1-way data flow; Check Props
- 34. Sobre Fluxo dedados ReactJS: 1-way reactive data flow; Os dados são passados do elemento pai para o elemento filho
- 35. Sobre Fluxo dedados Props é acessado por this.props Props Check
- 36. Sobre Fluxo dedados Props é acessado por this.props Props Check
- 37. Sobre Fluxo dedados This.props é imutável Apenas leitura cara!
- 38. Sobre Fluxo dedados O state é mutável Do It Yourself
- 39. Sobre Fluxo dedados O state é mutável Do It Yourself
- 40. Sobre Fluxo dedados O state pode se tornar uma props
- 41. Fluxo de dados,os dados fluem para os componentes filhos
- 42. Fluxo de dados,os dados fluem para os componentes filhos
- 43. Fluxo de dados,os dados fluem para os componentes filhos
- 44. Os eventos fluemsubido para os componentes pai
- 45. Os eventos fluemsubido para os componentes pais
- 46. Os eventos fluemsubido para os componentes pai
- 47.
- 48.
- 49.
- 50.
- 51. os dados fluemde componentes pias para os componentes filhos Os eventos fluem subido dos filhos para os componentes pai Familiar ao DOM…
- 52. os dados fluemde componentes pias para os componentes filhos Os eventos fluem subido dos filhos para os componentes pai Familiar o DOM…
- 53. E já quefalamos em DOM
- 54. Manipular o DOMé ruim cara! É inconsistente
- 55. Manipular o DOMé ruim cara! É inconsistente É dificil de testar
- 56. Manipular o DOMé ruim cara! É inconsistente É dificil de testar É frágil
- 57. Manipular o DOMé ruim cara! É inconsistente É dificil de testar É frágil Global Event Listeners
- 58. Manipular o DOMé ruim cara! É inconsistente É dificil de testar É frágil Global Event Listeners É CUSTOSO
- 59. Manipular o DOMé ruim cara! É inconsistente É dificil de testar É frágil Global Event Listeners É CUSTOSO É de passar raiva! ò_Ó
- 60.
- 61. VirtualDOM - FistRender t Browser <html> <button>AdicionarTexto</button > <p></p> </html> User View DOM Processo Javascript React V.DOM
- 62. VirtualDOM - FistRender t Browser <html> <button>Adicionar Texto</button> <p></p> </html> <html> <button>Adicionar Texto</button> <p></p> </html> O DOM real é preenchido pelo dom virtual. User View DOM Processo Javascript React V.DOM
- 63. VirtualDOM - FistRender t Browser <html> <button>Adicionar Texto</button> <p></p> </html> <html> <button>Adicionar Texto</button> <p>Novo texto adicionado</p> </html> O Usuário clica em Adicionar Texto User View DOM Processo Javascript React V.DOM
- 64. VirtualDOM - FistRender t Browser Processo Javascript React V.DOM <html> <button>Adicionar Texto</button> <p>Novo texto adicionado</p> </html> User View DOM <html> <button>Adicionar Texto</button> <p>Novo texto adicionado</p> </html> O DIFF é feito e o React adiciona as mudanças
- 65. E o VirtualDOM? javascriptna memória, simulando o DOM; render() é disparado quando algo muda; React faz o diff (DOM X VirtualDOM) e muda apenas o que realmente mudou; Rápido e preciso;
- 66. Ciclo de vida (ComponentLifeCycle) 3 Partes principais Mounting - Um componente irá ser inserido no DOM Updating - Um componente está para ser renderizado novamente Unmounting - Um componente está sendo removido do DOM. + Métodos interpretativos (Will);
- 67. Ciclo de vida (ComponentLifeCycle) getInitalState - retorna os dados iniciais do componente e é chamado antes do componente ser montado. componentWillMount - Chamado imediatamente antes do componente ser montado; componentDidMount - Chamado imediatamente depois do componente ser montado; Se precisar alterar o DOM deve vir aqui. Mounting
- 68. Ciclo de vida (ComponentLifeCycle) ComponenteWillReciveProps(nextProps) - chamado quando um componente recebe novas propriedades; shouldComponentUpdate(nextProps, nextState) - Deve retornar um boolean se o componente deve ser atualizado ou não; ComponenteWillUpdate(nextProps, nextState) - Chamado imediatamente antes de uma atualização acontecer. ComponenteDidUpdate(prevProps, prevState) - Chamado imediatamente depois da atualização acontecer Updating
- 69. Ciclo de vida (ComponentLifeCycle) ComponenteWillUnmount - Chamado imediatamente antes de um componente ser desmontado e destruído. Limpezas devem ser feitas aqui. Unmounting
- 70. Ciclo de vida (ComponentLifeCycle)
- 71. E o quefazer com as interações como: onClick, onKeyDown, onKeyUp?
- 72.
- 73. React + Redux onClick, onKeyDown, onKeyUp? Deixeo redux cuidar disso! O Redux permite gerenciar o estado com um comportamento previsível.
- 74. React + Redux Reduxutiliza os conceitos de programação funcional como a imutabilidade, sempre que uma ação ocorre o estado anterior recebe um novo estado e este é retornado.
- 75.
- 76.
- 77. “ O princípios básicos #1- Uma única fonte de verdade: Todo o estado será organizado em formato de árvore e estará disponível em um único lugar na sua aplicação.
- 78. “ O princípios básicos #2- O estado é somente leitura: Ele só pode ser alterado através de uma ação que envia qual dado deve ser modificado. Garantindo que todas as mudanças sejam centralizadas em um único lugar.
- 79. “ O princípios básicos #3- Modificações são feitas por funções puras: As ações para a alteração de um estado não irão modificar o próprio objeto, serão os reducers os responsáveis por sempre retornar um novo estado atualizado.
- 80.
- 81.