Tutorial Reagir Parte 21: Segunda lição e workshop de renderização condicional

Hoje, na tradução da próxima parte do curso de treinamento do React, chamamos a atenção para a segunda lição sobre renderização condicional e um workshop sobre esse tópico.



→ Parte 1: visão geral do curso, razões para a popularidade do React, ReactDOM e JSX
→ Parte 2: componentes funcionais
→ Parte 3: arquivos de componentes, estrutura do projeto
→ Parte 4: componentes pai e filho
→ Parte 5: início do trabalho em um aplicativo TODO, noções básicas de estilo
→ Parte 6: sobre alguns recursos do curso, JSX e JavaScript
→ Parte 7: estilos embutidos
→ Parte 8: trabalho contínuo na aplicação TODO, familiaridade com as propriedades dos componentes
→ Parte 9: propriedades do componente
→ Parte 10: Workshop sobre como trabalhar com propriedades e estilo de componentes
→ Parte 11: geração dinâmica de marcação e método de matrizes de mapas
→ Parte 12: workshop, terceira etapa do trabalho em uma aplicação TODO
→ Parte 13: componentes baseados em classe
→ Parte 14: workshop sobre componentes baseados em classe, status dos componentes
→ Parte 15: oficinas de saúde componentes
→ Parte 16: a quarta etapa do trabalho em um aplicativo TODO, manipulação de eventos
→ Parte 17: quinta etapa do trabalho em um aplicativo TODO, modificando o estado dos componentes
→ Parte 18: a sexta etapa do trabalho em um aplicativo TODO
→ Parte 19: métodos do ciclo de vida dos componentes
Parte 20: a primeira lição sobre renderização condicional
→ Parte 21: segunda lição e workshop sobre renderização condicional
→ Parte 22: sétima etapa do trabalho em um aplicativo TODO, baixando dados de fontes externas
→ Parte 23: primeira lição sobre como trabalhar com formulários
→ Parte 24: Segunda lição sobre formulários
→ Parte 25: Workshop sobre como trabalhar com formulários
→ Parte 26: arquitetura do aplicativo, padrão Container / Component
→ Parte 27: projeto do curso

Lição 37. Renderização Condicional, Parte 2

→ Original

No tutorial de hoje sobre renderização condicional, falaremos sobre o uso do operador lógico && (And). Experimentaremos um projeto padrão criado por create- App.js -app, no arquivo App.js , no qual está localizado o seguinte código:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           unreadMessages: [               "Call your mom!",               "New spam email available. All links are definitely safe to click."           ]       }   }   render() {       return (           <div>              <h2>You have {this.state.unreadMessages.length} unread messages!</h2>           </div>       )   } } export default App 

Agora, o aplicativo aparece no navegador, como mostrado abaixo.


Página do aplicativo no navegador

Você já deve ter usado o operador && em construções como true && false (que fornece false ). Para que a expressão true seja retornada como resultado do cálculo de uma expressão, ela deve se parecer com true && true . Ao processar essas expressões, o JavaScript determina se o lado esquerdo é verdadeiro e, nesse caso, simplesmente retorna o que está no lado direito. Se uma expressão do formulário false && false processada, false será retornado imediatamente, sem verificar o lado direito da expressão. Como resultado, o operador && pode ser usado na renderização condicional. Com ele, você pode retornar algo que será exibido na tela ou não retornar nada.

Vamos analisar o código do aplicativo de treinamento.

O estado do componente App armazena uma matriz de unreadMessages caracteres não unreadMessages . Cada linha nesta matriz representa uma mensagem não lida. A página exibe o número de mensagens não lidas, determinadas com base no comprimento da matriz. Se essa matriz estiver vazia, ou seja, não haverá um único elemento nela, o aplicativo exibirá o que é mostrado abaixo na página.


O aplicativo informa que não há mensagens não lidas

Para atingir esse efeito, basta trazer a matriz para este formato: unreadMessages: [] .

