Tutorial de React, Parte 22: Séptima etapa de trabajo en una aplicación TODO, descargando datos de fuentes externas

En la parte de hoy de la traducción del tutorial React, terminaremos el trabajo en la aplicación Todo y hablaremos sobre cómo usar los datos de los componentes internos y las capacidades estándar de JavaScript para cargar datos de fuentes externas.



→ 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 39. Taller. TODO aplicación. Etapa número 7

→ Original

▍Trabajo

Ahora la aplicación Todo se parece a la siguiente figura.


Página de aplicación en el navegador

El TodoItem componente TodoItem ve así:

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

Su tarea es diseñar los elementos de la lista según su estado. La apariencia de los casos completados debe ser diferente de incompleta. Al formatear elementos de la lista que representan tareas completadas, su texto puede aparecer atenuado, tachado, en cursiva o se pueden realizar otras modificaciones.

▍Solución

El problema presentado aquí se puede resolver de varias maneras. Utilizaremos el estilo incorporado, que describiremos como la constante completedStyle en el código del componente funcional TodoItem . Aquí configuramos las propiedades de texto fontStyle , color y textDecoration . Después de eso, utilizando la técnica de representación condicional, asignaremos este estilo al elemento <p> en caso de que el negocio deducido por él se marque como completado. Determinaremos esto en función de la propiedad pasada a la instancia del componente, que está disponible en ella como props.item.completed .

El código del componente convertido se verá así:

 import React from "react" function TodoItem(props) {   const completedStyle = {       fontStyle: "italic",       color: "#cdcdcd",       textDecoration: "line-through"   }     return (       <div className="todo-item">           <input               type="checkbox"               checked={props.item.completed}               onChange={() => props.handleChange(props.item.id)}           />           <p style={props.item.completed ? completedStyle: null}>{props.item.text}</p>       </div>   ) } export default TodoItem 

Así es como cambia el aspecto de la página de la aplicación.


Se cambió la página de la aplicación en el navegador.

Al mismo tiempo, los estilos se aplican al configurar y desmarcar los indicadores que indican el estado de los elementos en la lista de tareas pendientes.

Esto concluye el trabajo en la aplicación Todo.

Lección 40. Descarga de datos de fuentes externas

→ Original

En una lección sobre los métodos del ciclo de vida de los componentes, hablamos sobre el método componentDidMount() . Intenta recordar cómo funciona. Este método le permite interferir con el funcionamiento del componente ejecutando algún código inmediatamente después de que el componente se haya agregado al árbol DOM. Cuando hablamos sobre los métodos del ciclo de vida de los componentes, mencioné que el método componentDidMount() se usa con mayor frecuencia para cargar datos de algunas fuentes externas. El componente utiliza estos datos para realizar su propósito.

Comencemos nuestros experimentos de hoy con un nuevo proyecto creado usando las App.js create-react-app App.js cuyo archivo App.js contiene el siguiente código:

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

En el código del componente de App basado en componentes, describimos el método componentDidMount() y verificamos la operabilidad de la construcción resultante al enviar algo a la consola desde este método.

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {}   }     componentDidMount() {       console.log("Hi!")   }     render() {       return (           <div>               Code goes here           </div>       )   } } export default App 

Salida a la cadena de consola Hi! demuestra la funcionalidad del código, por lo que podemos seguir trabajando. Como ya se mencionó, este método generalmente carga los datos necesarios para que el componente funcione.

En esta lección, utilizaremos varias herramientas auxiliares que nos serán útiles al cargar datos en el componente.

El primero es la función de JavaScript incorporada. Estamos hablando de API Fetch , que es una interfaz conveniente para obtener recursos, basada en promesas , que le permite realizar solicitudes HTTP, a través de las cuales se cargan los datos.

La segunda herramienta que usaremos es la API de Star Wars . Este proyecto es bueno porque puede usarse en aplicaciones front-end sin ninguna dificultad especial (en particular, estamos hablando de las características de configuración de CORS).

En el método componentDidMount() , vamos a utilizar la función fetch() , pasándole la dirección para cargar datos, convirtiendo estos datos al tipo que necesitamos y, para verificar el correcto funcionamiento del sistema, enviaremos estos datos a la consola. Transformamos el código del método a la siguiente forma:

 componentDidMount() {   fetch("https://swapi.co/api/people/1")       .then(response => response.json())       .then(data => console.log(data)) } 

Aquí descargamos datos sobre cierto héroe de la película, en referencia a la API, luego convertimos lo que vino del servidor al formato JSON y luego imprimimos estos datos en la consola. Lo que entró en la consola se muestra en la siguiente figura.


Los datos descargados de la API de Star Wars se envían a la consola

Como puede ver, un objeto con datos sobre Luke Skywalker entró en la consola. Ahora, una vez que tenemos los datos, debemos pensar en cómo mostrarlos en la página de la aplicación. Para resolver este problema, primero debe tener en cuenta el hecho de que los datos descargados desde el exterior, si no se guardan en ningún lugar, no se podrán mostrar en la página de la aplicación en un navegador. El lugar que sirve para almacenar dichos datos es el estado del componente. Agregue una nueva propiedad, character , representado por un objeto vacío al estado del componente:

 this.state = {   character: {} } 

Vamos a almacenar en esta propiedad un objeto con una descripción del personaje, cuyos datos se descargan de una fuente externa. Existen como un objeto, por lo que cuando inicializamos los estados, hacemos que la propiedad del character un objeto vacío.

