Tutorial React Parte 21: Segunda lección y taller de renderizado condicional

Hoy, en la traducción de la próxima parte del curso de capacitación React, le presentamos la segunda lección sobre representación condicional y un taller sobre este tema.

imagen

→ 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 37. Representación condicional, parte 2


→ Original

En el tutorial de hoy sobre renderizado condicional, hablaremos sobre el uso del operador lógico && (Y). Experimentaremos con un proyecto estándar creado por create-react-app, en el archivo App.js en el que se encuentra el siguiente código:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           unreadMessages: [               "Call your mom!",               "New spam email available. All links are definitely safe to click."           ]       }   }   render() {       return (           <div>              <h2>You have {this.state.unreadMessages.length} unread messages!</h2>           </div>       )   } } export default App 

Ahora la aplicación se ve en el navegador como se muestra a continuación.


Página de aplicación en el navegador

Es posible que ya haya utilizado el operador && en construcciones como true && false (que da false ). Para que se devuelva una expresión true como resultado del cálculo de dicha expresión, debe verse como true && true . Al procesar tales expresiones, JavaScript determina si su lado izquierdo es verdadero y, de ser así, simplemente devuelve lo que está en su lado derecho. Si false && false procesa una expresión de la forma false && false , se devolverá false inmediatamente, sin marcar el lado derecho de la expresión. Como resultado, el operador && se puede utilizar en la representación condicional. Con él, puede devolver algo que se mostrará en la pantalla o no devolver nada.

Analicemos el código de la aplicación de entrenamiento.

El estado del componente App almacena una serie de cadenas de unreadMessages . Cada fila de esta matriz representa un mensaje no leído. La página muestra el número de mensajes no leídos, determinados en función de la longitud de la matriz. Si esta matriz está vacía, es decir, no habrá un solo elemento en ella, entonces la aplicación mostrará lo que se muestra a continuación en la página.


La aplicación nos informa que no hay mensajes no leídos

Para lograr este efecto, es suficiente llevar la matriz a este formulario: unreadMessages: [] .

Si no hay mensajes no leídos, es completamente posible no mostrar ningún mensaje. Si utilizamos el operador ternario del que hablamos la última vez para implementar este comportamiento de la aplicación, el método render() del componente App puede reescribirse de la siguiente manera:

 render() {   return (       <div>           {               this.state.unreadMessages.length > 0 ?              <h2>You have {this.state.unreadMessages.length} unread messages!</h2> :               null           }       </div>   ) } 

Ahora, si la matriz unreadMessages vacía, no se mostrará nada en la página. Pero el código presentado aquí puede simplificarse utilizando el operador && . Así es como se vería:

 render() {   return (       <div>           {               this.state.unreadMessages.length > 0 &&              <h2>You have {this.state.unreadMessages.length} unread messages!</h2>           }       </div>   ) } 

Si hay algo en la matriz, el lado derecho de la expresión se muestra en la página. Si la matriz está vacía, no se muestra nada en la página.

Esto no quiere decir que usar el operador && en la representación condicional es absolutamente necesario, ya que se puede lograr el mismo efecto usando un operador ternario que devuelve null si la condición que prueba es falsa. Pero el enfoque presentado aquí simplifica el código y, además, se usa con bastante frecuencia, por lo que puede encontrarlo mientras lee los programas de otras personas.

Lección 38. Taller. Representación condicional


→ Original

▍Trabajo


Aquí está el código del componente funcional de la App , que se almacena en el archivo App.js de un proyecto estándar creado usando create-react-app.

 import React from "react" function App() {   return (       <div>           Code goes here       </div>   ) } export default App 

Debes hacer lo siguiente:

  1. Convierta el código del componente para equiparlo con el estado.
  2. Asegúrese de que el estado del componente contenga información sobre si el usuario "inició sesión" o no (en este ejercicio, "iniciar sesión" en el sistema y "cerrar sesión" significa solo cambiar el valor correspondiente almacenado en el estado).
  3. Agregue a la página que el componente forma un botón que permite al usuario iniciar y cerrar sesión.

    1. Esta es una tarea adicional. Asegúrese de que si el usuario no ha iniciado sesión, el botón mostrará LOG IN y, si está conectado, LOG OUT .
  4. En la página formada por el componente, Logged in si el usuario ha iniciado sesión y Logged out si no Logged out .

Si ahora siente que es difícil comenzar a resolver estos problemas, eche un vistazo a los consejos y luego comience a trabajar.

▍Consejos


Para completar esta tarea, debe recordar gran parte de lo que hablamos en las clases anteriores. Para empezar, un componente que puede tener estado debe ser un componente basado en una clase. Este componente debe tener un constructor. En el estado del componente, puede almacenar una propiedad lógica, por ejemplo, se puede llamar isLoggedIn , isLoggedIn valor, true o false , indica si el usuario ha iniciado sesión o no. Para que el botón que debe agregarse a la página generada por la aplicación pueda realizar sus funciones, necesitará un onClick eventos onClick . Para mostrar diferentes textos, en función del valor cambiante del estado, será necesario recurrir a la tecnología de representación condicional.

