Introdução ao React: Como Começar
Traduzido por
ScribdTranslationsIntrodução ao React: Como Começar
Traduzido por
ScribdTranslationsREACT
INTRODUZIONE
React é uma biblioteca JavaScript que nasceu para se tornar a solução para desenvolvedores frontend e aplicativos móveis baseados em
[Link] é uma biblioteca declarativa baseada em componentes.
Declarado porque o React permite desenvolver Interfaces de Usuário (UI) facilmente, tornando o código mais legível e fácil.
da debugar, projetar interfaces para cada estado da aplicação de modo que a cada mudança de estado React
atualizará apenas as partes da interface do usuário que dependem desses dados.
Icomponents sono simili a tag html, possono essere creati componenti singoli o composti con una struttura ad albero.
per UI complexas. As interações e a lógica para os componentes são implementadas em JavaScript e isso nos permite
facilmente di passare ed accedere struture datcomplesse in vari puntdella applicazione senza dover salvare
informações sobre o DOM.
COMO ADICIONAR REACT A UM SITE
Para adicionar um componente React a uma página HTML existente, não haverá requisitos de instalação.
Passo 1: Adicione um Contêiner DOM ao HTML (raiz)
Em primeiro lugar, é preciso adicionar, à página HTML, uma tag <div> vazia para indicar o ponto onde visualizar
algo com React.
<div id="content"></div>
E é necessário atribuir a este <div> um atributo único. Isso permitirá encontrá-lo com o código JavaScript e de
visualizar um componente React dentro dele.
Puoi posizionare un <div> “contenitore”ovunqueall’interno del tag <body> e inserire tuti contenitori DOM
independência di cui hai bisogno in una pagina
Passo 2: Adicione as Tags de Script
Subsequentemente, deve-se adicionar três tags <script> à página HTML, logo antes da tag de fechamento </body>:
Carregar React.
<scriptsrc="htps://[Link]/react@16/umd/[Link]" crossorigin></script>
<script src="htps://[Link]/react-dom@16/umd/[Link]" crossorigin></script>
Carregue nosso componente React.
<script src="[Link]"></script>
</body>
Os dois primeiros tags carregam o React. O terceiro carrega o código do componente.
As versões acima são destinadas apenas a ambientes de desenvolvimento e não são adequadas para ambientes de produção.
versões minificadas e otimizadas de produção do React são:
<script crossorigin src="htps://[Link]/react@16/umd/[Link]"></script>
<script crossorigin src="htps://[Link]/react-dom@16/umd/[Link]"></script>
Verifique se a CDN que você está usando definiu o cabeçalho HTTP Access-Control-Allow-Origin: *:
Passo 3: Crea un Componente React
Creare un file Javascript che definisce un componente React ed atraverso l’id del div lo si inserisce nell’HTML.
CRIAR UM NOVO PROJETO REACT
Quando, em vez disso, é necessário começar um novo projeto React e à medida que a aplicação cresce, surge a necessidade de
uma ferramenta mais integrada. Existem diferentes ferramentas recomendadas para o desenvolvimento de aplicações JavaScript.
completar para obter todas as vantagens do React. As toolchains em React ajudam a compor como:
Utilizar bibliotecas de terceiros importadas do npm.
Identificar imediatamente erros comuns.
Visualizar em tempo real o efeito das alterações no código JavaScript e CSS durante o desenvolvimento.
Otmizzare a produção do output.
LeToolchains não precisam de uma configuração para serem utilizadas.
React recomenda estas soluções:
Se você está aprendendo React criando um novo aplicativopágina única,utilizarCriate ReactAplicativo.
Se você está realizando um site renderizado do lado do servidor com [Link], [Link].
Se você está criando um site voltado ao conteúdo estático, useGatpessoa.
Se você está criando uma biblioteca de componentes integrando uma base de código preexistente,
usarToolchains Mais Flexíveis.
Criar ReactApp
Criar Aplicativo Reacté
um ambiente confortável para aprender React, e é a melhor maneira de começar a construir uma
nova aplicaçãopágina únicaem React.
Isso configura o ambiente de desenvolvimento de forma a poder utilizar os recursos mais recentes do JavaScript, fornece
uma ótima experiência de desenvolvimento e otimiza a aplicação para a produção.
Estou solicitando a instalação deNode >= 8.10 e npm >= 5.6.
Para criar um projeto, execute:
npx create-react-app mia-app
cdmia-app
npm iniciar
npx é um executor de pacotestincluso no npm.
Create React App não gerencia a lógica de backend ou os bancos de dados; cria apenas uma cadeia de construção para o frontend, então
pode ser utilizado com qualquer backend.
Quando se deve liberar em produção, execute o comando
npm run build
E será criada uma build otimizada da aplicação na pasta build.
[Link]
[Link]é um framework popular e leve para aplicações estáticas e renderizadas no lado do servidor feitas com
React. Includesoluzioni per il routng e l’applicazione degli stlie richiede l’utlizzo [Link] ambiente servidor.
Gatsby
Gatsbyè il miglior modo di crearesit statcicon React, consente di utlizzare componentReact, ma il suo output è
constituído inteiramente de código HTML e CSS pré-renderizado, de modo a garantir tempos de carregamento rápidos.
Toolchains Mais Flexíveis
As toolchains seguintes oferecem mais escolha e flexibilidade, recomendados para usuários mais experientes:
Neutrinoincluir um preset para osaplicações Reacte para oscomponentetReact.
Nxpermite o desenvolvimento de monorepo full-stack, com suporte integrado para React, [Link],Expressar, e outras coisas.
Pacoteé um construtor de aplicações rápido e sem configurações quefunciona com React.
Razzleframework de renderização do lado do servidor que não precisa de configurações, oferece mais flexibilidade de
[Link].
ESTRUTURA DO ARQUIVO DO PROJETO COM CREATE-REACT-APP
Uma vez que o projeto é criado com o create-react-app, são criados arquivos e pastas.
O arquivo [Link]
A pasta do projeto inclui um conjunto de pacotes já instalados, fazendo parte [Link], conteúdo dentro da
diretório node_modules.
Uma parte dos pacotes é necessária para a execução da aplicação e para que ela funcione.
Existem também outros pacotes, que fornecem ferramentas de suporte para a verificação do código, o lançamento de um servidor.
Web para depuração, execução de testes automatizados, montagem de arquivos e recursos para liberação em produção
e outra coisa. Portanto, eles não são indispensáveis em tempo de execução, mas apenas na fase de desenvolvimento.
O arquivo [Link]: trata-se de um arquivo presente nas aplicações e pacotes escritos para [Link], contém um
objetoJSONque resume as informações principais do pacote, como o nome (name) e a versão (version), as
dependências necessárias para o runtime (dependencies) e aquelas apenas para o desenvolvimento (devDependencies), além de uma série de
comandos que podem ser executados através npm, o gerenciador de pacotes do [Link], definido na propriedade scripts.
Eu comando react-scripts
create-react-app inclui o pacote react-scripts que fornece uma série de scripts já prontos capazes de executar diversas
operações a partir do Prompt de Comando.
Aprendo o Prompt e deslocando-se para a pasta do projeto, é possível executar os scripts com
npm Comando.
Os comandos disponíveis são:
- npm start segue a transpilação do código-fonte da aplicação, mostrando eventuais erros. Al
Ao final do processo, o servidor Web é ativado para depuração e o navegador é aberto para visualizar a
pagina iniziale dell’applicazione all’indirizzolocalhoste alla porta predefinita (3000). Se il browser non
mostre o conteúdo esperado, verifique quaisquer erros no painel do Console.
- npm build: executes the build of the project, creating the same directory and generating the files inside it.
assemblada da aplicação, otimizada para o lançamento em ambiente de produção. As ferramentas de empacotamento agrupam
e empacotam os arquivos necessários para o funcionamento da aplicação, e iniciam o processo de diminuição para
reduzir o peso dos arquivos que o navegador terá que baixar, maximizando o desempenho.
- npmtest:prepara a suíte de testes para a execução. Geralmente, a ferramenta permanece ativa e em escuta para
executar novamente os testes em face de modificações nos fontes da aplicação.
- npm eject: comando irreversível que se executa quando se deseja abrir mão do suporte do create-react-app.
comando remove do projeto a dependência da ferramenta e extrai os arquivos de configuração para Webpack, Babel e
as outras ferramentas nas quais se baseia, deixando o controle completo nas mãos do desenvolvedor.
Arquivo sorgente src
A pasta do projeto contém os arquivos fonte reais e próprios, que constituem os "tijolos" da aplicação: eles
comprendem arquivos JavaScript com o código dos componentes, arquivosCSScom as folhas de estilo, eventuais "ativos" (imagens,
ícone, fonte, etc.).
Na pasta encontramos o arquivo [Link], que representa o componente principal da aplicação (root DOM) e que
ospiterà al suo interno tutti i componenti "figli" che andranno a comporre l'interfaccia utente.
O componente que servirá de contêiner estará no arquivo [Link], na pasta public que funciona como 'ponto de entrada'
da aplicação.
JSX: COMPONENTES E ELEMENTOS
JSX é uma sintaxe que pode parecer HTML, mas é uma extensão da sintaxe JavaScript que permite criar
elementos que compõem os componentes. Os componentes são redirecionados no DOM
da aplicação. Você pode pensar nos elementos como descrições do que você quer ver na tela. React
A lei este objeto é utilizado para construir o DOM e mantê-lo atualizado.
Portanto, toda a aplicação tem uma estrutura de árvore DOM, é recomendável criar em arquivos .js distintos os individuais
componente e redirecioná-los para o DOM ([Link]) através do arquivo [Link].
No React, os elementos de um componente devem ter um único elemento pai, por exemplo:
<div> </div>
<h1> Olá Mundo</h1>
<div> </div>
<h2> Primeiro exemplo<h2>
Neste caso, ocorreria um erro. Se quisermos escrever o código anterior, retornando mais elementos,
corretamente e sem inserir o segundo elemento no elemento pai div, ou criar outro div, é possível
envolvê-los em <[Link]>...</[Link]> que permite devolver elementos múltiplos como
resultado de um metodorender() sem precisar criar um elemento DOM adicional para contê-los.
In pratca é possibile scrivere gli element dei component diretamente in Javascript, infat, JSX è opzionale
e não é necessário para utilizar o React, uma vez que ele será convertido em Javascript, mas é muito mais
confortável, simples e legível. A ferramenta Babel converte, na verdade, o código JSX em JavaScript, em chamadas para
[Link], por exemplo:
const element = <h1 className="saluto">Hello, world!</h1>;
vem convertido em:
const element = [Link](
h1
{className: 'saluto'},
Olá, mundo!
);
Código Javascript em JSX
All’interno degli elementJSX è possibile eseguire codice Javascript (espressioni, variabili, funzioni, ecc) inserendolo
em parênteses grafitos { }, por exemplo, incluímos o resultado da chamada de uma função JavaScript, em um
elemento<h1>.
const element = <h1> Hello, {formatName(user)} </h1>;
const user = {
firstName: 'Giuseppe',
lastName: 'Verdi'
};
function formatName(user) {
return [Link] + ' ' + [Link];
}
[Link](element, [Link]('root'));
Vejamos neste exemplo que é possível criar elementos e atribuí-los a variáveis;
No elemento, nas chaves {} é feita uma chamada a uma função JavaScript que pega os dados de um
objeto do usuário. E, por fim, o elemento é finalmente redirecionado para o DOM através do nome da variável.
É possível utilizar JSX dentro de instruções if, ciclos for, atribuí-lo a variáveis, utilizá-lo como argumento de
uma função e retorná-la como resultado de uma função.
Não adicione as aspas ao redor das chaves ao incluir uma expressão JavaScript em um atributo.
Deveria usar ou as aspas (para as strings) ou as chaves (para as expressões), mas nunca ambas ao mesmo tempo.
mesmo atributo.
React DOM utlizza laconvenzionecamelCase na atribuição do nome aos atributos, em vez do que foi utilizado
normalmente no HTML, modifica o nome de alguns atributos, por exemplo, o atributo class se tornaclassName em
JSX etabindexdiventatabIndex.
I componentReact implementano unmetodorender()che riceve datin input e ritorna cosa deve visualizzare.
PRIMA APP REACT: Olá Mundo
Exemplo de app react que cria um componente HelloMessage através de uma classe
class HelloMessage extends [Link] {
renderizar() {
retornar (
<div>
<h1>Olá {[Link]}</h1>
</div>
);
}
}
[Link](<HelloMessage name="Mundo" />, [Link]('root'));
PROGETTO REACT OROLOGIO
Exemplo concreto de uma aplicação React de um relógio que mostra a hora atual e demonstra a reatividade do React:
A aplicação é composta por 4 arquivos:
arquivo [Link]
<div id="root"></div>
Arquivo html que contém a tag root e representa o elemento pai do DOM em c0u65Zzzi será redirecionado e
visualizada toda a aplicação.
file [Link]
Este arquivo contém o componente Relógio
importar React de 'react';
function Orologio() {
const oraMillisecondi = [Link]();
const ora = new Date(oraMilissegundos);
retornar (
<p> {[Link]()}</p>
)
}
export default Orologio;
Vem importada a biblioteca React, em seguida é criado o componente Relógio através de uma função. Com
[Link]() obtém a hora atual em milissegundos, depois cria um objeto do tipo Date. O componente retorna um
elemento p em que recebe o objeto oraetoLocaleTimeString() o visualiza em formato horas/minutos/segundos. Por fim é
exportado o componente.
arquivo [Link]
importar React de 'react';
import Orologio from './Orologio';
função App() {
retornar (
<div className="App">
<h1>Hora Atual</h1>
<Orologio/>
</div>
)
}
exportar padrão App;
é o componente pai de toda a aplicação, importa todos os componentes filhos, neste caso só o componente
Relógio e retorna a estrutura de todos os componentes da aplicação.
Vemos que, importado o componente Relógio, este pode ser inserido na aplicação através de um
simples tag <Orologio/>.
Os nomes dos componentes devem sempre começar com letra maiúscula, ao contrário dos tags JSX.
arquivo [Link]
importar React de 'react';
importar ReactDOM do 'react-dom';
import App from './App';
função orario() {
[Link](<App/>, [Link]('root'));
}
setInterval(orario, 1000)
Isto importa React, ReactDOM, o arquivo do componente pai App.
[Link](componente, onde redirecioná-lo)
redirige o componente <App/> na raiz do DOM no HTML. Este componente mostra a hora atual de forma
statco, é necessário atualizar a página para ver as atualizações, por isso é feito o redirecionamento
dentro de uma função que é chamada a cada segundo com setInterval(). A cada chamada da função,
redirecionará o componente a cada segundo e uma característica do React é que a cada redirecionamento, é
Comparado o DOM com o anterior, apenas os elementos que sofreram modificações mudarão. Neste
caso, entre todos os elementos, mudará apenas <p></p>, a cada segundo, o resto não.
PASSAR DE CLASSE A FUNÇÃO E VICE-VERSA
Antes de serem introduzidos os hooks para gerenciar o estado no React, o código era escrito com classes. Introduzidos
os hooks passaram das classes para as funções e é comum ainda encontrar código com classes, mas a diferença entre
A classe e a função são mínimas e é fácil passar de uma classe para uma função e vice-versa.
Data a função:
função App() {
retornar (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p> Prima App React </p>
</cabeçalho>
</div>
);
}
Para convertê-la em uma classe:
class App extends Component {
render() {
retornar (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p> Prima App React </p>
</cabeçalho>
</div>
);
}
}
ImportareimportReact, { Component} from 'react';
Usa a palavra-chave class, seguida pelo nome, e estende Component e insira todo o bloco de código no método
render() que é chamado e executado automaticamente por padrão.
COMPONENTES E PROPS
Os componentes permitem dividir a UI em partes independentes reutilizáveis. Conceitualmente, os componentes
Funções JavaScript: recebem como entrada dados chamados de 'props' e retornam elementos que descrevem
o que deve aparecer na tela.
Props representa um objeto que contém as propriedades de um componente.
Tomemos o exemplo anterior do relógio e, além da hora atual local, adicionemos outro componente relógio.
que atravesso a fusos horários mostra a hora de 6 horas mais adiante.
o arquivo [Link] se torna:
function App() {
retornar (
<div className ="App">
<h1>Ora Attuale</h1>
<Orologio fusoorario = "0"/>
<Orologio fusoorario = "6"/>
</div>
)
}
Vejamos que a props fusoorario é passada para o componente como um atributo deltag.
o arquivo [Link] se torna:
importar React de 'react';
function Orologio(props) {
const oraMillisecondi = [Link]() + [Link] * 3600 * 1000;
const ora = new Date(oraMilissegundos);
retornar (
<p> {[Link]()}</p>
)
}
export default Orologio;
o componente da função recebe como parâmetro props. À hora atual em milissegundos é adicionado o fuso horário.
chamado por props e convertido em milissegundos (* 3600 * 1000).
No componente untag pode-se indicar quantas props se deseja e depois chamá-las no componente (que recebe
como parâmetro sempre apenas props) através de [Link].
O objeto props é apenas para leitura, não pode ser modificado.
CLASSI E PROPS
Para chamar e usar em uma classe as propriedades props, vamos pegar o exemplo do relógio convertido em classe:
arquivo [Link]
importar React de 'react';
classOrologio extends [Link] {
construtor(props) {
super(props);
}
render() {
const oraMillisecondi = [Link]() +[Link] * 3600 * 1000;
const ora = new Date(oraMillisecondi);
retornar (
<p> {[Link]()}</p>
)
}
}
export default Orologio;
Podemos estender a classe tanto com Component, importando-o no react, ou simplesmente com
[Link].
Para chamar as props na classe: define-se o método constructor(), antes do método render(), e nele se
passaprops, que é definido depois no metodosuper().
Para utilizar as props na classe (no método render()) faz-se referência a elas com:
[Link]
O ESTADO DOS COMPONENTES
Por fim, para atualizar a interface, chamamos [Link]() para mudar a saída renderizada.
O estado (ou estado) é um objeto onde os valores que pertencem ao componente são armazenados e toda vez que
o estado muda o componente reexecuta a renderização (é chamado automaticamente render()).
O estado é semelhante às props, mas é privado e totalmente controlado pelo componente.
Para gerenciar os estados, são necessários componentes de tipo classe, de modo que sejam encapsulados no componente.
O estado é definido com a palavra-chave state e será inicializado no constructor() da classe:
construtor() {
super();
[Link] = { ... };
}
Vamos retomar o exemplo do Relógio, falta um requisito fundamental: que o componente Relógio seja configurado
tmer ed aggiorni la propria UI ogni secondo nel suo interno. E poi avere:
[Link](<Orologio/>, [Link]('root'));
Para implementar isso, precisamos adicionar um "estado" ao componente Relógio, que se torna:
importar React de 'react';
class Orologio estende [Link] {
constructor(props) {
super(props);
[Link] = {
orario: new Date()
}
}
renderizar() {
const oraMillisecondi = [Link]() + [Link] * 3600 * 1000;
const ora = new Date(oraMilissegundos);
retorna (
<p> {[Link]()}</p>
)
}
}
export default Orologio;
O método getTime() é um método do objeto Date, igual a now(), que retorna a hora atual em milissegundos.
Esta classe é redirecionada com
[Link](<App/>, [Link]('root'));
Portanto, por enquanto, retorna a hora de forma estática (os segundos não fluem).
CICLO DE VIDA DOS COMPONENTES DE UMA CLASSE
Cada componente React é caracterizado por um Ciclo de Vida, no qual podemos distinguir três fases:
Inicialização do componente (Montagem)
Atualização do componente (renderizar) através de setState() ou a recepção de novas Props (Atualizando)
Remoção do componente (Desmontagem)
Um componente, em seu ciclo de vida, executa em ordem alguns métodos. Esses métodos têm o objetivo de gerenciar o ciclo.
di vita di un componente React e cominciano con will quando precedono un evento e con did quando seguono un
evento.
Temos acesso a esses métodos que poderemos usar para executar determinadas ações quando um componente é
criado, atualizado ou destruído ou, até mesmo, decidir se um componente deve ser modificado em consequência da
variação de pelo menos uma das propriedades contidas em seu objeto State ou ao receber novas Props.
Inicialização de um componente (MONTAGEM)
- O construtor é o primeiro método que é chamado para uma correta inicialização, serão atribuídos valores de
os props padrão definidos através do objeto defaultProps e, portanto, o objeto state será inicializado.
- O segundo método a ser invocado é componentWillMount() que é chamado antes que o componente
venga reindirizado (método render).
O React recomenda usar o construtor em vez deste método para cada inicialização.
- render() é o único método obrigatório quando se quer definir um componente. Deve retornar pelo menos um React
Elemento ou nulo ou falso, se não quisermos mostrar nada na tela para esse componente. Deve ser uma
função pura, não deve modificar diretamente o objeto props state.
- ComponentDidMount() é o método que é invocado após a execução do render(). Este é o método a ser usado para
manipular o DOM ou para recuperar eventuais dados de um servidor.
Atualização do componente (ATUALIZANDO)
Atualização do objeto Estado
Quando se efetua a atualização do objeto State, uma série de métodos é invocada em sequência.
-O primeiro é shouldComponentUpdate() que recebe como argumentos os objetos nextProps e nextState que
representam o próximo valor do objeto Propse do objeto State e devolvem um valor booleano. Se falso, os
métodos sucessivos não serão invocados, por padrão retorna true, permitindo a atualização do componente
a cada modificação dos props e estados. Por isso, pode ser usado para determinar se o componente deve
estar atualizado com os próximos valores de PropseState. Dentro deste método é possível comparar os valores
atualiza os oggetState e Props com os de nextState e nextProps, permitindo assim decidir se efetuar
a atualização do componente.
-SeshouldComponentUpdate()resttuiscetrue, verrà invocatocomponentWillUpdate(). In questo metodo, non è
consentir modificar o objeto State através [Link](), pode ser utilizado para preparar o componente
antes que a atualização do objeto State ou do objeto Props aconteça.
-Após o metodorender(), é invocado o componentDidUpdate() que pode ser usado para baixar dados atualizados
da um servidor ou para operar no DOM.
Recepção de novas Props
Mesmo no caso em que um componente receba novas Props, quase os mesmos métodos serão invocados.
do objeto Estado.
In questo caso abbiamo un metodo aggiuntvo:ComponentWillReceiveProps(), che non viene invocato in fase di
inicialização de um componente, mas posteriormente, no momento em que novas Props são passadas para um
componente. Pode ser utilizado para atualizar e modificar o objeto State dentro de um componente se as
As novas Props recebidas são diferentes das propriedades do objeto Props atual.
Destruição de um componente (DESMONTAGEM)
Na fase de desmontagem de um componente, será invocado como único método componentWillUnmount() que pode
essere usato per operazioni come invalidare eventualitmer avviatnella funzione componentDidMount() e altre
operações de manutenção que previnam vazamentos de memória.
ADICIONAR MÉTODOS DE CICLO DE VIDA A UMA CLASSE
No nosso exemplo, queremosimpor umtmertoda vez que o Relógio é renderizado no DOM pela primeira vez
(montagem). Também queremoscancelar otmartoda vez que o DOM produzido pelo relógio é removido
(desmontando).
O método componentDidMount() é executado após a saída do componente ter sido renderizada no DOM. É
um bom ponto para definir um temporizador e implementamos um método chamado atualizarTempo que será invocado
do componenteOrologioogni segundo:
componentDidMount() {
[Link] = setInterval([Link], 1000);
}
O método atualizaTempo será:
aggiornaTempo = () => {
[Link]({
orario : new Date()
});
}
Para realizar uma atualização do estado, utiliza-se o método setState() que recebe as propriedades do estado que devem ser
atualizadas. Neste caso, temos a propriedade horário, mas se houvesse outras no objeto [Link] estas
não seriam consideradas.
setState() faz uma confrontação das propriedades do objeto que recebe com aquelas do [Link] e se foram modificadas,
ele sobrescreve. No nosso caso, a propriedade horário é simplesmente redefinida com um novo Date() mais recente,
che setState() confronta com o que está em [Link] e o sobrescreve.
Dessa forma, o relógio dispara a cada segundo.
Vamos recapitular o que acontece e a ordem em que os métodos são invocados:
1 Quando <Orologio /> é passado para [Link](), React invoca o construtor do componente que
inicializa [Link] com um objeto que inclui a hora atual. Em seguida, este estado é atualizado.
2 O React invoca o método render() do componente Orologio e aprende o que deve ser exibido na tela.
tela. O React cuida de atualizar o DOM para que corresponda à saída de renderização.
3 Quando a saída da renderização do O relógio é inserida no DOM, o React invoca o método
componentDidMount(). Dentro dele, é configurado um timer que invoca atualizaTempo uma vez por segundo.
4 A cada segundo, dentro dele, o componenteOrologioimplementa uma atualização da UI
invocandosetState() com um objeto que contém a nova hora corrente. Com a chamada asetState(), React é
informe do fato de que o estado mudou e invoca novamente o método render() para saber o que deve ser
mostrado na tela. Desta vez, [Link] metodorender() terá um valor diferente e a saída da
A renderização incluirá o horário atualizado. O React atualiza o DOM de acordo.
Se o componente Relógio fosse removido do DOM (DESMONTADO), o React invocaria o método
componentWillUnmount() é aqui que devemos cancelar o timer de modo a liberar as operações do
componente que foi desmontado no DOM:
componentWillUnmount() {
clearInterval([Link]);
}
USO DE PROPS E STATE
Resumindo, podemos dizer que:
lostate: é um conjunto de dados modificados que dão lugar a uma atualização do componente
mesmo.
Os props: constituem valores imutáveis para os quais não é prevista alteração, úteis para
configurar o componente ou para indicar valores padrão para o estado.
GESTÃO DE EVENTOS
Os eventReact são declarados como para o html, com a diferença de que devem ter uma sintaxe:
camelCase = {[Link]}
Vamos pegar o exemplo do Relógio e inserir um botão que para e reinicia o tempo.
É necessário gerenciar o estado do componente, e nele inicializamos uma propriedade start: true:
[Link] = {
orario: new Date(),
start: true
}
Dopodiché inseriamo nel return di render() un tag bottone:
<button>Parar</button>
Para gerenciar este botão, é necessário inserir um evento que chame uma função:
<buttononClick={[Link]}>Parar</button>
Até agora, implementamos o relógio de forma que, uma vez que o componente esteja montado no DOM, parte
o intervalo a cada segundo em componentDidMount() e o desmontamos em componentWillUnmount().
Neste caso, deve-se lidar com o evento e a função que chama se:
- o relógio está parado, é preciso fazê-lo funcionar novamente;
- o relógio NÃO está parado, é preciso pará-lo desmontando-o.
Criamos um metodostart(), com o setInterval(), e chamamos [Link]() no componentDidMount().
Creiamo un metodostop(),con clearInterval(), e chiamiamo [Link]() in componentWillUnmount().
Quando se define um componente de classe, é comum usar um método da classe como manipulador de eventos:
gestTime() {
[Link]((state) => {
[Link] ? [Link]() : [Link]();
return {start: ![Link]}; //estado contrário
})
}
setState() recebe uma função, que recebe como parâmetro o estado anterior e retorna o estado contrário. Antes
verifica se estado é start chama o método stop() para parar o relógio, caso contrário chama o método start() para fazer
reparar o relógio.
vinculante
O método anterior, no entanto, desta forma, gera ERRO, pois não é possível ler setState(). Isso porque
em JavaScript, os métodos das classes não sãoassociarpor padrão. No método gestTime o thisappartene ao método
mesmo, mas não faz referência à classe, então é preciso fazer o binding, ou seja, associar o método à classe.
O binding vai fazer o construtor() com:
[Link] =[Link](this)
no nosso caso:
[Link] = [Link](this);
mas se temos muitos métodos, é preciso escrever isso para cada método no constructor(). Outra maneira equivalente
está em declarar o método como uma função de seta:
gestTime = () => {
[Link]((estado) => {
[Link] ? [Link]() : [Link]();
return {start: ![Link]};
})
}
Isso porque as arrow functions não implementam o this, então neste caso o this fará referência à classe.
Se quisermos um botão dinâmico que muda com base no estado:
<button onClick = {[Link]}>{[Link] ? 'STOP' : 'START'}</button>
A classe Relógio no final será:
importar React de 'react';
class Orologio extends [Link] {
construtor(props) {
super(props);
[Link] = {
orario: new Date(),
start: true
}
}
render() {
const oraMilissegundos = [Link]() + [Link] * 3600 * 1000;
const ora = new Date(oraMilissegundos);
retornar (
<p>Em {[Link]} {[Link]()} </p>
<button onClick = {[Link]}>{[Link] ? 'STOP' : 'START'}</button>
</p>
)
}
aggiornaTempo = () => {
[Link]( {
orario : new Date()
});
}
gestTime = () => {
[Link]((state) => {
[Link] ? [Link]() : [Link]();
return {start: ![Link]};
})
}
iniciar(){
[Link] = setInterval([Link], 1000);
}
parar(){
clearInterval([Link]);
}
componentDidMount() {
[Link]();
}
componentWillUnmount() {
[Link]();
}
exportar padrão Orologio;
ARRAY DE ELEMENTOS
Dado o exemplo de [Link]:
. . .
<Orologio paese = 'Italia' fusoorario = '0'/>
<Orologio paese = 'Usa' fusoorario = '-6'/>
. . .
vamos ver que contém apenas dois elementos <O relógio>, mas pode acontecer que em um componente haja muitos elementos
dello stessotpo e per questo possono essere gesttin array di elemented essere implementatdinamicamente.
Na classe ou fora dela, declaramos uma variável array const e nela vamos inserir tantos objetos quanto
são os elementos, que conterão as propriedades dos elementos. Para o nosso exemplo:
const clocks = [
{
paese: 'Italia',
fusoorario: 0
},
{
paese: 'Usa',
fusoorario: -6
}
]
Ora para pegar os dados do array e implementar dinamicamente os elementos<O relógio>, criamos no componente
classe um método que o gerencia e retornará tantos elementos<Orologio> quantos são os elementos disponíveis.
getOrologi(){
return [Link]((clock) => {
retornar <Orologio paese = {[Link]} fusoorario = {[Link]}/>
})
}
Usamos o metodomap() que executa uma função em cada elemento que recebe do array que o chama (clocks).
Finalmente chamamos o método no ponto em que os elementos devem ser listados, com:
{[Link]()}
Dessa forma, o método getOrologi() retorna um erro, pois em react, para cada elemento de um array, se espera
um valor único chave. Tipo um ID que o React usa para distinguir os elementos, então podemos adicionar um valor id
único ou usarei um valor do qual temos certeza de que seja único para cada elemento. No nosso exemplo, podemos usar o
proprietàpaesecome id:
getOrologi(){
return [Link]((clock) => {
retornar <Orologiokey = {[Link]}paese = {[Link]} fusoorario = {[Link]}/>
})
}
O arquivo [Link] no final será:
importar React de 'react';
import Orologio from './Orologio';
const clocks = [
{
paese: 'Italia',
fusoorario: 0
},
{
paese: 'Usa',
fusoorario: -6
}
]
classe App estende [Link] {
getOrologi(){
retornar reló[Link]((relógio) => {
retornar <Orologio chave = {[Link]} paese = {[Link]} fusoorario = {[Link]}/>
})
}
renderizar() {
retornar (
<div className="App">
<h1>Hora Atual</h1>
{[Link]()}
</div>
)
}
}
exportar padrão App;
REACT ROUTER
ReactRouter é uma biblioteca que permite criar aplicações React com várias páginas, onde a transição entre uma
a página e a outra ocorrem de forma dinâmica através do Javascript, sem precisar recarregar a página a cada vez.
No React, o Router não é nada mais do que um componente que roteiriza outros componentes.
npm install --save react-router-dom
Nelfile [Link] importamos dois componentes: BrowserRouter, que renomeamos por simplicidade para Router e Route.
importar {BrowserRouter como Router, Rota} de 'react-router-dom';
Envolvemos com o elemento <Router> todo o componente e uma série de elementos <Route> enclausurados em um <div>.
Os elementos <Route> têm um atributo path que indica para qual URL um certo componente deve ser exibido.
<Roteador>
<div>
<Route exact path="/" component={Home} />
<Route strict path="/team/" render={() => <h1>Team</h1>} />
</div>
</Roteador>
No Pratca Route, lê a URL e, com base nela, redireciona o componente.
No primeiro elemento <Route> usamos a propriedade exact para indicar que o componente deverá ser exibido
A casa solo se o valor do atributo path é igual ao valor da propriedade [Link]. Se não tivéssemos
usatoexactReact Router avrebbe mostrato il componente Home anche per il path "/team”.
No segundo elemento <Route> usamos o atributo strict que fará com que haja uma correspondência apenas se
[Link] é exatamente igual a "/team/", ou seja, só se estiver presente a barra final.
<Route> também pode receber outros atributos: component, render, children. Em todos os três casos, serão passados para o
componente o alle funções (render e children) as propriedades history, location e match que são objetos.
A propriedade componentspecífica um componente que queremos que seja exibido em caso de correspondência.
(componente que deve ser mostrado para um certo valor de [Link]).
Podemos, em vez disso, usar o proprenderse se quisermos que uma certa função seja invocada.
A propchildren também recebe uma função que, no entanto, sempre será executada.
Os componentes <Link> e <NavLink>
Defina as rotas, com o Route, vamos ver como adicionar links dentro da aplicação para passar de uma página
tudo isso faz com que seja necessário atualizar o navegador, para fazer isso, em vez das tags <a href=""> (que faz chamadas
no servidor, recarregando a página), do HTML, usamos dois componentes, Link e NavLink.
O componente Link aceita dois atributos: que podem ser uma string ou um objeto e replace. Para entender como
funciona este último, devemos considerar que o React Router mantém na memória o histórico das páginas
visualize. Vamos imaginar o histórico como uma pilha, toda vez que uma página é visitada, uma nova é adicionada.
elemento na pilha. Se o atributo replacedo componente Link for igual a true, substitui-se o último elemento da
pila em vez de adicionar um novo.
importar React, {Componente} de 'react';
import {Link} from 'react-router-dom';
classe Time estende Componente {
renderizar() {
retornar (
<div>
<h1>Team</h1>
<Link to="/stagione">Temporada 2017</Link>
</div>
);
}
}
exportar padrão Equipe;
Dentro do componente Team, inserimos um Link que levará ao endereço localhost:3000/stagionee e não será
recarregar a página do navegador.
NavLink é uma versão particular de Link. Ele pode receber propriedades como activeClassName e activeStyle.
activeClassName="nomeClasse" dá um estilo quando um link está ativo.
ConactveStyle podemos passar um objeto através do qual podemos especificar o estilo que será aplicado
ao elemento NavLink quando a URL atual é igual ao valor do atributo 'to', ou seja, quando [Link] é
igual ao caminho especificado no atributo 'to'.
importar React de 'react';
import {NavLink} from 'react-router-dom';
const Nav = () => (
<nav>
<NavLink exact activeClassName="current" to="/">Página Inicial</NavLink>
<NavLink activeClassName="current" to="/team/">Team</NavLink>
<NavLink activeStyle={{color: 'green'}} to="/stagione/">Estação</NavLink>
</nav>
);
export default Nav;
REDUX
React é uma biblioteca de visualização, e não é tarefa do React gerenciar especificamente o estado.
Redux é "um contêiner de estado previsível para aplicações JavaScript". Na prática, é uma arquitetura para a
gestone dello statomediante passaggi chiari e ben definit. Redux puó essere collegata con qualsiasi libreria
JavaScript, e não só React. Redux permite separar o estado da aplicação do React.
ESTADO DE UMA APLICAÇÃO
Lo statoè l’insieme delle condizioni interne o informazioni in uno specifico istante che determinano il risultato delle
interações com o exterior. O aplicativo possui um estado inicial, e qualquer interação do usuário aciona
uma ação que atualiza o estado. Quando o estado é atualizado, a página é exibida.
A memorização dos dados da aplicação no estado de um componente é boa quando se tem
uma aplicação básica React com poucos componentes, mas a maioria das aplicações reais terá muitos mais
características e componentes. Quando aumenta o número de níveis na hierarquia do componente, a gestão do
o estado se torna problemático e é por isso que se usa Redux.
Frequentemente, uma aplicação se vê na necessidade de gerenciar:
dados provenientes do servidor e armazenados em um cache local;
gerados pelo próprio aplicativo que devem ser enviados ao servidor;
as datas devem permanecer em local para representar, por exemplo, a situação atual
da interface do usuário ou as preferências expressas pelo usuário.
La gestone di questdatè complessa per la quanttà e per il fato che questdatpossono variare per cause diverse,
se depois considerarmos que essas modificações podem ocorrer de forma assíncrona, torna-se ainda mais complexo e é
fácil perder o controle sobre a evolução do estado.
FUNÇÃO PURA
Uma função pura é uma função normal com duas características:
1 Dado um conjunto de entradas, a função deve sempre retornar a mesma saída.
2 Não produz efeitos colaterais.
Per esempio, una funzione é quella che resttuisce la somma di due numeri.
As funções puras dão uma saída estável e são determinísticas. Uma função se torna impura quando executa
algo diferente de calcular seu valor de retorno.
OS TRÊS PRÍNCIPES
A complexidade na gestão do estado de uma aplicação está na modificabilidade e na assíncrono. A solução de
Redux visa a remover esses dois aspectos, baseando-se em três princípios fundamentais:
1 existe uma única fonte de verdade
o estado de toda a aplicação é armazenado em um único objeto
2 o estado é somente leitura
não é possível modificar diretamente as informações armazenadas no estado do aplicativo; apenas
por meio de ações explícitas
3 as modificações ao estado devem ser feitas com funções puras
o estado atual é substituído por um novo estado gerado por funções exclusivamente com base em uma
ação e ao estado anterior
A aplicação desses princípios define a arquitetura do Redux e os limites que uma aplicação deve respeitar.
entende gerir o estado de acordo com esta abordagem.
VANTAGGI
Com Redux, as variações do estado de uma aplicação se tornam analisáveis e reproduzíveis, e é mais simples
compreender como se chegou a uma determinada situação
O Redux obriga a organizar o código seguindo um padrão específico, o que define indiretamente um
padrão de codificação.
É possível definir um estado inicial e fazer a aplicação partir desse estado, de modo a facilitar o
renderização de aplicações JavaScript a partir do servidor
É possível acompanhar as transições de estado tanto para depuração quanto para implementar ações.
INSTALAÇÃO
Se usarmos [Link], podemos instalar o Redux simplesmente com o seguinte comando:
npm install --save redux
che scarica ilpaccheto npm di Reduxe lo rende disponibile per poter essere importato nella applicazione.
Se não utilizamos um ambiente de desenvolvimento [Link], podemos sempre baixar a [Link]ão de
distribuzionedo pacote npm e inserindo uma referência dentro da página HTML da aplicação
<script src="[Link]"></script>
Neste caso, o Redux será acessível como uma variável global [Link].
COMPONENTES CONTENEDOR E COMPONENTES DE APRESENTAÇÃO
É útil dividir a arquitetura dos componentes em duas categorias para aplicações React: componente contêiner
(inteligente) e componentes de apresentação (tolo).
O componente contêiner se ocupa de como as coisas funcionam, enquanto os componentes de apresentação se ocupam
de como as coisas aparecem.
Icomponent smartgestscono lo stato e poi lo passano ai componentdumb. Si prendono cura di effetuare le
chamadas à API, recuperar os dados da fonte dos dados, processar os dados e, em seguida, definir o estado.
Icomponent dumbricevono i props e resttuiscono la rappresentazione dell'interfaccia utente.
Quando você está prestes a escrever um novo componente, nem sempre é claro onde posicionar o estado. Você pode deixar
que o estado seja parte de um contêiner que é um pai imediato do componente de apresentação. Melhor
Ainda, você pode mover o estado mais para cima na hierarquia de modo que o estado seja acessível aos componentes.
apresentação múltipla.
Quando o aplicativo cresce, o estado está espalhado por todo o lugar. Quando um componente precisa acessar o estado ao qual
não tem acesso imediato, tente elevar o estado até o componente ancestral mais próximo.
É uma boa ideia deixar que um componente na parte superior gerencie o estado em nível global e, portanto, passe
tuto verso il basso. Tutti gli altri componenti possono sottoscrivere i props di cui hanno bisogno e ignorare il resto.
Potetetrataretuti component di Reactcome dumb, cosí può concentrarsi solo sul lato vista delle cose.
ARQUITETURA GERAL DO REDUX
o esquema arquitetônico proposto pelo modelo Redux
Portanto, o fluxo geral para modificar o estado atual de uma aplicação segue os seguintes passos:
1 viene individuata unaAção, eventualmente generata tramite unCriador di Ação
2 taleActonviene inviata alloStoretramite unDispatch
3 Dentro da loja, um Reducer substitui o estado atual pelo novo estado identificado, se houver.
baseando-se na análise da Acton
Loja
O store é um grande objeto JavaScript que representa o estado atual da aplicação, e sempre que o estado
é atualizado, a visualização é revisualizada.
O estado completo da aplicação está dentro do objeto store.
A loja tem três métodos para se comunicar com o restante da arquitetura. São:
[Link]() para acessar a árvore do estado atual da aplicação.
[Link](action) para iniciar uma mudança de estado com base em uma ação.
[Link](listener) para ouvir qualquer alteração no estado. Será chamado toda vez que
uma ação é enviada.
Criar uma loja.
O Redux tem um método createStore para criar uma nova loja.
Recebe como parâmetros: um reducer e facultativamente o estado inicial da loja.
[Link]
importar { criarLoja } de "redux";
const estadoInicial = 0 //estadoInicial (opcional).
const store = createStore(reducer, initialState);
Agora ouviremos quaisquer alterações na loja e, em seguida, com [Link](), o estado atual da loja.
[Link](() => {
[Link]("State has changed" + [Link]());
})
Para atualizar a loja Redux, são usadas ações.
Acton/Criadores de Acton
Leactonsono são objetos JavaScript simples que enviam informações da aplicação para a loja. Se você tiver um
contador simples com um botão de incremento, ao pressioná-lo resultará em uma ação que é ativada, que se assemelha
a isto:
{
type: "INCREMENT",
payload: 1
}
O estado da loja só se modifica em resposta a uma ação. Cada ação deve ter uma propriedade de tipo (type) que
descreva o que pretende fazer a ação.
É aconselhável manter a ação pequena, pois representa a quantidade mínima de informações necessárias para
transformar o estado da aplicação.
No exemplo anterior, a propriedade type é definida como "INCREMENT", e uma propriedade adicional está incluída.
Carga que poderia ser renomeada para algo mais significativo.
Para enviar a ação para a loja, você usa [Link](ação):
[Link]({type: "INCREMENTAR", payload: 1});
Durante a escrita de código Redux, normalmente não se utilizam as ações diretamente, mas serão chamadas as
funções que retornam as ações chamadas criador de ações.
O criador do ato anterior de incremento será:
const incrementarContagem = (contagem) => {
retornar {
type: "INCREMENT",
payload: count
}
}
Portanto, para atualizar o estado do contador, é necessário enviar a ação incrementCount assim:
[Link](incrementarContagem(1));
Então, precisamos dos reducers para converter as informações fornecidas pela ação e transformar o estado da loja.
Redutores
O redutor utiliza as informações das ações para atualizar efetivamente o estado.
Um reducer deve ser uma função pura. Dado um conjunto de entradas, deve sempre retornar a mesma saída.
Além disso, não deveria fazer mais nada.
il reducer per il nostro contatore.
const reducer = (state = initialState, action) => {
switch ([Link]) {
caso "INCREMENTAR":
retornar estado + açã[Link]
default:
retornar estado
}
}
O reducer recebe dois argumentos: estado e ação, e retorna um novo estado.
(previousState, action) => newState
O estado aceita um valor predefinido, initialState, que será utilizado apenas se o valor do estado for
indefinido. Caso contrário, será mantido o valor efetivo do estado.
Usamos o switch para selecionar a ação certa.
Vamos adicionar um caso para DECREMENTAR:
const reducer = (estado = estadoInicial, ação) => {
switch ([Link]) {
caso "INCREMENTAR":
retornar estado + açã[Link]
caso "DECREMENTAR":
return state - [Link]
default:
retornar estado
}
}
Aqui está o criador de ação
const decrementarContagem = (contagem) => {
return {
type: "DECREMENT",
payload: count
}
}
Infine, viene inviato allo store.
[Link](incrementCount(4)); //4
[Link](decrementCount(2)); //2
REDUX E REACT
Vimos que com Redux enviamos ações e recuperamos o novo estado utilizando [Link]() e
[Link]().
Agora vamos aprender a conectar uma loja Redux com o React, com a biblioteca react-redux veremos
come:
1 organizar os componentes de contêiner e os componentes de apresentação
Como conectar React e Redux utilizando connect()
3come spedire le azioni utilizzandomapDispatchToProps
4como recuperar o estado utilizando mapStateToProps
1) Componentes inteligentes e componentes estúpidos
Um conceito já discutido anteriormente, de dividir em duas pastas distintas os componentes, um
denominatocontainerse l'altrocomponents. O vantaggio dessa abordagem é que a lógica está separada
da vista.
Os componentes inteligentes tratam a parte lógica, passam os dados necessários para executar a renderização dos
componentes dumb como props.
Como primeiro passo, em um projeto, podemos começar a criar toda a parte gráfica do React, ou seja, os
componentes dumb e, em seguida, a partir destes, criar os componentes smart para gerenciar a lógica
2) A biblioteca react-redux
Para conectar o React ao Redux, será necessário instalar uma biblioteca suplementar chamada react-redux.
npm instalar --save react-redux
A biblioteca exporta apenas duas APIs que é necessário lembrar, um componente <Provider/> e uma função de
ordem superiorconnect().
3) Il componente Provider
Toda a aplicação deve poder acessar a loja. O Redux precisa tornar acessível a loja dos
dá a toda a árvore do componente react a partir do componente principal. O Provider permite
passar os dados de cima para baixo adicionando o estado a todos os componentes.
importar { Provedor } de 'react-redux'
[Link](
<Provider store={store}>
<Aplicativo />
</Fornecedor>,
[Link]('root')
)
Envolvemos o provedor em torno do componente do aplicativo e assim os descendentes do componente têm acesso
ai dati.
4) O método connect()
Colocamos o store à disposição da aplicação, precisamos conectar o react com o store. O único
O modo como é possível comunicar com a loja é enviando ações e recuperando o estado.
connect() permite, portanto, conectar o React com o store, e com a ajuda de dois métodos:
mapDispatchToProps, mapStateToProps, para mapear e passar, apenas as dispatch e a parte do store
interessati al componente dumb React come props.
const mapStateToProps = estado => { const mapDispatchToProps = dispatch => {
return { return {
prop : [Link] dispatch : () => dispatch(actionCreator())
} }
} }
exportar padrão conectar(
mapStateToProps
mapDispatchToProps
(Despejo de Componente)
mapStateToPropsemapDispatchToProps retornam ambos um objeto e a chave desse objeto
torna uma propriedade do componente conectado.
- MapStateToProps: conecta uma parte do estado Redux às props de um componente
React. Desta forma, um componente React conectado terá acesso à parte exata do store.
de que precisa.
- mapDispatchToPropsfa qualcosa di simile, ma per le azioni:collega le azioni Redux alle props
Reagir. Neste modo, o componente React conectado será capaz de enviar mensagens para o
loja.
Portanto, é possível usar connect() para:
1 subscrever a loja e mapear seu estado na propriedade
2 enviar as ações e mapear os callbacks de dispatch nas props
Uma vez conectado o aplicativo ao Redux, é possível usar [Link] para acessar o estado atual
e também enviar as ações.
EXEMPLO REACT-REDUX: RUBRICA
Vamos agora a um exemplo concreto de uma aplicação de Agenda Telefônica com as seguintes características:
. visualizar todos os contatos
. adicionar um novo contato
. remover contato
1) Estrutura das diretórios
Creato un nuovo progeto con create reactappeinstallato Redux, Redux non ha idea di come struturare la
aplicação, então o próximo passo é adicionar alguns diretórios vazios para organizar o Redux:
componentes: conterrá i componentedumb di React, a cui non importa se si sta utlizzando Redux o meno.
containers: conterrá i componentsmart di React che invia azioni allo store di Redux. L'associazione tra
redux e react ocorrerá aqui.
actons: conterrá gli acton creators.
reducers: cada reducer tem um único arquivo, este diretório conterá toda a lógica dos reducers.
arma: conterrá a lógica para a inicialização do estado e a configuração da loja.
Este modelo de estrutura é adequado para aplicações pequenas e médias. Quando o aplicativo cresce, pode
é mais conveniente considerar o modelo de domínio, onde cada funcionalidade terá um diretório próprio, e tudo
o que diz respeito a essa funcionalidade estará dentro dela.
2) Criar a parte da visualização com os componentes de despejo
Podemos começar um projeto criando a parte React da view com os componentdump. Podemos utilizar
Bootstrap para acelerar o trabalho.
Neste projeto, criamos um aplicativo com um menu com duas opções que, com o React Router, será exibido sem
carregar, as páginas da lista de contatos aquela com o formulário para adicionar um novo contato.
3) Inicialização da loja
É uma boa prática esboçar imediatamente, mesmo no papel e caneta, um esquema do estado, em um único objeto, com os
propriedade de que precisa.
Em seguida, na diretório Store, criamos o arquivo [Link] e inicializamos a loja:
const initialState = {
contactList: [],
newContact: {
name: '',
email: '',
tel: ''
}
}
export default estadoInicial;
A loja tem duas propriedades: [Link] é um array de contatos, mentrenewContact é um
objeto que conterá temporariamente os dados de contato a serem adicionados pelo formulário de contato.
4) Criação da loja
Para criar a loja, no arquivo [Link], importamos createStore do redux:
importar{criarLoja} de 'redux'
isso cria a loja que conterá a árvore do estado.
Criamos a loja com:
conststore = createStore(rootReducer, initaliState);
Notamos que ele recebe dois parâmetros: o rootReducer e o estado inicial initialState (opcional)
Importamo initalState creato precedentemente.
Redutores múltiplos combineReducers()
É importante lembrar que as funções Reducer não modificam o objeto State, recebem como entrada o objeto State
corrente e restituiscono um novo objeto State que um reducer deve ter sempre um valor predefinido para o seu
estado, e que deve sempre restituir algo (padrão; retornar estado).
Para eles, é sempre recomendado criar uma função Reducer para cada parte do objeto State e depois combinar essas.
funções em um único Reducer, dividi-las, em vez de um único, para melhorar a legibilidade do código.
Redux, por isso, possui um método denominadocombineReducers() que permite criar múltiplos reducers e depois uni-los
em uma única função (rootReducer).
Esso recebe como argumento o objeto que possui como propriedades os reducers que criaremos:
export default combineReducers(
{
nome: reducer
}
);
Os reducers criados deverão se tornar as propriedades do combineReducers e, por isso, devem ser importados.
inserir com o mesmo nome da propriedade da peça de estado que diz respeito a
5) Criação do rootReducer
Este será o reducer principal que unirá em um único reducer todos os reducers da aplicação.
Na pasta reducers, criamos um arquivo [Link], com combineReducers vazio que unirá os reducers que
criaremos posteriormente.
import { combineReducers } from 'redux'
exportar padrão combineReducers(
{
}
)
E uma vez criado, nós o importamos no arquivo [Link] para passá-lo ao createStore.
6) Renderizar o store global com Provider
Criado o armazenamento, ele deve estar disponível e acessível em todo o aplicativo, em todos os arquivos. Para fazer isso e torná-lo
store globale:
importamos o componente Provider do React Redux e envolvemos o componente App com ele passando a loja
importar { Provedor } de 'react-redux'
[Link](
<Provider store={store}>
<App />
</Provedor>,
[Link]('root')
)
7) Gerenciar a lógica e o funcionamento
Chegado a este ponto, analisamos a aplicação para gerenciar a lógica e o funcionamento, vendo quais
componentdump necessitam de acesso à loja, através do componentsmart, e criando os apropriados
ações e redutores.
Visualizar os contatos da loja
Per visualizzare i contatpresentnello store, creiamo un container deto contactListSmart dove con
mapStateToProps mapeia a parte do estado contactsList, com o mesmo nome contactsList
const mapStateToProps = (estado) => {
retornar {
contactsList: [Link]
}
}
dopodiche’ com
export default connect(mapStateToProps, null)(ContactsList)
passamos contactsLists como props para o componente dumb ContactList (importado).
O container deve ser exportado, porque deverá ser importado e utilizado em [Link] no lugar do
componente dumb ContactsList, para ser visualizado.
Dessa forma, o componente ContactsList receberá como props apenas a parte do estado que ele precisa.
Adicionar novo contato
crie o componente com o formulário para a adição do novo contato,
localStorage e sessionStorage: SALVAR DADOS NO NAVEGADOR
Um elemento que nos permite salvar dentro do navegador informações relevantes para a navegação do site é
icookies. Mas o maior problema dos cookies é que, para lembrar das informações salvas, o navegador deve
trocar mensagens de estado com o servidor a cada nova página que o usuário visita; esta característica, sobretudo
nei sitdove è possibile prenotare viaggi o abitazioni, si traduce in un grande spreco di risorse che potevano essere
utilize para acelerar o tempo de resposta dos sites.
Graças ao advento do HTML5, foram introduzidos objetos que nos permitem salvar os dados fornecidos pelo usuário.
dentro de seus navegadores: sessionStorage e localStorage.
Ambos compartilham as mesmas propriedades e funções, as diferenças entre os dois são que: o sessionStorage perderá todos
quando a janela do navegador for fechada.
Enquanto tudo o que salvamos dentro de um objeto localStorage será mantido dentro do navegador e
resistirá também ao desligamento do computador.
Dentro deste objeto, podemos salvar apenas strings de texto, assim como para os cookies, mas indo para
utilizar o localStorage e o sessionStorage atende às necessidades, não será necessária nenhuma comunicação com o
servidor dado que a página web poderá interrogar diretamente o navegador.
Vamos ver especificamente o localStorage, mas será o mesmo para o sessionStorage.
Para salvar um dado utiliza-se a função setItem("índice", "valor"):
setItem() aceita dois parâmetros. O primeiro será o índice e permitirá chamar posteriormente o valor que
abbiamo impostato, il secondo è il valore vero e proprio che vogliamo salvare all’interno del browser.
Os dados poderão ser visualizados na inspeção do navegador
Salvati dat, perrecuperarlisi usa a função getItem(“indice”):
Para remover um dado salvo, usa-se a função removeItem(indice).
Altri parametri utli per lavorare con questotpo di oggetsono:
• length- permitirá conhecer quantos elementos estão contidos dentro dele, seu índice começa em 0 como
para os arrays;
• chave( índice )- inserindo o valor numérico do índice, nos retornará o valor salvo nesta posição;
MIDDLEWARE
Finora abbiamo visto che ilcreateStorericeve due parametri che sono il rootReducer e lo stato iniziale. Esso puo’
receber outros parâmetros que permitem personalizar ou substituir as ações da loja (dispatch, subscribe,
getState).
Para personalizar o comportamento de um dispatch, usa-se o middleware que é, de fato, uma função executada entre o
despacha uma ação e sua elaboração pelo reducer. Na prática, intercepta as ações e toma algumas
decisões com base em parâmetros: pode passar as ações para o reductor sem modificações ou despachar as ações por sua vez.
Vejamos que a ação lançada por [Link]() passa por uma série de Middleware. Para que a Ação
vem enviado ao Middleware seguinte, ou ao Reducer no caso do último Middleware, é necessário invocar a função
next(action) que é passado pelo Redux para cada Middleware.
In Redux sono partcolarmente importantperche rappresentano il punto dell'applicazione in cui e’ possibile fare
ações assíncronas como: chamadas de API, tempo limite, etc.
Uma característica importante, como pode ser visto na imagem, é que podem ser inseridos mais middleware em cadeia.
e executem na ordem um após o outro.
Dada uma pilha de middleware em cadeia, quando se realiza uma dispatch, na prática é chamado o primeiro
middleware. Em geral, um middleware verificará se a ação é de um tipo específico que lhe interessa, semelhante a como
faria um redutor. Se for do tipo certo, pode executar uma lógica personalizada, caso contrário, passa a ação ao
próximo middleware na pilha.
A diferença de um reducer, um middleware pode ter efeitos colaterais internos, incluindo pausas e outras lógicas.
assíncrono.
Uso de middleware
1) Defina a função middleware
Para usar middleware no Redux, primeiro é necessário definir a função middleware, que deve ter uma definição precisa
segnatura.
// Middleware definido usando funções de seta
const mioMiddleware = store => next => action => {
// corpo da função Middleware
}
// ou de maneira equivalente
função mioMiddleware(loja) {
retornar função (próximo) {
retornar função (ação) {
// corpo da função Middleware
};
};
};
Dentro do middleware temos acesso ao Actonlanciata [Link](acton). Podemos usar a função
next(acton) para fazer passar o Acton ao longo da cadeia de middleware, invocará o próximo middleware, se não
quando a função é invocada, a ação não é passada para o próximo middleware.
Dentro de cada middleware, também temos acesso aos métodos [Link]() para recuperar o objeto State
corrente e [Link]() che è la funzionedispatch()originale. Utlizzando questa funzione, potremo far
recorrer ao objeto toda a cadeia de middlewares já atravessados antes do middleware atual.
2) Invocar a função applyMiddleware()
Depois de definir um ou mais middleware, invocamos a função applyMiddleware(...middleware) à qual passaremos
como assunto os middlewares criados.
importar { aplicarMiddleware } de 'redux';
Passaremos a função applyMiddleware ao createStore.
const store = createStore(reducer, initialState, applyMiddleware(...middleware));
Resumindo, os parametristoreeacton representam respectivamente a corrente de armazenamento e a ação da qual estamos.
efetuado o dispatching. O parâmetro nxtra representa o middleware seguinte na pipeline antes de chegar
alreducer. Na prática, dentro de um middleware podemos aproveitar o store e o action corrente para efetuar
elaborações específicas e passar a bola para o eventual middleware seguinte.
Vejamos um caso concreto de como pode ser implementado um middleware para escrever na console a ação
intercetata e il nuovo stato dell’applicazione:
const logger = loja => próximo => ação => {
[Link]('Ação corrente: ', ação)
let resultado = próximo(ação)
[Link]('Próximo estado: ', [Link]())
retornar resultado
}
In questo caso specifico atendiamo l’esecuzione di eventualimiddlewaresuccessivi prima di scrivere sulla console il
novo estado. Se não fizermos assim, obteremos o estado atual, em vez do seguinte.
Uma vez definido o middleware, tornamo-lo disponível para o Redux com
importar { criarStore, aplicarMiddleware } de 'redux'
deixe a loja = criarLoja(rootReducer, estadoInicial, aplicarMiddleware(logger));
Isso fará com que cada transição de estado seja rastreada no console do navegador:
No caso de tivermos mais middleware para executar antes do reducer, podemos passá-los como parâmetros da
função aplicarMiddleware():
let middleware= aplicarMiddleware(middl1, middl2, middl3);
A ordem de execução dos middleware seguirá a ordem em que as funções são passadas como parâmetro.
adapplyMiddleware().
CHAMADAS ASSÍNCRONAS COM REACT REDUX
Vamos agora ver como fazer chamadas assíncronas a um servidor com React Redux.
Podemos simular um servidor local com json-server, disponível para download no Npm, com os dados em json para servir. Uma vez
instalado, é necessário criar o arquivo json para servir ([Link]) lançar o servidor com:
json-server --watch [Link] --port3005--nc
Agora precisamos conectar nosso aplicativo para ler os dados deste servidor.
Até agora, vimos ações síncronas onde o objeto payload com os dados ia para o armazenamento, mas neste caso os dados
eles estarão no servidor e, portanto, é necessário fazer uma chamada assíncrona ao servidor para obter os dados.
Para gerenciar chamadas assíncronas, o React utiliza middlewares, para facilitar o trabalho existem diferentes pacotes, incluindo
redux-promise-middleware. Isso permite gerenciar criadores de ações assíncronas, com a diferença de que, neste
caso, o payload recebe uma promise:
const asyncAction = () => ({
type: ‘PROMISE’,
payload: new Promise(…)
})
Dada uma ação com um payload assíncrono, o middleware transforma a ação em uma ação pendente ou uma ação
cumprido/rejeitado, que representa os estados da ação assíncrona.
Após descarregar o pacote, no index é necessário importá-lo e passá-lo para o store:
importar promessa de 'redux-promise-middleware'
const store = createStore(rootReducer, initialState,applyMiddleware(promise));
Para dialogar com o servidor, usamos o fetch(), ou outros pacotes, que permitem uma gestão das chamadas.
asincrona baseada em promessas
REACT HOOKS
Sono statintrodotcon React 16.8 e in pratca sono funzioni che consentono di inserire uno stato hai componentdi
tpo functon, mais simples do que aqueles ditpo classe.
useState()
Para adicionar um estado a um componente do tipo função, usa-se useState que deve ser importado de
React. useState é uma função que é definida com:
const[variavel, setVariavel] = useState(valorInicial);
ou seja,essa retorna um par de valores: o valor do estado atual e uma função que permite
atualizá-lo(dispatch).
É semelhante a [Link] de uma classe.
O único parâmetro do useState é o seu estado inicial.
useEffect()
Dice a React che il componente deve fare qualcosa dopo il rendering. React ricorderà la funzione passata e la
Ele ligará mais tarde, após ter executado as atualizações DOM, a cada modificação.
Desempenha as mesmas funções componentDidMount, componentDidUpdate e componentWillUnmount.