Después de eso, en ese lugar del código del método componentDidMount() , donde obtenemos los datos, los escribiremos en el estado utilizando el método setState() . Además, en este caso, lo que estaba almacenado en el estado anterior no nos interesa, por lo tanto, simplemente podemos pasar a este método un objeto que contiene una nueva representación del estado. Como resultado, llegamos a este código de método componentDidMount() :

 componentDidMount() {   fetch("https://swapi.co/api/people/1")       .then(response => response.json())       .then(data => {           this.setState({               character: data           })       }) } 

Para verificar el funcionamiento correcto de los mecanismos que ahora existen en el código, mostraremos en el método render() algo que debe estar presente en el estado después de que los datos cargados se escriban en él. Ahora el código del archivo App.js se verá así:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           character: {}       }   }     componentDidMount() {       fetch("https://swapi.co/api/people/1")           .then(response => response.json())           .then(data => {               this.setState({                   character: data               })           })   }     render() {       return (           <div>               {this.state.character.name}           </div>       )   } } export default App 

Y así es como se verá la página de la aplicación en el navegador.


Página de aplicación en el navegador

Mostrar el texto de Luke Skywalker en una página demuestra cómo funcionan los mecanismos de carga de datos.

Nuestra aplicación utiliza una solicitud simple, en respuesta a la cual la aplicación recibe una pequeña cantidad de datos que se procesan rápidamente y se muestran en la página. Se necesita muy poco tiempo para completar todas estas acciones. Por lo tanto, los datos se muestran en la pantalla tan rápidamente que tenemos la impresión de que el componente, inmediatamente después de mostrarlos en la pantalla, ya los contiene. Pero si se accediera a la fuente de datos remota utilizando una línea de comunicación muy lenta, o la API desde la que se cargan los datos respondiera lentamente a las solicitudes, podría pasar mucho tiempo antes de que la aplicación pudiera mostrar estos datos en la pantalla . Todo este tiempo, la pantalla permanecería en blanco. Si esto ocurre en aplicaciones del mundo real, confunde a sus usuarios, quienes pueden decidir que tales aplicaciones no funcionan correctamente. Para anticipar una situación similar, es necesario, durante la carga y el procesamiento de datos, mostrar al usuario un mensaje correspondiente. Esto no se aplica a nuestro tema hoy, pero es aquí donde será apropiado discutirlo.

En aplicaciones reales, para alertar al usuario de que necesita esperar una determinada acción, como descargar datos, usan algo como un indicador de carga. En nuestro caso, hasta que los datos se carguen y estén listos para mostrarse en la página, solo mostraremos el texto loading... Al hacer esto, podremos evaluar las posibilidades que nos brinda el almacenamiento de datos en el estado de la aplicación.

Agregue una nueva propiedad al estado, que indica si los datos se están cargando en algún momento. Llámalo loading e inicialízalo en false . Después de eso, inmediatamente antes de cargar datos usando fetch() , escribimos true a esta propiedad.

A continuación, en el método render() , basado en la propiedad del estado de loading , configuraremos el texto que se muestra en la página. Así es como se App.js código de App.js después de estas conversiones.

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           loading: false,           character: {}       }   }     componentDidMount() {       this.setState({loading: true})       fetch("https://swapi.co/api/people/1")           .then(response => response.json())           .then(data => {               this.setState({                   character: data               })           })   }     render() {       const text = this.state.loading ? "loading..." : this.state.character.name       return (           <div>               <p>{text}</p>           </div>       )   } } export default App 

Este código, sin embargo, no funciona correctamente. A saber, así es como se ve ahora la página de la aplicación.


Página de aplicación en el navegador

Se supone que la loading... la inscripción loading... debe mostrarse solo cuando se cargan datos de una fuente externa, pero parece que ahora se muestra constantemente en la página. Antes de seguir leyendo, intente encontrar y corregir errores en el código.

En realidad, el problema aquí es que, antes de comenzar la carga de datos, configuramos la loading en true y, una vez completada la descarga, no loading false en la loading . Como resultado, el texto loading... siempre se muestra en la página. No es difícil corregir este error. Suficiente, en el mismo lugar donde escribimos los datos cargados en el estado, establezca la loading en false . Como resultado, el código App.js tomará la siguiente forma:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           loading: false,           character: {}       }   }     componentDidMount() {       this.setState({loading: true})       fetch("https://swapi.co/api/people/1")           .then(response => response.json())           .then(data => {               this.setState({                   loading: false,                   character: data               })           })   }     render() {       const text = this.state.loading ? "loading..." : this.state.character.name       return (           <div>               <p>{text}</p>           </div>       )   } } export default App 

Ahora, al cargar datos, aparece la inscripción loading... brevemente, y luego se muestra el nombre del personaje en la página.

Resumen

En esta lección, completó el trabajo en una aplicación Todo y aprendió a usar el método del ciclo de vida del componentDidMount() y la API Fetch estándar para cargar datos de fuentes externas, procesarlos y mostrarlos en las páginas. Además, aquí hablamos sobre la implementación de un mecanismo para notificar al usuario sobre la aplicación que realiza operaciones, lo que puede llevar mucho tiempo. La próxima vez hablaremos de los formularios.

Estimados lectores! ¿Cómo se cargan datos de fuentes externas en las aplicaciones React?