En esta parte de la traducción del curso de capacitación React, le sugerimos que complete una tarea práctica para trabajar con componentes basados en la clase. Después de eso, comenzaremos a dominar un concepto tan importante de React como el estado 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 25. Taller. Componentes basados en clase
→
Original▍Trabajo
A continuación se muestra el código que debe colocarse en el archivo
index.js de una aplicación React estándar creada por
create-react-app . Convierta los componentes funcionales que encontrará en este código en componentes basados en clases y, además, busque y repare un pequeño error.
El código para el archivo
index.js :
import React from "react" import ReactDOM from "react-dom"
▍Solución
Primero, veamos qué ofrece la aplicación en su forma original abriéndola en un navegador.
Página de origen del navegadorPuede ver que la línea superior que aparece en la página no se ve bien. Después de la coma que sigue a Bienvenida, obviamente debería haber algo como un nombre de usuario.
Si analizamos el código de la aplicación, resulta que el componente
Header muestra esta línea, esperando obtener la propiedad de
username que se establece al crear su instancia. Se crea una instancia de este componente en el componente
App . Habiendo descubierto esto, podremos corregir el mismo error que se mencionó en la tarea.
Cabe señalar que los componentes generalmente se colocan en diferentes archivos, pero en este caso los describimos todos en un solo archivo.
Procedemos a transformar el componente funcional de la
App en un componente basado en la clase. Para hacer esto, es suficiente traer su código a este formulario:
class App extends React.Component { render() { return ( <div> <Header username="vschool"/> <Greeting /> </div> ) } }
Ahora la palabra clave de
class aparece antes del nombre del componente, luego se
extends React.Component comando
extends React.Component , después de lo cual, el cuerpo de la clase se describe entre llaves. Debe haber un método
render() que devuelva lo que devolvimos del componente funcional. Otros componentes se procesan de la misma manera. Presta atención a la construcción de
<Header username="vschool"/> . Aquí pasamos la propiedad de
username con el valor de
vschool componente
Header ,
vschool así el error que está en la aplicación original.
Como ya sabe, el componente
Header espera obtener la propiedad de
username , y en el componente funcional se accede a esta propiedad utilizando la construcción
props.username (en este caso, los
props son un argumento de la función que describe el componente). En componentes basados en clases, el mismo se parece a
this.props.username . Aquí está el código rediseñado para el componente
Header :
class Header extends React.Component { render() { return ( <header> <p>Welcome, {this.props.username}!</p> </header> ) } }
El tercer componente,
Greeting , es ligeramente diferente de los demás. El hecho es que en él, antes del comando de
return , se realizan algunos cálculos. Al convertirlo a un componente basado en una clase, estos cálculos deben colocarse en el método
render() antes del comando return. Aquí está el código para el componente de
Greeting rediseñado:
class Greeting extends Component { render() { const date = new Date() const hours = date.getHours() let timeOfDay if (hours < 12) { timeOfDay = "morning" } else if (hours >= 12 && hours < 17) { timeOfDay = "afternoon" } else { timeOfDay = "night" } return ( <h1>Good {timeOfDay} to you, sir or madam!</h1> ) } }
Tenga en cuenta que este componente se utilizó en la declaración de este componente:
class Greeting extends Component . Esto a menudo se hace por razones de brevedad, pero para que esto funcione, necesitamos refinar el comando de importación
react , llevándolo a esta forma:
import React, {Component} from "react"
Así es como se ve la página de la aplicación reciclada en un navegador.
Página de aplicación rediseñada en el navegadorEn realidad, se ve igual que la página de la aplicación original, y la única diferencia notable entre estas páginas es que el nombre de usuario pasado al componente
Header ahora se muestra en la primera línea.
Aquí está el código completo para el archivo
index.js procesado:
import React, {Component} from "react" import ReactDOM from "react-dom"
Si la implementación de esta tarea práctica no le causó ninguna dificultad, genial. Si aún no se siente muy cómodo con los componentes basados en clases, tómese el tiempo de experimentar con ellos. Por ejemplo, puede rehacer componentes basados en clases nuevamente en componentes funcionales y luego realizar la transformación inversa.
Lección 26. Estado del componente
→
OriginalEl estado es un concepto de reacción increíblemente importante. Si el componente necesita almacenar cualquiera de sus propios datos y administrar estos datos (en contraste con la situación en la que el componente principal le transfiere datos mediante el mecanismo de propiedad), use el estado del componente. Hoy nos fijamos en los conceptos básicos sobre el estado de los componentes.
Un estado son solo los datos que controla el componente. En particular, esto significa que el componente puede cambiar estos datos. Al mismo tiempo, las propiedades que ya nos son familiares, obtenidas por el componente del componente padre, no pueden ser cambiadas por el componente receptor. Ellos, de acuerdo con la
documentación de React, son inmutables (inmutables). Por ejemplo, si intentamos, en un componente basado en una clase, usar una construcción como
this.props.name = "NoName" , encontraremos un mensaje de error.
Cabe señalar que si algún componente necesita trabajar con estado, entonces debería ser un componente basado en la clase. Hablemos sobre cómo equipar el componente con el estado comenzando con el siguiente fragmento de código, que es el contenido del archivo
App.js de un proyecto estándar creado por
create-react-app :
import React from "react" class App extends React.Component { render() { return ( <div> <h1>Is state important to know?</h1> </div> ) } } export default App
Así es como se ve la página de la aplicación en un navegador.
Página de aplicación en el navegadorPara equipar un componente con estado, primero debe crear un constructor de clase. Parece un método de clase
constructor() . Después de eso, el código del componente se verá así:
class App extends React.Component { constructor() { } render() { return ( <div> <h1>Is state important to know?</h1> </div> ) } } Constructor()
Este es un método especial integrado en JavaScript que está diseñado para crear e inicializar objetos basados en clases. En realidad, si necesita inicializar algo al crear un objeto, las operaciones correspondientes se realizan exactamente en el método
constructor() .
Lo primero que debe hacer en el código del constructor es llamar al constructor de la clase padre. Esto se hace usando la función
super() . En el constructor de la clase padre, se pueden realizar ciertas operaciones de inicialización, cuyos resultados serán útiles para nuestro objeto. Así es como se verá nuestro constructor de clases:
constructor() { super() }
Ahora, para equipar el componente con estado, necesitamos, en el constructor, agregar la propiedad de
state a la instancia de clase. Esta propiedad es un objeto:
constructor() { super() this.state = {} }
Aquí lo inicializamos con un objeto vacío. Puede trabajar con estado en el código del componente utilizando la construcción
this.state . Agregue una nueva propiedad al estado:
constructor() { super() this.state = { answer: "Yes" } }
Ahora pensemos en cómo usar lo que está almacenado en el estado en el código. Recuerde que el componente muestra la pregunta
Is state important to know? . El estado almacena la respuesta a esta pregunta. Para agregar esta respuesta después de la pregunta, debe hacer lo mismo que solemos hacer agregando construcciones de JavaScript al código JSX. Es decir, agregue la construcción
{this.state.answer} al final de la línea. Como resultado, el código completo del componente se verá así:
class App extends React.Component { constructor() { super() this.state = { answer: "Yes" } } render() { return ( <div> <h1>Is state important to know? {this.state.answer}</h1> </div> ) } }
Y así es como se verá la página de la aplicación en el navegador.
Página de aplicación en el navegadorAquí me gustaría señalar que el estado que recibe el componente durante la inicialización se puede cambiar durante la operación del componente. Además, los componentes pueden pasar el estado a los componentes descendientes utilizando el mecanismo de trabajar con propiedades que ya conoce. Por ejemplo, en nuestro caso, si suponemos que hay un cierto componente de
ChildComponent , los datos del estado se pueden transferir a este de la siguiente manera:
<ChildComponent answer={this.state.answer}/>
Si bien no hablaremos en detalle sobre cómo cambiar los datos almacenados en el estado del componente. Solo notamos que al llamar al método
setState() , que se utiliza para resolver este problema, no solo se cambiará el estado del componente, sino que también se actualizarán los datos de estado transmitidos a través del mecanismo de propiedad a sus componentes secundarios. Además, cambiar el estado hará que los datos del estado que se muestran en la página de la aplicación cambien automáticamente.
Resumen
Hoy tuvo la oportunidad de trabajar con componentes basados en clases. Además, su introducción al concepto de estado del componente comenzó aquí. La próxima vez, encontrará tareas prácticas para trabajar con el estado.
Estimados lectores! Si utiliza React en la práctica, cuéntenos cómo administra el estado de los componentes. ¿Utiliza herramientas estándar de React o algo más?
