Tutorial React, Parte 12: Workshop, Aplicação TODO da Fase 3

Na parte de hoje da tradução do curso React, sugerimos que você conclua a tarefa prática de criar conjuntos de componentes usando JavaScript e continue trabalhando no aplicativo 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 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 22. Oficina. Formação dinâmica de conjuntos de componentes

→ Original

▍Job

Com base no projeto de aplicativo React padrão gerado pelo create-react-app vschoolProducts.js create-react-app e usando o código do arquivo de dados vschoolProducts.js , crie um aplicativo que exiba uma lista de componentes do Product na página, formada usando o método de matriz padrão .map() em Com base nos dados de vschoolProducts.js .

Lembre-se de criar instâncias do componente e passar a elas o atributo- key com um identificador exclusivo; caso contrário, o sistema emitirá um aviso.

No processo de solução do problema, você pode usar a seguinte preparação do arquivo App.js

 import React from "react" import productsData from "./vschoolProducts" function App() { return (   <div>         </div> ) } export default App 

Aqui está o vschoolProducts.js arquivo vschoolProducts.js :

 const products = [   {       id: "1",       name: "Pencil",       price: 1,       description: "Perfect for those who can't remember things! 5/5 Highly recommend."   },   {       id: "2",       name: "Housing",       price: 0,       description: "Housing provided for out-of-state students or those who can't commute"   },   {       id: "3",       name: "Computer Rental",       price: 300,       description: "Don't have a computer? No problem!"   },   {       id: "4",       name: "Coffee",       price: 2,       description: "Wake up!"   },   {       id: "5",       name: "Snacks",       price: 0,       description: "Free snacks!"   },   {       id: "6",       name: "Rubber Duckies",       price: 3.50,       description: "To help you solve your hardest coding problems."   },   {       id: "7",       name: "Fidget Spinner",       price: 21.99,       description: "Because we like to pretend we're in high school."   },   {       id: "8",       name: "Sticker Set",       price: 14.99,       description: "To prove to other devs you know a lot."   } ] export default products 

▍Solução

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

 import React from "react" import Product from "./Product" import productsData from "./vschoolProducts" function App() {   const productComponents = productsData.map(item => <Product key={item.id} product={item}/>)     return (       <div>           {productComponents}       </div>   ) } export default App 

Observe que a propriedade id dos objetos do arquivo de dados é opcional. Essa propriedade foi útil para definir o atributo- key criado por meio do método .map() de instâncias do componente Product .

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

 import React from "react" function Product(props) {   return (       <div>           <h2><font color="#3AC1EF">{props.product.name}</font></h2>           <p>{props.product.price.toLocaleString("en-US", { style: "currency", currency: "USD" })} - {props.product.description}</p>       </div>   ) } export default Product 

Aqui, ao derivar uma propriedade contendo o preço do produto, que é visível no componente como props.product.price , usamos o método toLocaleString() , pelo qual formatamos a quantidade do produto.

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


Aplicação no VSCode

E aqui está a página do aplicativo no navegador.


Página do aplicativo no navegador

Preste atenção na forma em que o valor das mercadorias é apresentado.

Lição 23. Oficina. Aplicação TODO. Estágio número 3

→ Original

Aqui continuamos a trabalhar no aplicativo TODO, que foi tratado aqui e aqui . Em particular, aqui você será solicitado a aplicar conhecimentos sobre a formação dinâmica de listas de componentes para criar uma lista de tarefas exibida pelo aplicativo.

▍Job

Usando o todosData.js caso todosData.js , cujo conteúdo é fornecido abaixo, crie uma lista de componentes TodoItem e exiba essa lista no componente App . Observe que você precisará modificar o código do componente TodoItem para que ele possa exibir as propriedades passadas para ele.

Aqui está o conteúdo do arquivo todosData.js :

 const todosData = [   {       id: 1,       text: "Take out the trash",       completed: true   },   {       id: 2,       text: "Grocery shopping",       completed: false   },   {       id: 3,       text: "Clean gecko tank",       completed: false   },   {       id: 4,       text: "Mow lawn",       completed: true   },   {       id: 5,       text: "Catch up on Arrested Development",       completed: false   } ] export default todosData 

▍Solução

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

 import React from "react" import TodoItem from "./TodoItem" import todosData from "./todosData" function App() {   const todoItems = todosData.map(item => <TodoItem key={item.id} item={item}/>)     return (       <div className="todo-list">           {todoItems}       </div>   ) } export default App 

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

 import React from "react" function TodoItem(props) {   return (       <div className="todo-item">           <input type="checkbox" checked={props.item.completed}/>           <p>{props.item.text}</p>       </div>   ) } export default TodoItem 

Aqui está o projeto do aplicativo no VSCode.


Aplicação no VSCode

Deve-se notar que, após a conclusão do trabalho previsto nesta lição prática, nós, apesar de equiparmos o aplicativo com novos recursos, interrompemos sua funcionalidade. Em particular, estamos falando sobre o estado das bandeiras. Os sinalizadores para os quais a propriedade props.item.completed configurada como true foram usados ​​para definir o estado serão verificados, os sinalizadores para os quais a mesma propriedade configurada como false foi usada serão desmarcados. Mas se você clicar no sinalizador na página do aplicativo, nada acontecerá, pois configuramos incorretamente o elemento HTML correspondente. Você pode ver um aviso sobre isso no console.


Página do aplicativo no navegador e aviso no console

Mais tarde, falaremos sobre formulários e corrigiremos nosso aplicativo de treinamento enquanto continuamos trabalhando nele.

Sumário

Nesta lição, você teve a oportunidade de praticar a criação de arquivos de componentes, trabalhando com propriedades que são passadas para instâncias de componentes quando elas são criadas e usando o método padrão da matriz JavaScript .map() . Além disso, aqui continuamos a trabalhar em um aplicativo de treinamento. Da próxima vez, falaremos sobre componentes baseados em classe.

Caros leitores! Você já domina a técnica de usar o método de matriz JavaScript .map() para criar conjuntos de componentes?