Se não houver mensagens não lidas, é completamente possível não exibir nenhuma mensagem. Se usarmos o operador ternário sobre o qual falamos da última vez para implementar esse comportamento do aplicativo, o método render() do componente App poderá ser reescrito da seguinte maneira:

 render() {   return (       <div>           {               this.state.unreadMessages.length > 0 ?              <h2>You have {this.state.unreadMessages.length} unread messages!</h2> :               null           }       </div>   ) } 

Agora, se a matriz unreadMessages vazia, nada será exibido na página. Mas o código apresentado aqui pode ser simplificado usando o operador && . Aqui está como ficaria:

 render() {   return (       <div>           {               this.state.unreadMessages.length > 0 &&              <h2>You have {this.state.unreadMessages.length} unread messages!</h2>           }       </div>   ) } 

Se houver algo na matriz, o lado direito da expressão será exibido na página. Se a matriz estiver vazia, nada será exibido na página.

Isso não quer dizer que o uso do operador && na renderização condicional seja absolutamente necessário, pois o mesmo efeito pode ser alcançado usando um operador ternário que retorna null se a condição testada for falsa. Mas a abordagem apresentada aqui simplifica o código e, além disso, é usado com bastante frequência, para que você possa encontrá-lo enquanto lê os programas de outras pessoas.

Lição 38. Oficina. Renderização condicional

→ Original

▍Job

Aqui está o código do componente funcional do App , armazenado no arquivo App.js de um projeto padrão criado usando create- App.js -app.

 import React from "react" function App() {   return (       <div>           Code goes here       </div>   ) } export default App 

Você precisa fazer o seguinte:

1. Converta o código do componente para equipá-lo com state.
2. Certifique-se de que o estado do componente contenha informações sobre se o usuário "efetuou login" ou não (neste exercício, "efetuando login" no sistema e "efetuando logout" significa apenas alterar o valor correspondente armazenado no estado).
3. Adicione à página que o componente forma um botão que permite ao usuário efetuar login e logout.
   
   
   1. Esta é uma tarefa adicional. Certifique-se de que, se o usuário não estiver logado, o botão exibirá LOG IN e, se estiver logado, LOG OUT .
      
4. Na página formada pelo componente, Logged in se o usuário estiver conectado e Logged out se não estiver Logged out .
   

Se agora você sente que é difícil começar a resolver esses problemas, dê uma olhada nas dicas e comece a trabalhar.

▍Dicas

Para concluir esta tarefa, você precisa lembrar muito do que falamos nas aulas anteriores. Para começar, um componente que pode ter estado deve ser um componente baseado em uma classe. Este componente deve ter um construtor. No estado do componente, você pode armazenar uma propriedade lógica, por exemplo, ela pode ser chamada isLoggedIn , cujo valor, true ou false , indica se o usuário está logado ou não. Para que o botão que precisa ser adicionado à página gerada pelo aplicativo possa executar suas funções, ele precisará de um onClick eventos onClick . Para exibir textos diferentes, com base na alteração do valor do estado, será necessário recorrer à tecnologia de renderização condicional.

▍Solução

Transformamos o componente funcional disponível no código no componente com base em uma classe. Precisamos disso por várias razões. Primeiro, precisamos trabalhar com o estado do aplicativo. Em segundo lugar, precisamos de um manipulador de eventos chamado quando um botão é clicado. Em princípio, você pode escrever uma função independente e usá-la para manipular eventos de botão, mas eu prefiro descrever manipuladores nas classes de componentes.

A seguir, como será o código de um componente funcional convertido em um componente baseado em classe. Aqui, no construtor do componente, descrevemos seu estado inicial, que contém a propriedade isLoggedIn definida como false .

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }   }   render() {          return (           <div>               Code goes here           </div>       )   } } export default App 

