Pular para o conteúdo principal

Postagens

Mostrando postagens com o rótulo react

React - Elevando o state (state lift)

Como visto anteriormente, o fluxo de informações no React é unidirecional, partindo sempre do componente pai para os filhos, logo um componente pai desconhece o que acontece com o estado presente nos seus componentes filhos. Então como é que nós fazemos quando precisamos que com que um componente filho produza ou modifique um valor para que esse possa ser utilizado pelo componente pai? Bom a resposta para essa pergunta esta no titulo da postagem, resolvemos essa questão com a elevação do "state". A elevação do "state" em tese é algo relativamente simples, basta mudar o estado do filho para o pai, logo o filho não mais trabalhará com seu estado, ele receberá o estado do pai por meio das "props" e quando for necessário alterar o estado o componente filho deve chamar um método do pai, que também estará presente em "props". Exemplo No exemplo abaixo criaremos um componente "filho" que oferece uma lista de opções de acordo com

React - Listas e chaves

No React, utilizamos listas e chaves para renderizar vários componentes de uma vez, onde as listas nos fornecem os dados necessários para criar os componentes e as chaves identificarão de forma unica cada um deles. Quando falamos em listas estamos nos referindo a qualquer "array" que será percorrido por meio de uma estrutura de repetição, um "map" por exemplo. Já quando falamos em uma "chave" nos referimos a uma "string" que irá identificar de forma unica o componente visual sendo criado. Essa "chave" ajuda o React a identificar esses elementos, permitindo controlar e identificar alterações. As chaves são identificadas pela propriedade "key", sendo essa propriedade reservada exclusivamente ao React, se for necessário recuperar a mesma deve-se criar uma nova propriedade no elemento. Outro ponto importante sobre chaves é que devemos sempre dar preferencia para valores que representem de forma unica os itens de nosso

React - Forms

No React podemos trabalhar com formulários de maneira padrão, onde a submissão produz uma navegação para outra página, e da maneira "React", onde teremos controle dos componentes para controle dos dados. Componentes controlados Por padrão, os componentes html "input", "textarea" e "select" mantém o próprio estado de acordo com as entradas que o usuário realiza, como vimos, com o React fazemos essa atualização apenas por meio do "setState", mas para trabalhar com formulários trabalharemos com uma mescla dessas duas ideias, fazendo com que o estado controlado pelo React seja nossa verdadeira fonte de dados, nossa fonte da verdade. Para isso, basicamente precisaremos fazer com que o componente "input" tenha como valor uma das propriedades do estado e sempre que o valor do "input" for alterado atualizaremos esse estado: import   React   from   'react' ; class   FormularioNome   extends   React

React - Ciclo de vida

Os componentes no React, assim como recursos de diversas outras tecnologias, possui um ciclo de vida bem definido, ou seja, sabemos exatamente as etapas executadas da criação a destruição de um componente. Os métodos do ciclo de vida de componentes são invocados em diferentes momentos, e eles podem ser organizados em três grupos: "mounting" onde são montados na tela, "updating" onde são atualizados e "unmounting" onde são desmontados e removidos da tela. Mounting Nesse momento temos a inicialização, a construção dos componentes (pré/pós) e a renderização. constructor Chamado antes que o componente seja montado: getDerivedStateFromProps Executado antes da renderização (render): render Único método puro, devendo sempre se manter puro, ou seja, sem modificar o estado do componente: componentDidMount Executado após a montagem do componente: componentWillMount (legado, não deve ser usado)