Please enable JavaScript.
Coggle requires JavaScript to display documents.
Desenvolvimento de aplicações para internet com ReactJS - Coggle Diagram
Desenvolvimento de aplicações para internet com ReactJS
CSS componentes e elementos
Classes
Pró
Em JSX, define-se classes pelo atributo className
Maneira mais prática e direta
Contras
Pouca flexibilidade
Conflito com nomes
Difícil manutenção
Inline
Prós
Ajustes rápidos
Maneira mais prática e direta
Testes de estilo
Contras
Difícil manutenção
CSS in JS
Instalação
npm install --save styled-components
Prós
Manutenção
Facilidade para remover CSS
Estilos dinâmicos
Performance
Praticamente elimina a necessidade de utilizar pré-processador como style ou SASS
Injeção automática de prefixos vendor
Não precisa mais definir webkits
Stateful vs Stateless
Stateful
usa estados
Construídos usando classes em JS
Possui gerenciamento de estados no componente
Stateless
Não usa estados
Não possui gerenciamento de estados no componente
Construídos usando funções em JS
A nomenclatura foi atualizada
Class Components
Function Components
Com hooks, estados são manipuláveis em function components
Formulários
Formulários mantêm um estado interno
Componentes controlados
Tanto select, input ou textarea aceitam um atributo value
Podemos mudar esse valor usando o atributo onChange
Componentes não controlados
A Tag input é read-only
Bibliotecas
Formik
Mais utilizado
Recomendado para forms de aplicações robustas
Redux-forms
Flux
Introdução ao flux
Flux é um padrão de projeto para tráfego de dados de maneira unidirecional
Elementos
Dispatcher
É como um telefonista: ele sabe todos os callbacks para diferentes Stores
Store
É como um gerente supercontrolador. Ele guarda a informação e todas as alterações têm que ser feitas por ele mesmo, mais ninguém
View
É como um gerente intermediário (middleware) que recebe as notificações da Store e passa os dados para as visões abaixo da tela
Action
É como um telégrafo: ele formata a mensagem a ser enviada
Implementações
Mobx
Baseado em observables
Vuex (baseado em Redux e Elm)
Utilizado no VueJS
Reflux
Mais recente
Mais simples que Redux
NgRx/store (baseada em Redux e RxJS)
Mais utilizado em Angular
Redux (mais popular)
Bibliotecas baseadas em flux
Centralizam a informação
"Flux libraries are like glasses: you'll know when you need them". - Dan Abramov
Servem para comunicação entre componentes
Flux tem várias stores e o dispatcher conecta os stores
Redux + React
Redux
É uma implementação de flux
Possui algumas diferenças
O dispatcher é chamdo de reducer
A view é chamada de React
Possui action
Possui store
3 Princípios básicos
1 - Single source of truth: Uma única store
2 - State é read-only
3 - Mudanças são feitas com pure functions
Ou seja, o estado é imutável
Elementos
Store
Em flux: diversas stores
Em redux: uma única store
A Store aqui cuida de toda árvore de estados
Os reducers que cuidam de descobrir qual estado muda
Reducers
Em Redux não há dispatcher (simplifica e divide o trabalho da store)
A store se conecta ao root reducer, que divide os estado em pequenos reducers para descobrir como lidar com esse estado
Os estados aqui são imutáveis
Action
São como o Flux
Diferença
Actions não enviam a action em si para o dispatcher
Retornam um objeto de action formatado
View
Em React, adiciona na camada de View 3 novos conceitos para conectar a View à Store
1 - Provider
É um wrapper da árvore de componentes que tem como responsabilidade tornar mais fácil para os componentes filhos se conectarem a store usando connect()
2 - connect()
É uma função do React Redux, ele é um HOC (High Order Component)
3 - selector
É uma função que define quais estados do Redux que vai ser passado como props
Instalação
npm install react-redux
É uma implementação específica para React
npm install --save-dev redux-devtools
Serve para conectar a aplicação a extensão do chrome chamada de redux-dev-tools
O redud-dev-tools é um monitor que serve para monitorar as alterações de estado da store
Instalar tb a extensão no chrome Redux DevTools
Comunicação avançada entre aplicações
Imutabilidade e Redux
3 Pilares da Imutabilidade
Novas coleções podem ser criadas a partir de uma coleção anterior e uma mutação (setter) como um conjunto
Novas coleções são criadas usando o máximo possível da estrutura original, reduzindo a cópia e aumentando a performance
Uma vez criada, uma coleção não pode ser alterada
Benefícios
Performance
Programação mais simples
Debugging mais simples (detecção de mudanças)
Imutabilidade e React
Se você quer performance em React, use dados imutáveis
Você consegue usando o shouldComponentUpdate ou react.PureComponent
Biblioteca
Immutable.js
Biblioteca que fornece coleções persistentes e imutáveis
Permite detecção barata de alterações nos objetos
Immer
Immutability-helper
Seamless-immutable
Imutabilidade é pré-requisito no Redux
Manipulação de dados mais segura
Time-travel debugging
Redux e React-Redux utilizam comparações rasas (shallow)
Os reducers dividem o objeto de estado em domínios por uma chave
combineReducers checa mudanças usando comparação rasa
1 - Fazem a interação nos reducers
2 - Criam um novo objeto de estados a partir dos estados retornados por cada reducer
connect gera componentes que fazem comparação rasa com estado root
Retornam o valor para a função mapStateProps, verificando aqueles que precisam de uma operação de re-render
Redux + Rest
Suponha um sistema de notificações ou um sistema de logging
Você precisa manter a sincronia, independente da tela onde estiver
Uma maneira de resolver fácil seria armazenar os dados do serviço no Redux
Redux Middlewares
Provê uma camada entre o disparo de uma ação e o momento que ela atinge o reducer
utilizados para uma variedade de funções, entre elas chamadas de APIs de serviço
3 diferenças do apllyMiddleware() do Redux
Só expõe um subconjunto da Store API para o middleware: dispatch e getState()
Fica difícil saber se store.dispatch(action) vai realmente percorrer a cadeia do middleware de novo
Opera em cima de createStore() ao invés da store em si
Os mais utilizados
redux-thunk
É uma função que chama outra função
Instalação
npm install redux-thunk
redux-saga
Rest HTTP com React
APIs HTTP
Servem para conectar um ou mais servidores HTTP
POST
Para criação
DELETE
Para deleção de dados
GET
Para Listagem
PUT
Para alterações de dados
Fetch API
Nativamente tem o Fetch API e o HTTP Request
Nativa do browser
Oferece um alternativa ao XMLHttpRequest() e jQuery.ajax()
Suporte ao Service Workers
Algumas diferenças do XLMHttpRequest e jQuery.ajax()
Não envia nem recebe cookies (precisa definir a opção credentials)
Não rejeita o status do erro HTTP
Axios
É uma lib HTTP API muito utilizada
Cross-browser
Pode monitorar o progresso de um request
Melhor tratamento de erros
Melhor teste
Instalação
npm install axios
Testes em React
Debugging
Depuração é o processo de encontrar e reduzir defeitos em um software
Ferramentas
Chrome Devtools
Redux Devtools
React Developer Tools
Tratamento de erros
Tratamento em componentEs
Em JS usamos o PropTypes
Podemos usar linguagens tipadas como TypeScript, definindo interfaces
TDD e BDD com Jest
Bibliotecas TDD
Enzyme
Chai
Testa TDD e BDD
Shallow
Mocha
Testa TDD
React-testing-library
Testa componente
Instalação
npm install --save-dev
testing-library/react
npm install --save-dev
testing-library/jest-dom/extend-expect
Selenium
Testador de propósito geral, ou seja, dá para fazer teste unitário e teste de fluxo que é a sua principal função
Jest
Pupperteer
É uma ferramenta que roda em cima do chrome, roda em cima do browser para fazer teste de fluxo