🦈 🚆 🧛🏾 Tutorial Reagir Parte 10: Workshop sobre como trabalhar com propriedades e estilo de componentes 💊 ♍️ 🦑

Hoje, na décima parte da tradução do curso de treinamento React, sugerimos que você conclua uma tarefa prática de trabalhar com as propriedades dos componentes e estilizá-las.

→ 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 20. Oficina. Propriedades do componente, Estilo

→ Original

▍Job

Crie um novo projeto de aplicativo React.
Exiba o componente App na página do aplicativo, cujo código deve estar em um arquivo separado.
O componente App deve gerar 5 componentes de Joke que contenham piadas. Traga esses componentes da maneira que desejar.
Cada componente da Joke deve aceitar e processar a propriedade da question , para a parte principal da piada, e a propriedade punchLine , para sua frase-chave.

Task Tarefa adicional

Algumas piadas consistem inteiramente em uma frase-chave. Por exemplo: "É difícil explicar trocadilhos para cleptomaníacos porque eles sempre levam as coisas literalmente". Considere como o componente Joke pode exibir apenas a propriedade punchLine para ele, se a propriedade da question não estiver configurada. Experimente modelar seus componentes.

▍Solução

Tarefa principal

O arquivo index.js parecerá bastante familiar:

 import React from "react" import ReactDOM from "react-dom" import App from "./App" ReactDOM.render(<App />,   document.getElementById("root"))

Aqui está o código para o arquivo App.js :

 import React from "react" import Joke from "./Joke" function App() {   return (       <div>           <Joke               question="What's the best thing about Switzerland?"               punchLine="I don't know, but the flag is a big plus!"           />                     <Joke               question="Did you hear about the mathematician who's afraid of negative numbers?"               punchLine="He'll stop at nothing to avoid them!"           />                     <Joke               question="Hear about the new restaurant called Karma?"               punchLine="There's no menu: You get what you deserve."           />                     <Joke               question="Did you hear about the actor who fell through the floorboards?"               punchLine="He was just going through a stage."           />                     <Joke               question="Did you hear about the claustrophobic astronaut?"               punchLine="He just needed a little space."           />                 </div>   ) } export default App

Observe que, como o arquivo do componente Joke está localizado na mesma pasta que o arquivo do componente App , nós o importamos com o import Joke from "./Joke" . Como retornamos vários elementos do App , precisamos agrupar toda a saída em uma determinada tag, por exemplo, na <div> . Para as instâncias do componente, passamos as punchLine question e punchLine .

Aqui está o código para o arquivo Joke.js :

 import React from "react" function Joke(props) {   return (       <div>           <h3>Question: {props.question}</h3>           <h3>Answer: {props.punchLine}</h3>           <hr/>       </div>   ) } export default Joke

Aqui, ao declarar a função Joke , especificamos o parâmetro props . Lembre-se de que esse nome é usado de acordo com a tradição estabelecida. De fato, pode ser qualquer coisa, mas é melhor chamá-lo de props .

Retornamos vários elementos do componente - portanto, eles estão incluídos na <div> . Usando as props.punchLine e props.punchLine as propriedades passadas para a instância do componente quando ela foi criada. Essas propriedades se tornam propriedades do objeto props . Eles são colocados entre chaves devido ao fato de que o código JavaScript usado na marcação JSX deve ser colocado entre chaves. Caso contrário, o sistema assumirá os nomes das variáveis como texto sem formatação. Após um par de elementos <h3> , em um dos quais o texto principal da piada é exibido e na outra - sua frase-chave, existe o elemento <hr/> que descreve a linha horizontal. Essas linhas serão exibidas após cada piada, separando-as.

É assim que o projeto do aplicativo se parece no VSCode.

Aplicação no VSCode

Aqui está a página do aplicativo.

Página do aplicativo no navegador

Tarefa adicional

Lembre-se de que o objetivo principal da tarefa adicional é organizar a conclusão correta das piadas, que consistem inteiramente em uma frase-chave. Isso é expresso no fato de que, ao criar uma instância do componente Joke , apenas a propriedade punchLine é punchLine e a propriedade question não é transmitida. A criação de uma instância desse componente se parece com isso:

 <Joke   punchLine="It's hard to explain puns to kleptomaniacs because they always take things literally." />

Se você colocar esse código na parte superior do código retornado pelo componente App , a página do aplicativo ficará assim.

Página de aplicação formada incorretamente

Obviamente, o problema aqui é que, embora a propriedade da question não seja passada para o componente, ela exibe texto que precede a parte principal de cada piada, após o que nada é produzido.

Olhando para o futuro, observamos que em partes futuras do curso falaremos sobre renderização condicional. Usando essa abordagem de renderização, você pode efetivamente resolver problemas como o nosso. Enquanto isso, tentaremos usar o estilo da página. Nomeadamente, faremos com que, se a propriedade da question não for passada para o componente, o fragmento correspondente da marcação JSX retornada por ele não será exibido na página. Aqui está o código completo para o componente Joke , que implementa uma das abordagens possíveis para resolver nosso problema usando CSS:

 import React from "react" function Joke(props) {   return (       <div>           <h3 style={{display: props.question ? "block" : "none"}}>Question: {props.question}</h3>           <h3>Answer: {props.punchLine}</h3>           <hr/>       </div>   ) } export default Joke

Atribuímos ao primeiro elemento <h3> estilo, que é determinado durante a instanciação do componente com base na presença da propriedade props.question no objeto. Se esta propriedade estiver no objeto, o elemento assumirá a display: block estilo de display: block e será exibido na página; caso contrário, display: none e não será exibido na página. O uso de tal construção levará ao mesmo efeito:

 <h3 style={{display: !props.question && "none"}}>Question: {props.question}</h3>

Aqui, o estilo display: none é atribuído ao elemento se o objeto props não tiver a propriedade question , caso contrário, nada será atribuído à propriedade display .

Agora, a página do aplicativo no navegador será semelhante à mostrada abaixo.

Manipulação adequada de componentes de uma situação em que a propriedade da pergunta não é passada para ela

Você pode perceber que todos os elementos formados pelo componente Joke têm a mesma aparência. Vamos pensar em como selecionar aqueles que passam apenas pela propriedade punchLine . Resolveremos esse problema usando os estilos internos e a abordagem que examinamos acima. Aqui está o código atualizado para o componente Joke :

 import React from "react" function Joke(props) {   return (       <div>           <h3 style={{display: !props.question && "none"}}>Question: {props.question}</h3>           <h3 style={{color: !props.question && "#888888"}}>Answer: {props.punchLine}</h3>           <hr/>       </div>   ) } export default Joke

E aqui está o que agora aparece na página do aplicativo.

Como estilizar um item diferente dos outros

Agora que trabalhamos no componente Joke , ele se tornou mais versátil e mais adequado para reutilização.

Sumário

Nesta lição prática, estávamos desenvolvendo habilidades na transferência de propriedades para componentes. Se você analisar o código no exemplo fornecido aqui, notará que, para gerar vários blocos de marcação semelhantes, é necessário escrever constantemente fragmentos repetidos do código JSX. Na próxima lição, falaremos sobre como automatizar a formação de tais páginas usando ferramentas JavaScript padrão, enquanto separamos a marcação e os dados.

Caros leitores! Se a sua solução para os problemas deste workshop for diferente da proposta, informe-nos.

Tutorial Reagir Parte 10: Workshop sobre como trabalhar com propriedades e estilo de componentes