Las clases de hoy en el curso de capacitación React, que estamos publicando, están dedicadas a continuar trabajando en la aplicación TODO y las propiedades de los componentes.
→
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 cursoLección 16. Taller. TODO aplicación. Etapa número 2
→
Original▍Trabajo
- Después del taller anterior , creó una aplicación React, cuyo componente de
App muestra un conjunto de pares de elementos: banderas (elementos <input type="checkbox" /> ) y sus descripciones (elementos <p> </p> ). Diseñe los elementos de este conjunto como un componente separado - <TodoItem /> y <TodoItem /> para crear una lista en el componente App . Al mismo tiempo, no preste atención al hecho de que todos los elementos de esta lista se verán iguales (más adelante hablaremos sobre cómo llenarlos con datos diferentes). - Estilice la página como desee utilizando archivos CSS, estilos en línea o una combinación de estos métodos de estilo para aplicaciones React.
▍Solución
Esto supone que continúa trabajando en una aplicación basada en un proyecto estándar creado con
create-react-app . Así era el código del componente de la
App antes del trabajo.
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
Cree, en la misma carpeta en la que se encuentra este archivo, el archivo
TodoItem.js en el que se almacenará el código del componente
TodoItem . Ahora importe este archivo en el archivo
App.js siguiente comando:
import TodoItem from "./TodoItem"
Puede hacerlo más tarde, cuando llegue el momento de usar el
TodoItem componente
TodoItem (aún no escrito). Nos ocuparemos de este código ahora. Esto es lo que será:
import React from "react" function TodoItem() { return ( <div> <input type="checkbox" /> <p>Placeholder text here</p> </div> ) } export default TodoItem
Presta atención a dos cosas. En primer lugar, este componente devuelve dos elementos, por lo tanto, están envueltos en un elemento
<div> . En segundo lugar, lo que devuelve es una copia de uno de los pares de elementos de verificación / descripción del archivo
App.jsAhora volvemos al archivo
App.js y, en lugar de los pares de verificación / descripción, usamos instancias del componente
TodoItem en el marcado que devuelve:
import React from "react" import TodoItem from "./TodoItem" function App() { return ( <div> <TodoItem /> <TodoItem /> <TodoItem /> <TodoItem /> </div> ) } export default App
Como resultado, la página que formará la solicitud se verá como la que se muestra a continuación.
Apariencia de la aplicación en el navegadorEn realidad, su apariencia, en comparación con la versión anterior, no ha cambiado, pero el hecho de que un componente ahora se use para formar pares de elementos nos abre grandes oportunidades, que usaremos más adelante.
Ahora completaremos la segunda tarea, diseñando la aplicación usando clases CSS. Para hacer esto, traemos el código del componente de la
App al siguiente formulario:
import React from "react" import TodoItem from "./TodoItem" function App() { return ( <div className="todo-list"> <TodoItem /> <TodoItem /> <TodoItem /> <TodoItem /> </div> ) } export default App
Aquí asignamos el nombre de la clase al elemento
<div> . Del mismo modo,
TodoItem con el
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
Ahora
index.css archivo CSS
index.css que ya está en el proyecto, ya que fue creado usando
create-react-app en el archivo
index.js :
import React from "react" import ReactDOM from "react-dom" import "./index.css" import App from "./App" ReactDOM.render( <App />, document.getElementById("root") )
Agregue la siguiente descripción de estilo a
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; }
Así es como se verá la página de la aplicación en el navegador.
Apariencia de la aplicación en el navegadorPuede analizar y editar estos estilos usted mismo.
Si hablamos de las peculiaridades del código utilizado en el estilo, tenga en cuenta que la palabra clave
className se utiliza para asignar clases a los elementos, y que React admite estilos en línea. Así es como se ve el proyecto de nuestra aplicación en VSCode en esta etapa.
Proyecto de aplicación en VSCodeSi ahora experimentamos con lo que tenemos, resulta que las casillas de verificación responden a las interacciones del usuario.
Las banderas responden a las interacciones del usuario.Pero al mismo tiempo, el código de la aplicación no sabe nada sobre los cambios que ocurren con estas banderas. Si el código es consciente de lo que está sucediendo en la interfaz de la aplicación, esto nos permitirá organizar su reacción ante varios eventos. Por ejemplo, un elemento en la lista de tareas pendientes, en el que se selecciona una casilla de verificación, que indica que la tarea correspondiente se ha completado, se puede cambiar de alguna manera. Hablaremos sobre cómo hacer esto en la próxima lección.
Lección 17. Propiedades, Parte 1. Atributos de elementos HTML
→
OriginalHablemos sobre el concepto de propiedades en React. Comencemos con un código HTML de muestra para una página:
<html> <head></head> <body> <a>This is a link</a> <input /> <img /> </body> </html>
Como puede ver, no hay nada relacionado con React. Ante nosotros está el marcado HTML habitual. Observe los tres elementos presentes en el cuerpo de la página descrita por este marcado:
<a> ,
<input /> y
<img /> , y piense qué les pasa.
El problema aquí es que todos estos elementos no cumplen sus funciones inherentes. El enlace descrito por la etiqueta
<a> no lleva a ninguna parte. A esta etiqueta se le debe asignar un atributo (propiedad)
href , que contenga una determinada dirección a la que se le redirigirá cuando haga clic en el enlace. El mismo problema es típico para la
<img /> de nuestro ejemplo. No se le asigna un atributo
src que especifique la imagen, local o accesible por la URL que mostrará este elemento. Como resultado, resulta que para garantizar el correcto funcionamiento de los elementos
<a> y
<img> , es necesario establecer sus propiedades
href y
src , respectivamente. Si hablamos del elemento
<input> , sin establecer sus atributos, mostrará un campo de entrada en la página, pero de esta forma generalmente no se usa, configurando sus propiedades como
placeholder ,
name ,
type . La última propiedad, por ejemplo, le permite cambiar radicalmente la apariencia y el comportamiento del elemento
<input> , convirtiéndolo de un campo de entrada de texto en una bandera, un botón de radio o un botón para enviar un formulario. Cabe señalar que los términos "atributo" y "propiedad" que usamos aquí indistintamente.
Al editar el código anterior, podemos llevarlo a la siguiente forma:
<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>
Todavía no es del todo normal en esta forma, pero aquí, al menos, establecemos valores para algunos atributos de elementos HTML y lugares designados donde puede ingresar valores para algunos atributos más.
De hecho, si el concepto de atributos de los elementos HTML descritos anteriormente es claro para usted, entonces puede descubrir fácilmente el concepto de propiedades de los componentes React. Es decir, estamos hablando del hecho de que, en las aplicaciones React, podemos usar componentes de nuestro propio desarrollo, y no solo etiquetas HTML estándar. Al trabajar con componentes, podemos asignarles propiedades que, cuando se procesan en componentes, pueden cambiar su comportamiento. Por ejemplo, tales propiedades le permiten personalizar la apariencia de los componentes.
Lección 18. Propiedades, Parte 2. Componentes reutilizables
→
OriginalAntes de entrar en la conversación sobre el uso de propiedades en React, veamos otro concepto conceptual. Echa un vistazo a la página de inicio de YouTube.
Página de inicio de YouTubeEstoy seguro de que React no utiliza esta página, ya que Google se dedica al desarrollo del marco angular, pero los principios que consideraremos en este ejemplo son universales.
Piense en cómo se podría construir una página de este tipo utilizando las capacidades de React. Quizás lo primero a lo que le preste atención es que esta página se puede dividir en fragmentos, representados por componentes independientes. Por ejemplo, es fácil notar que los elementos que muestran información sobre los videoclips resaltados en la figura a continuación son muy similares entre sí.
Página de inicio de YouTube, elementos similares entre síSi observa de cerca estos elementos, resulta que hay una imagen en la parte superior de cada uno de ellos, y que todas estas imágenes son del mismo tamaño. Cada uno de estos elementos tiene un encabezado en negrita e inmediatamente debajo de la imagen. Cada elemento contiene información sobre la cantidad de vistas del video correspondiente, sobre la fecha de su publicación. En la esquina inferior derecha de cada imagen presente en el elemento, hay información sobre la duración del videoclip correspondiente.
Es bastante comprensible que la persona que creó esta página no haya hecho algo como copiar, pegar o modificar el código para representar cada uno de los elementos que se muestran en ella. Si dicha página se creara utilizando las herramientas React, sería posible imaginar que las tarjetas de video son instancias de algún componente, por ejemplo,
<VideoTile /> . Además, dicho componente incluye una serie de otros componentes, que son una imagen, un título, información sobre la duración del clip y otros elementos de la tarjeta de video clip.
Lo anterior nos lleva a la idea de que para formar una página de este tipo se desarrolló un solo componente, que es una tarjeta de video clip. Al mismo tiempo, se mostraban muchas instancias de este componente en la página, cada una de las cuales muestra datos únicos. Es decir, al desarrollar dicho componente, es necesario prever la posibilidad de cambiar ciertas propiedades, como la URL de la imagen, que afecten su apariencia y comportamiento. De hecho, esto es a lo que se dedica nuestra próxima lección. Pero antes de comenzar, me gustaría que se sienta cómodo con la idea de usar componentes en React.
Piense en la lección en la que discutimos los componentes primarios y secundarios, y esos componentes pueden formar estructuras que tienen grandes profundidades de anidación. Por ejemplo, en nuestro caso, en la página, puede seleccionar grupos horizontales de tarjetas de video, probablemente ubicadas de esta manera con la ayuda de un determinado componente de servicio para mostrar listas de elementos. Estos elementos son tarjetas de video, que, a su vez, generan un cierto número de otros elementos que representan información sobre un clip en particular.
Página de inicio de YouTube, componentes principales y secundariosAdemás, en el lado izquierdo de la página puede ver un grupo vertical de elementos similares entre sí. Lo más probable es que sean instancias del mismo componente. Además, cada uno de ellos tiene su propia imagen y texto.
El hecho de que los marcos modernos para desarrollar interfaces web, como React, Angular o Vue, le permitan crear un componente una vez y reutilizarlo configurando sus propiedades, es una de las razones de la popularidad de estos marcos. Esto facilita enormemente y acelera el desarrollo.
Resumen
En esta lección, continuamos trabajando en una aplicación TODO y discutimos temas relacionados con los atributos de los elementos HTML y la idea de reutilizar componentes, lo que nos llevó a trabajar con las propiedades de los componentes React. Esto es lo que haremos la próxima vez.
Estimados lectores! ¿Entiendes el concepto de propiedades de los componentes?
