Tutorial de React, Parte 12: Taller, Fase 3 Aplicación TODO

En la parte de hoy de la traducción del curso React, le sugerimos que complete la tarea práctica de crear conjuntos de componentes usando JavaScript y continúe trabajando en la aplicación TODO.



→ Parte 1: descripción general del curso, razones de la popularidad de React, ReactDOM y JSX
→ Parte 2: componentes funcionales
→ Parte 3: archivos de componentes, estructura del proyecto
→ Parte 4: componentes principales y secundarios
→ Parte 5: inicio del trabajo en una aplicación TODO, los fundamentos del estilo
→ Parte 6: sobre algunas características del curso, JSX y JavaScript
→ Parte 7: estilos en línea
→ Parte 8: trabajo continuo en la aplicación TODO, familiaridad con las propiedades de los componentes
→ Parte 9: propiedades del componente
→ Parte 10: Taller sobre trabajo con propiedades de componentes y estilo
→ Parte 11: generación de marcado dinámico y método de matrices de mapas
→ Parte 12: taller, tercera etapa de trabajo en una aplicación TODO
→ Parte 13: componentes basados ​​en clases
→ Parte 14: taller sobre componentes basados ​​en la clase, estado de los componentes.
→ Parte 15: talleres de componentes de salud
→ Parte 16: la cuarta etapa de trabajo en una aplicación TODO, manejo de eventos
→ Parte 17: quinta etapa de trabajo en una aplicación TODO, modificando el estado de los componentes
→ Parte 18: la sexta etapa de trabajo en una aplicación TODO
→ Parte 19: métodos del ciclo de vida de los componentes.
Parte 20: la primera lección de representación condicional
→ Parte 21: segunda lección y taller sobre representación condicional
→ Parte 22: la séptima etapa de trabajo en una aplicación TODO, descargando datos de fuentes externas
→ Parte 23: primera lección sobre trabajar con formularios
→ Parte 24: Segunda lección de formularios
→ Parte 25: Taller sobre trabajo con formularios
→ Parte 26: arquitectura de la aplicación, patrón de contenedor / componente
→ Parte 27: proyecto del curso

Lección 22. Taller. Formación dinámica de conjuntos de componentes.

→ Original

▍Trabajo

Basado en el proyecto de aplicación React estándar generado por create-react-app , y usando el código del archivo de datos vschoolProducts.js , cree una aplicación que muestre una lista de componentes del Product en la página, formada usando el método de matriz estándar .map() en Basado en datos de vschoolProducts.js .

Recuerde crear instancias del componente y pasarles el atributo key con un identificador único; de lo contrario, el sistema emitirá una advertencia.

En el proceso de resolver el problema, puede usar la siguiente preparación del archivo App.js :

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

Aquí está el vschoolProducts.js archivo 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 

▍Solución

Aquí está el código para el archivo 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 

Tenga en cuenta que la propiedad id de los objetos del archivo de datos es opcional. Esta propiedad nos fue útil para establecer el atributo key creado mediante el método .map() de instancias del componente Product .

Aquí está el código para el archivo 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 

Aquí, cuando derivamos una propiedad que contiene el precio del producto, que es visible en el componente como props.product.price , usamos el método toLocaleString() , mediante el cual formateamos la cantidad del producto.

Así es como se ve el proyecto de aplicación en VSCode.


Aplicación en VSCode

Y aquí está la página de la aplicación en el navegador.


Página de aplicación en el navegador

Preste atención a la forma en que se presenta el valor de los bienes.

Lección 23. Taller. TODO aplicación. Etapa número 3

→ Original

Aquí seguimos trabajando en la aplicación TODO, que se trató aquí y aquí . En particular, aquí se le pedirá que aplique el conocimiento sobre la formación dinámica de listas de componentes para crear una lista de tareas que muestra la aplicación.

▍Trabajo

Usando el todosData.js caso todosData.js , cuyo contenido se proporciona a continuación, cree una lista de componentes de TodoItem y muestre esta lista en el componente de la App . Tenga en cuenta que deberá modificar el código del componente TodoItem para que pueda mostrar las propiedades que se le pasan.

Aquí está el contenido del archivo 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 

▍Solución

Aquí está el código para el archivo 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 

Aquí está el código para el archivo 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 

Aquí está el proyecto de aplicación en VSCode.


Aplicación en VSCode

Cabe señalar que después de completar el trabajo previsto por esta práctica lección, a pesar del hecho de que equiparemos la aplicación con nuevas características, interrumpimos su funcionalidad. En particular, estamos hablando del estado de las banderas. Se props.item.completed las props.item.completed para las que se props.item.completed propiedad props.item.completed establecida en true para establecer el estado, se props.item.completed las props.item.completed para true se utilizó la misma propiedad establecida en false . Pero si hace clic en la bandera en la página de la aplicación, no pasará nada, ya que configuramos incorrectamente el elemento HTML correspondiente. Puede ver una advertencia sobre esto en la consola.


Página de aplicación en el navegador y advertencia en la consola

Más adelante hablaremos sobre formularios y repararemos nuestra aplicación de capacitación mientras continuamos trabajando en ellos.

Resumen

En esta lección, tuvo la oportunidad de practicar la creación de archivos de componentes, trabajar con propiedades que se pasan a instancias de componentes cuando se crean y usar el método de matriz JavaScript .map() estándar. Además, aquí continuamos trabajando en una aplicación de capacitación. La próxima vez hablaremos sobre componentes basados ​​en clases.

Estimados lectores! ¿Has dominado la técnica de usar el método de matriz JavaScript .map() para crear conjuntos de componentes?