As aulas de hoje no curso de treinamento React, que estamos publicando, são dedicadas a continuar trabalhando nos aplicativos e nas propriedades do componente TODO.
→
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 componentesParte 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 cursoLição 16. Oficina. Aplicação TODO. Estágio número 2
→
Original▍Job
- Após o workshop anterior , você criou um aplicativo React, cujo componente
App exibe um conjunto de pares de elementos - sinalizadores (elementos <input type="checkbox" /> ) e suas descrições (elementos <p> </p> ). Projete os elementos deste conjunto como um componente separado - <TodoItem /> e use-o para criar uma lista no componente App . Ao mesmo tempo, não preste atenção ao fato de que todos os elementos desta lista terão a mesma aparência (mais tarde falaremos sobre como preenchê-los com dados diferentes). - Estilize a página como desejar, usando arquivos CSS, estilos embutidos ou uma combinação desses métodos de estilo para aplicativos React.
▍Solução
Isso pressupõe que você continue trabalhando em um aplicativo com base em um projeto padrão criado usando o
create-react-app . É assim que era o código do componente do
App antes do trabalho.
import React from "react" function App() { return ( <div> <input type="checkbox" /> <p>Placeholder text here</p> <input type="checkbox" /> <p>Placeholder text here</p> <input type="checkbox" /> <p>Placeholder text here</p> <input type="checkbox" /> <p>Placeholder text here</p> </div> ) } export default App
Vamos criar, na mesma pasta em que esse arquivo está localizado, o arquivo
TodoItem.js , no qual o código do componente
TodoItem será armazenado. Agora importe esse arquivo para o arquivo
App.js seguinte comando:
import TodoItem from "./TodoItem"
Você pode fazer isso mais tarde, quando chegar a hora de usar o
TodoItem componente
TodoItem (ainda não gravado). Nós cuidaremos desse código agora. Aqui está o que será:
import React from "react" function TodoItem() { return ( <div> <input type="checkbox" /> <p>Placeholder text here</p> </div> ) } export default TodoItem
Preste atenção em duas coisas. Primeiramente, esse componente retorna dois elementos - portanto, eles são agrupados em um elemento
<div> . Em segundo lugar, o que ele retorna é uma cópia de um dos pares de elementos de verificação / descrição do arquivo
App.jsAgora vamos novamente ao arquivo
App.js e, em vez dos pares de verificação / descrição, usamos instâncias do componente
TodoItem na marcação retornada por ele:
import React from "react" import TodoItem from "./TodoItem" function App() { return ( <div> <TodoItem /> <TodoItem /> <TodoItem /> <TodoItem /> </div> ) } export default App
Como resultado, a página que os formulários de inscrição terão a aparência mostrada abaixo.
Aparência do aplicativo no navegadorNa verdade, sua aparência, em comparação com a versão anterior, não mudou, mas o fato de um componente agora ser usado para formar pares de elementos abre grandes oportunidades para nós, que usaremos posteriormente.
Agora, concluiremos a segunda tarefa, estilizando o aplicativo usando classes CSS. Para fazer isso, trazemos o código do componente
App para o seguinte formato:
import React from "react" import TodoItem from "./TodoItem" function App() { return ( <div className="todo-list"> <TodoItem /> <TodoItem /> <TodoItem /> <TodoItem /> </div> ) } export default App
Aqui atribuímos o nome da classe ao elemento
<div> . Da mesma forma,
TodoItem trabalhar com o
TodoItem componente
TodoItem :
import React from "react" function TodoItem(){ return ( <div className="todo-item"> <input type="checkbox" /> <p>Placeholder text here</p> </div> ) } export default TodoItem
Agora, incluiremos o arquivo CSS
index.css que já está no projeto, pois foi criado usando
create-react-app no arquivo
index.js :
import React from "react" import ReactDOM from "react-dom" import "./index.css" import App from "./App" ReactDOM.render( <App />, document.getElementById("root") )
Adicione a seguinte descrição de estilo ao
index.css :
body { background-color: whitesmoke; } .todo-list { background-color: white; margin: auto; width: 50%; display: flex; flex-direction: column; align-items: center; border: 1px solid #efefef; box-shadow: 0 1px 1px rgba(0,0,0,0.15), 0 10px 0 -5px #eee, 0 10px 1px -4px rgba(0,0,0,0.15), 0 20px 0 -10px #eee, 0 20px 1px -9px rgba(0,0,0,0.15); padding: 30px; } .todo-item { display: flex; justify-content: flex-start; align-items: center; padding: 30px 20px 0; width: 70%; border-bottom: 1px solid #cecece; font-family: Roboto, sans-serif; font-weight: 100; font-size: 15px; color: #333333; } input[type=checkbox] { margin-right: 10px; font-size: 30px; } input[type=checkbox]:focus { outline: 0; }
É assim que a página do aplicativo será exibida no navegador.
Aparência do aplicativo no navegadorVocê pode analisar e editar esses estilos você mesmo.
Se falarmos sobre as peculiaridades do código usado no estilo, observe que a palavra-chave
className é usada para atribuir classes aos elementos e que o React suporta estilos embutidos. É assim que o projeto de nossa aplicação no VSCode fica nesta fase.
Projeto de aplicação no VSCodeSe agora experimentamos o que temos, as caixas de seleção respondem às interações do usuário.
Os sinalizadores respondem às interações do usuário.Mas, ao mesmo tempo, o código do aplicativo não sabe nada sobre as alterações que ocorrem com esses sinalizadores. Se o código estiver ciente do que está acontecendo na interface do aplicativo, isso nos permitirá organizar sua reação a vários eventos. Por exemplo, um item da lista de tarefas, em que uma caixa de seleção está marcada, indicando que a tarefa correspondente foi concluída, pode ser alterada de alguma forma. Falaremos sobre como fazer isso na próxima lição.
Lição 17. Propriedades, Parte 1. Atributos de Elementos HTML
→
OriginalVamos falar sobre o conceito de propriedades no React. Vamos começar com um código HTML de amostra para uma página:
<html> <head></head> <body> <a>This is a link</a> <input /> <img /> </body> </html>
Como você pode ver, não há nada relacionado ao React. Antes de nós está a marcação HTML usual. Observe os três elementos presentes no corpo da página descritos por esta marcação:
<a> ,
<input /> e
<img /> e pense no que há de errado com eles.
O problema aqui é que todos esses elementos não cumprem suas funções inerentes. O link descrito pela tag
<a> não leva a lugar algum. É necessário atribuir a essa tag um atributo (propriedade)
href , contendo um determinado endereço para o qual você será redirecionado quando clicar no link. O mesmo problema é típico para a
<img /> do nosso exemplo. Não está atribuído o atributo
src , que especifica a imagem, local ou acessível pelo URL que esse elemento exibirá. Como resultado, verifica-se que, para garantir a operação correta dos elementos
<a> e
<img> , é necessário definir suas propriedades
href e
src , respectivamente. Se falamos sobre o elemento
<input> , então, sem definir seus atributos, ele exibirá um campo de entrada na página, mas, neste formulário, geralmente não é usado, definindo suas propriedades como
placeholder ,
name e
type . A última propriedade, por exemplo, permite alterar radicalmente a aparência e o comportamento do elemento
<input> , transformando-o de um campo de entrada de texto em um sinalizador, em um botão de opção ou em um botão para enviar um formulário. Note-se que os termos “atributo” e “propriedade” usamos aqui de forma intercambiável.
Editando o código acima, podemos trazê-lo para o seguinte formulário:
<html> <head></head> <body> <a href="https://google.com">This is a link</a> <input placeholder="First Name" name="" type=""/> <img align="center" src=""/> </body> </html>
Ainda não é muito normal neste formulário, mas aqui pelo menos definimos valores para alguns atributos de elementos HTML e locais designados onde você pode inserir valores para mais alguns atributos.
De fato, se o conceito de atributos dos elementos HTML descrito acima for claro para você, você poderá descobrir facilmente o conceito de propriedades dos componentes do React. Ou seja, estamos falando do fato de que, nos aplicativos React, podemos usar componentes de nosso próprio desenvolvimento, e não apenas tags HTML padrão. Ao trabalhar com componentes, podemos atribuir a eles propriedades que, quando processadas em componentes, podem mudar seu comportamento. Por exemplo, essas propriedades permitem personalizar a aparência dos componentes.
Lição 18. Propriedades, Parte 2. Componentes Reutilizáveis
→
OriginalAntes de começarmos a conversar sobre o uso de propriedades no React, vejamos outro conceito conceitual. Dê uma olhada na página inicial do YouTube.
Página inicial do YouTubeEstou certo de que o React não usa esta página, já que o Google está envolvido no desenvolvimento da estrutura Angular, mas os princípios que consideraremos neste exemplo são universais.
Pense em como essa página pode ser criada usando os recursos do React. Talvez a primeira coisa em que você preste atenção é que esta página pode ser dividida em fragmentos, representados por componentes independentes. Por exemplo, é fácil perceber que os elementos que exibem informações sobre os clipes de vídeo destacados na figura abaixo são muito semelhantes entre si.
Página inicial do YouTube, elementos semelhantes entre siSe você observar atentamente esses elementos, verifica-se que há uma imagem na parte superior de cada um deles e que todas essas imagens têm o mesmo tamanho. Cada um desses elementos tem um cabeçalho em negrito e imediatamente abaixo da imagem. Cada elemento contém informações sobre o número de visualizações do vídeo correspondente, a data de sua publicação. No canto inferior direito de cada imagem presente no elemento, há informações sobre a duração do videoclipe correspondente.
É compreensível que a pessoa que criou esta página não tenha copiado, colado ou modificado o código para representar cada um dos elementos exibidos nela. Se uma página desse tipo foi criada usando as ferramentas React, seria possível imaginar que as placas de videoclipe são instâncias de algum componente, por exemplo,
<VideoTile /> . Além disso, esse componente inclui vários outros componentes, que são uma imagem, um título, informações sobre a duração do clipe e outros elementos da placa de videoclipe.
O precedente nos leva à idéia de que, para formar uma página, um único componente foi desenvolvido, que é uma placa de videoclipe. Ao mesmo tempo, muitas instâncias desse componente foram exibidas na página, cada uma delas exibindo dados exclusivos. Ou seja, ao desenvolver esse componente, é necessário prever a possibilidade de alterar determinadas propriedades, como a URL da imagem, afetando sua aparência e comportamento. De fato, é a isso que nossa próxima lição é dedicada. Mas antes de chegarmos a isso, gostaria que você se sentisse à vontade com a idéia de usar componentes no React.
Pense na lição em que discutimos os componentes pai e filho e esses componentes podem formar estruturas com grande profundidade de aninhamento. Por exemplo, no nosso caso, na página, você pode selecionar grupos horizontais de placas de videoclipe, provavelmente localizadas dessa maneira com a ajuda de um determinado componente de serviço para exibir listas de elementos. Esses elementos são placas de videoclipe, que, por sua vez, produzem um certo número de outros elementos que representam informações sobre um determinado clipe.
Página inicial do YouTube, componentes pai e filhoAlém disso, no lado esquerdo da página, você pode ver um grupo vertical de elementos semelhantes entre si. Muito provavelmente, são instâncias do mesmo componente. Além disso, cada um deles tem sua própria imagem e texto.
O fato de as estruturas modernas para o desenvolvimento de interfaces da Web, como React, Angular ou Vue, permitirem criar um componente uma vez e reutilizá-lo definindo suas propriedades, é uma das razões para a popularidade dessas estruturas. Isso facilita muito e acelera o desenvolvimento.
Sumário
Nesta lição, continuamos a trabalhar em um aplicativo TODO e abordamos tópicos sobre os atributos dos elementos HTML e a idéia de reutilizar componentes, o que nos leva a trabalhar com as propriedades dos componentes React. É isso que faremos da próxima vez.
Caros leitores! Você entende o conceito de propriedades do componente?