▍Solución


Transformamos el componente funcional disponible en el código en el componente basado en una clase. Necesitamos esto por varias razones. Primero, necesitamos trabajar con el estado de la aplicación. En segundo lugar, necesitamos un controlador de eventos que se llama cuando se hace clic en un botón. En principio, puede escribir una función independiente y usarla para manejar eventos de botón, pero prefiero describir controladores dentro de las clases de componentes.

Así es como se verá el código para un componente funcional convertido a un componente basado en clases. Aquí, en el constructor de componentes, describimos su estado inicial, que contiene la propiedad isLoggedIn establecida en false .

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }   }   render() {          return (           <div>               Code goes here           </div>       )   } } export default App 

El código anterior es una solución para la primera y segunda parte de la tarea. Ahora trabajaremos para agregar un botón a la página que muestra el componente. Hasta ahora, este botón mostrará la misma inscripción independientemente de lo que esté almacenado en el estado de la aplicación. Lo equiparemos con un controlador de eventos, colocando en él, para verificar la operatividad de nuestro código, un comando simple para enviar un mensaje a la consola. Además, nosotros, en el constructor de componentes, vincularemos este controlador a this , lo que nos será útil cuando, en el código de este controlador, accedamos a los mecanismos diseñados para trabajar con el estado del componente. Ahora el código se ve a continuación.

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }       this.handleClick = this.handleClick.bind(this)   }     handleClick() {       console.log("I'm working!")   }     render() {          return (           <div>               <button onClick={this.handleClick}>LOG IN</button>           </div>       )   } } export default App 

Cuando haces clic en el botón LOG IN , I'm working! .

Ahora recordemos que cuando hacemos clic en el botón, la propiedad isLoggedIn almacenada en el estado isLoggedIn de true a false y viceversa. Para hacer esto, en el controlador de clic de botón, deberá llamar a la función this.setState() , que se puede usar de dos maneras. Es decir, se puede proporcionar, en forma de un objeto, una nueva idea de lo que debe estar contenido en el estado. La segunda variante de su uso proporciona la transferencia de una función que toma el estado anterior del componente y forma uno nuevo, devolviendo, nuevamente, el objeto. Haremos exactamente eso. Eso es lo que obtuvimos en esta etapa del trabajo.

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }       this.handleClick = this.handleClick.bind(this)   }     handleClick() {       this.setState(prevState => {           return {               isLoggedIn: !prevState.isLoggedIn           }       })   }     render() {          return (           <div>               <button onClick={this.handleClick}>LOG IN</button>           </div>       )   } } export default App 

Aquí podríamos usar la construcción if-else, ¡pero solo convertimos true a false y false a true usando el operador lógico ! (NO)

Hasta ahora, no tenemos ningún mecanismo que, en función de lo que se almacena en el estado, nos permita influir en el aspecto de la aplicación. Por lo tanto, ahora resolveremos la tarea adicional de la tarea número 3. Es decir, haremos que la etiqueta del botón cambie según el estado del componente. Para lograr esto, puede declarar una variable en el método render() cuyo valor, LOG IN o LOG OUT , depende de lo que esté almacenado en el estado. Este valor se puede usar como texto de botón. Así es como se ve.

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }       this.handleClick = this.handleClick.bind(this)   }     handleClick() {       this.setState(prevState => {           return {               isLoggedIn: !prevState.isLoggedIn           }       })   }     render() {         let buttonText = this.state.isLoggedIn ? "LOG OUT" : "LOG IN"       return (           <div>               <button onClick={this.handleClick}>{buttonText}</button>           </div>       )   } } export default App 

Ahora tomemos la cuarta parte de la tarea. Mostraremos texto en la página dependiendo de si el usuario ha iniciado sesión o no. De hecho, considerando todo lo que ya está presente en el código del componente, resolver este problema es muy simple. A continuación se muestra el código terminado para el archivo App.js

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }       this.handleClick = this.handleClick.bind(this)   }     handleClick() {       this.setState(prevState => {           return {               isLoggedIn: !prevState.isLoggedIn           }       })   }     render() {         let buttonText = this.state.isLoggedIn ? "LOG OUT" : "LOG IN"       let displayText = this.state.isLoggedIn ? "Logged in" : "Logged out"       return (           <div>               <button onClick={this.handleClick}>{buttonText}</button>               <h1>{displayText}</h1>           </div>       )   } } export default App 

Así es como se ve la aplicación en el navegador.


Página de aplicación en el navegador

Al hacer clic en el botón LOG IN se muestra en la figura anterior, se cambia el estado de la aplicación, después de lo cual se muestra LOG OUT en el botón y se muestra el texto en la página informando al usuario que ha iniciado sesión.

Resumen


Hoy continuamos hablando sobre renderizado condicional, examinamos el uso del operador && y completamos una tarea práctica que involucra muchos de los mecanismos que estudiamos. La próxima vez, continuará trabajando en la aplicación Todo y en un nuevo tema.

Estimados lectores! ¿Has hecho frente a la tarea práctica de hoy?

Source: https://habr.com/ru/post/443210/


All Articles