O código acima é uma solução para a primeira e a segunda parte da tarefa. Agora, vamos trabalhar para adicionar um botão à página exibida pelo componente. Até o momento, esse botão exibirá a mesma inscrição, independentemente do que estiver armazenado no estado do aplicativo. Nós o equiparemos com um manipulador de eventos, colocando nele, para verificar a operacionalidade do nosso código, um simples comando para enviar uma mensagem para o console. Além disso, nós, no construtor do componente, vincularemos esse manipulador a this , o que é útil quando, no código desse manipulador, nos referimos a mecanismos projetados para trabalhar com o estado do componente. Agora o código se parece abaixo.

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }       this.handleClick = this.handleClick.bind(this)   }     handleClick() {       console.log("I'm working!")   }     render() {          return (           <div>               <button onClick={this.handleClick}>LOG IN</button>           </div>       )   } } export default App 

Quando você clica no botão LOG IN , I'm working! .

Agora, lembre-se de que, quando um botão é isLoggedIn , a propriedade isLoggedIn armazenada no estado isLoggedIn de true para false e vice-versa. Para fazer isso, no manipulador de cliques do botão, você precisará chamar a função this.setState() , que pode ser usada de duas maneiras. Ou seja, pode ser fornecida, na forma de um objeto, uma nova idéia do que deve estar contido no estado. A segunda variante de seu uso fornece a transferência de uma função que pega o estado anterior do componente e forma um novo, retornando novamente o objeto. Nós faremos exatamente isso. Foi o que obtivemos nesta fase do trabalho.

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }       this.handleClick = this.handleClick.bind(this)   }     handleClick() {       this.setState(prevState => {           return {               isLoggedIn: !prevState.isLoggedIn           }       })   }     render() {          return (           <div>               <button onClick={this.handleClick}>LOG IN</button>           </div>       )   } } export default App 

Aqui poderíamos usar a construção if-else, mas apenas convertemos true para false e false para true usando o operador lógico ! (NÃO).

Até o momento, não possuímos um mecanismo que, com base no que é armazenado no estado, nos permita influenciar a aparência do aplicativo. Portanto, agora resolveremos a tarefa adicional da tarefa número 3. Ou seja, mudaremos o rótulo do botão, dependendo do estado do componente. Para conseguir isso, você pode declarar uma variável no método render() cujo valor, LOG IN ou LOG OUT , depende do que está armazenado no estado. Esse valor pode ser usado como texto do botão. Aqui está como fica.

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }       this.handleClick = this.handleClick.bind(this)   }     handleClick() {       this.setState(prevState => {           return {               isLoggedIn: !prevState.isLoggedIn           }       })   }     render() {         let buttonText = this.state.isLoggedIn ? "LOG OUT" : "LOG IN"       return (           <div>               <button onClick={this.handleClick}>{buttonText}</button>           </div>       )   } } export default App 

Agora vamos pegar a quarta parte da tarefa. Exibiremos o texto na página, dependendo de o usuário estar conectado ou não. Por uma questão de fato, considerando tudo o que já está presente no código do componente, a solução desse problema é muito simples. Abaixo está o código finalizado para o arquivo App.js

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }       this.handleClick = this.handleClick.bind(this)   }     handleClick() {       this.setState(prevState => {           return {               isLoggedIn: !prevState.isLoggedIn           }       })   }     render() {         let buttonText = this.state.isLoggedIn ? "LOG OUT" : "LOG IN"       let displayText = this.state.isLoggedIn ? "Logged in" : "Logged out"       return (           <div>               <button onClick={this.handleClick}>{buttonText}</button>               <h1>{displayText}</h1>           </div>       )   } } export default App 

É assim que o aplicativo se parece no navegador.


Página do aplicativo no navegador

Clicar no botão LOG IN mostrado na figura anterior altera o estado do aplicativo, após o qual LOG OUT é exibido no botão, e o texto é exibido na página informando ao usuário que está logado.

Sumário

Hoje continuamos falando sobre renderização condicional, examinamos o uso do operador && e concluímos uma tarefa prática envolvendo muitos dos mecanismos que estudamos. Da próxima vez, você continuará trabalhando no aplicativo Todo e em um novo tópico.

Caros leitores! Você já lidou com a tarefa prática de hoje?