Solicitando datos (GET)

Clase 25 de 37 • Curso de React.js 2019

JAIME URQUIZU

student•

Para esta clase es necesario hacer ciertas cosas antes o no funcionará nada correctamente y no sabréis por qué. Falta un trozo de vídeo (creo) en la edición, y no se explican unos pasos intermedios necesarios. Estos pasos se entienden si se hacen y luego se mira el vídeo.

Lo primero, tenéis que descargaros 2 cosas, la carpeta ‘server’ junto con el archivo ‘api.js’. La carpeta server entera, a la altura de la carpeta src. El archivo api.js debe estar dentro de src. Lo tenéis todo en 'Archivos y Enlaces' arriba a la derecha.

Seguidamente es necesario abrir la terminal e instalar las siguientes dependencias:

faker (Crea un servicio 'falso' de datos para nuestra petición a la api creada por Richard) json-server (Crea nuestra falso puerto 3001 para la petición a la api) npm-run-all (cuidado, no es run-all que también existe)

Se pueden hacer al mismo tiempo todas:

npm install faker json-server npm-run-all --save-dev

Finalmente entramos en el archivo ‘package.json’ y reescribimos los ‘scripts’ para que quede de la siguiente forma:

“scripts”: { “start”: “npm-run-all -p client server”, “client”: “react-scripts start”, “server”: “json-server --port 3001 --watch server/db.json”, “seed”: “node server/seed.js”, “build”: “react-scripts build”, “test”: “react-scripts test”, “eject”: “react-scripts eject” }

Explicados:

“start”: “npm-run-all -p client server”, Ejecuta todos los scripts a una

“server”: “json-server --port 3001 --watch server/db.json”, Crea un servidor falso con un puerto 3001 y unos datos que busca la api en el archivo especificado.

“seed”: “node server/seed.js”, Crea los datos falsos

Volvemos a la terminal y tecleamos:

npm run start

¡¡¡Listo!!!

Albert González Rossell

student•

Muchas gracias, sin tu aporte no hubiera entendido lo que me faltaba para que funcionase...

Andres Leon

student•

gracias...!!!!

Aaron Felipe Isaacs

student•

Pau Pregoni Juan

student•

Necesitamos más cursos con este profesor, es por lejos lo mejor de Platzi. Si pudiera hackearía platzi para ponerle 6 estrellas, hasta en inglés es difícil encontrar material de esta calidad!! impecable.

José María Cuevas Ramírez

student•

Totalmente de acuerdo!

Leonardo Rodriguez

student•

el dicta el de profesional en JavaScript muy bueno tambien. muy pro el profe!

Alexis Alberto Texis Auza

student•

Hola compañeros les comparto una api publica que desarrolle para que puedan probar: https://platzi-badges.herokuapp.com -> URL_BASE

ENDPOINTS: URL_BASE/api/v1 -> GET(Todos los registros) URL_BASE/api/v1/:id -> GET(Un solo registro) URL_BASE/api/v1/:id ->DELETE URL_BASE/api/v1/:id -> PUT URL_BASE/api/v1 -> POST,esquema de datos a enviar -> { name, lastName, job, email, twitter } Mi demo Platzi Badges : https://platzi-bagdes.now.sh/

Carl Lewis Castillo

student•

Saludos. Que has usado en el Back-End para crear la api?

Alexis Alberto Texis Auza

student•

Hola carllewisc,use Node js(Express)

Melissa González Nebrijo

student•

Casi que no soluciono este error, porque al parecer sí falta una parte del video o una clase completa. ![](

Fadith Enrique Escorcia Mujica

student•

Graciaaaas!

JESUS IVAN MENDOZA CONTRERAS

student•

muchas gracias por tomarte el tiempo de explicarnos esto

Diego Fernando Rojas Quintero

student•

👋Hola chicos, para todos aquellos que tienen problemas en ejecutar la api en el navegador, este consejo es muy util debido a que el profesor se le olvido mencionar este dato para que nuestra API funcione ó puede ser que no dieron relevancia a la hora de publicar esta clase. SIGAN ESTOS CONSEJOS.

Si clonaste el proyecto o si eres como yo que inicializo el proyecto desde cero con ++npx create-react-app my-app.++ Instala las siguientes dependencias en tu terminal

npm i faker -D

npm i json-server -D

npm i npm-run-all -D

Verifica si tienes la carpeta server con todo su contenido (db.json y seed.js) en la raíz del proyecto y el archivo api.js que esta en la ruta ++src => api.js++, si no lo tienes deberás buscarla en ++Archivos y Enlaces ++ de la clase, en insertarla en la carpeta donde se encuentra tu proyecto.
Verifica si tienes los siguientes scripts en tu archivo package.json

"scripts": {
    "start": "npm-run-all -p client server",
    "client": "react-scripts start",
    "server": "json-server --port 3001 --watch server/db.json",
    "seed": "node server/seed.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Si no lo tienes. Borras los que tienes en tu package.json e inserta estos scripts.

Escribe npm start para ejecutar el proyecto.

++Dale un like en ❤ si te ayudo esta recomendación++

Juan Pablo Calao Pérez

student•

Muchísimas gracias

Torcoroma Arias Arias

student•

excelente no encontraba el archivo api.js y lo encontré gracias a tu información

Camila Grizio

student•

muy confusa la clase anterior(me costo entender el flujo del curso con la clase promocional en el medio)

Gabriel De Andrade

student•

Hola! Te entiendo, de todas maneras tienes alguna duda específica? Te podemos ayudar en lo que necesites :D

Rodrigo Rodriguez

student•

Tal cual , lo dices, veniamos hablando de Platzi Badges y pasamos a otra cosa, es como que te descoloca.

Wilson Alejandro Gonzalez Gaitan

student•

Creo que hay una inconsistencia entre el vídeo y lo que llevamos, debido que la ultima vez la clase badges.js quedo de esta manera

<import React from 'react';
import '../components/styles/Badges.css'
import confLogo from '../components/images/badge-header.svg'
import BadgesList from '../components/js/BadgesList'
import { Link } from 'react-router-dom'

class Badges extends React.Component {
    constructor(props) {
        super(props);
        console.log('1. constructor()');

        this.state = {
            data: [],
        };
    }

    componentDidMount() {
        console.log('3. componentDidMount()');

        this.timeoutId = setTimeout(() => {
            this.setState({
                data: [
                    {
                        id: '2de30c42-9deb-40fc-a41f-05e62b5939a7',
                        firstName: 'Freda',
                        lastName: 'Grady',
                        email: 'Leann_Berge@gmail.com',
                        jobTitle: 'Legacy Brand Director',
                        twitter: 'FredaGrady22221-7573',
                        avatarUrl:
                            'https://www.gravatar.com/avatar/f63a9c45aca0e7e7de0782a6b1dff40b?d=identicon',
                    },
                    {
                        id: 'd00d3614-101a-44ca-b6c2-0be075aeed3d',
                        firstName: 'Major',
                        lastName: 'Rodriguez',
                        email: 'Ilene66@hotmail.com',
                        jobTitle: 'Human Research Architect',
                        twitter: 'MajorRodriguez61545',
                        avatarUrl:
                            'https://www.gravatar.com/avatar/d57a8be8cb9219609905da25d5f3e50a?d=identicon',
                    },
                    {
                        id: '63c03386-33a2-4512-9ac1-354ad7bec5e9',
                        firstName: 'Daphney',
                        lastName: 'Torphy',
                        email: 'Ron61@hotmail.com',
                        jobTitle: 'National Markets Officer',
                        twitter: 'DaphneyTorphy96105',
                        avatarUrl:
                            'https://www.gravatar.com/avatar/e74e87d40e55b9ff9791c78892e55cb7?d=identicon',
                    },
                ],
            });
        }, 3000);
    }

    componentDidUpdate(prevProps, prevState) {
        console.log('5. componentDidUpdate()');
        console.log({
            prevProps: prevProps,
            prevState: prevState,
        });

        console.log({
            props: this.props,
            state: this.state,
        });
    }

    componentWillUnmount() {
        console.log('6. componentWillUnmount');
        clearTimeout(this.timeoutId);
    }

    render() {
        console.log('2/4. render()');
        return (
            <React.Fragment>
                <div className="Badges">
                    <div className="Badges__hero">
                        <div className="Badges__container">
                            <img
                                className="Badges_conf-logo"
                                src={confLogo}
                                alt="Conf Logo"
                            />
                        </div>
                    </div>
                </div>

                <div className="Badges__container">
                    <div className="Badges__buttons">
                        <Link to="/badges" className="btn btn-primary">
                            New Badge
              </Link>
                    </div>

                    <BadgesList badges={this.state.data} />
                </div>
            </React.Fragment>
        );
    }
}

export default Badges;>

Andres Felipe Jerez Giraldo

student•

Hola bro, puede que si, pero es irrelevante, la clase anterior, sin contar el video abierto muestra los estados del ciclo de vida de los componentes, indiferente de que estemos navegando el ciclo de vida, el componente no tiene mayor cambio significativo. Por lo que no es taan importante tenerlo en el componente. Cualquier duda me comentas.

Yulieth Lubo

student•

Noté lo mismo, lo que hice fue crear un Branch en mi Repositorio para guardar allí éstos cambios y volví a un Commit anterior con el otro Branch, donde estaba el código como quedó antes de la clase pasada, y de ésta forma poder continuar.

Vander Idme

student•

Jimmy Buriticá Londoño

student•

Buena infografía

Alondra Peña

student•

Que genial se ve tu infografía ¿en qué programa lo hiciste?

Andrés Campuzano Garzón

student•

La clase está incompleta, para que les funcione el código deben de hacer lo siguiente:

-Deben de descargar la carpeta server junto a sus dos archivos (Archivos y enlaces de esta clase). -Deben de instalar: npm i faker json-server npm-run-all --save-dev -En el package.json deben de cambiar estas líneas:

&quot;scripts&quot;: {
		&quot;start&quot;: &quot;npm-run-all -p client server&quot;,
		&quot;client&quot;: &quot;react-scripts start&quot;,
		&quot;server&quot;: &quot;json-server --port 3001 --watch server/db.json&quot;,
		&quot;seed&quot;: &quot;node server/seed.js&quot;,
		&quot;build&quot;: &quot;react-scripts build&quot;,
		&quot;test&quot;: &quot;react-scripts test&quot;,
		&quot;eject&quot;: &quot;react-scripts eject&quot;
	},

Más detalles: https://platzi.com/comentario/944679/

Rodrigo Rodriguez

student•

Gracias !

Andrés Alberto García Ardila

student•

Para esta clase si han trabajado con un proyecto creado a través del comando npm create-react-app my-app en necesario que vayan al repositorio del proyecto en:

https://github.com/Sparragus/platzi-badges/tree/15.MejorandoElUXDeUnaPeticion

De allí tomar y agregar a su proyecto la carpeta ‘server’ junto con el archivo ‘api.js’.

Seguido a esto deben instalar las siguientes dependencias:

npm install faker --save-dev npm install json-server --save-dev npm install npm-run-all --save-dev

Finalmente modifiquen el archivo ‘package.json’ en el objeto ‘scripts’ para que quede de la siguiente forma:

De esta forma podrán continuar con la practica sin ningún inconveniente.

Jose Luis Campos Bautista

student•

Pueden también ayudarse de este post ljso-server

Victor Hugo Cortés Posada

student•

en el render, no es necesario comparar el estado loading si es === true, con solo dejar

if(this.state.loading) { ... }

funciona sin problema.

también podemos resumir el código cuando cambian el estado, en JS ES6 permite

this.setState({loading:false, error});

//ES6 Asignación “clave:valor” en un objeto En los objetos, no siempre es necesario poner la clave:valor. Cuando en las llaves, se pone sólo la variable, el objeto tendrá de clave el nombre de la variable. Es decir:

this.setState({data:data}) === this.setState({data})

Otra cosa a mejorar es el uso de destructuring. Para no estar repitiendo el this.sate dentro del render() varias veces, puedes hacer:

render() {
	const {loading, error, data} = this.state
	if(loading) return 'Loading...'
	if(error) return `Error: ${error.message}`
...}

Jose Luis Campos Bautista

student•

Para comprender mejor de como funciona el segundo servidor que provee los datos pueden leer el siguiente post .

Daniel Páez

student•

Gracias por compartirlo Luis, parare un poco y lo leo! Precisamente buscaba una lectura como esas de las APIs

Juan Carlos Ortiz Huamán

student•

Para los que aun les sigue arrojando error de map, revisen el archivo package.json en el repositorio, hay nuevos paquetes de node, como json-server, npm-run-all, y faker y nuevos scripts que les permitira correr el servidor en el puerto 3001 y el cliente con un solo comando; ademas de ello hay un archivo db.json que esta en la carpeta "server" del repositorio. Terminado eso ya podran correr todo normal con el comando "npm start"

Cristian Emmanuel Castillo Medina

student•

Gracias :)

Jansen Peña

student•

Yo instalé las dependencias y seguía con el error de map hasta que me dí cuenta que me faltaba adicionar el await en fetchData:

fetchData = async () => {
    this.setState({ loading: true, error: null });
    try {
      const data = await api.badges.list();
      this.setState({ loading: false, data: data });
    } catch (error) {
      this.setState({ loading: false, error: error });
    }
  };

Recuerden que para adicionar el await hay que definir fetchData como una función asíncrona.

Jose Luis Gutierrez Carcausto

student•

Un aporte, { data:data }

es igual a

{data}

Rubén Padilla

student•

👋 Tienes razón. Es una sintaxis que nos provee ES6 y se puede usar cuando el nombre de la propiedad coincide con el valor asignado a ella.

/* ES5 Syntax */
const objeto = {
  a: a,
  b: b
};

/* ES6 Syntax  equivalent */
const objeto = { a, b };

Require Object Literal Shorthand Syntax (object-shorthand)

Saludos!

Sebastián Córdoba

student•

No olviden copiar el archivo api.js que se encuentra en la carpeta src (pestaña de archivos y enlaces) y verificar en raíz de su proyecto, si tiene la carpeta server con los archivos db.json y seed.js

Una vez realizado esto ejecuté el comando

npm install faker json-server npm-run-all --save-dev

Jose Alvarez

student•

xq esto no se explico en el video. ?

Jose Alvarez

student•

como arranco el servidor 3001

Nicolás Posa

student•

En esta pagina podes crear tu animación de carga

ANGEL DAVID SULBARAN CALDERON

student•

Solicitando datos (GET)

En esta clase, nuestra meta es usar datos reales que vengan de una API a nuestra aplicación, hasta ahora todos los datos que hemos utilizado han sido simulados los HardCodeamos en la aplicación y los presentamos, ya aquí conocemos los 3 estados de una petición a un API, usaremos esos mismos estados para realizar la petición y usar datos reales.

Vamos a nuestro archivo de Badges aquí ya teníamos unos datos que estábamos simulando y le diremos que los datos no están definidos aun.

Primero lo primero, nos dirigiremos a nuestro archivo de badges y eliminaremos los datos simulados para colocarlos de manera undefined

   state = {
        loading: true,
        error: null,
        data: undefined
    }

Loading lo vamos a inicializar en “true” porque cuando cargue esta pagina lo primero que vamos a hacer es cargar los datos y asi los inicializamos y por ultimo, aun no tenemos “error” por lo que vamos a colocarlo nulo.

Si vamos a nuestra app y la revisamos, nos daremos cuenta de que nos dira que “map” es undefined, lo que sucede es que dentro de badges, este esta sin definirse “data” esta sin definirse porque asi lo hemos colocado, por lo que nuestro siguiente paso seria manejar el estado donde loading sea cierto.


    render(){

        if (this.state.loading === true){
            return 'Loading...';
        }

Luego de esto comenzaremos a trabajar en la petición. El mejor lugar para comenzar a trabajar en una petición de un API es en el componentDidMount, eso nos asegura que el código de nuestro componente ya esta listo, cualquier efecto secundario o llamada exterior a una API los podemos hacer con seguridad de que nuestro datos están listos para recibirlos

class Badges extends React.Component {
    
    state = {
        loading: true,
        error: null,
        data: undefined
    }

    componentDidMount () {
        this.fetchData()
    }

    fetchData= () =&gt; {
        this.setState( { loading: true, error:null })
    }

Luego de esta crearemos nuestro metodo fetchData y la declararemos abajo en el cual declararemos igualmente nuestro setState pasandole los valores de “{loading: true, error: null}” esto es porque es posible que un futuro volvamos a llamar a fetch data en cuyo caso que nea la primera vez, loading se habría vuelto falso por lo que hay que regresarlo a cierto y el error si ya existía, hay que cancelarlo, hay que regresarlo a null.

El segundo paso es comenzar la llamada a la API, eso lo vamos a hacer con un TryCatch de manera que;

    try {
        const data = []
        this.setState({ loading: false, data: data })
        
    } catch (error) {
        this.setState({ loading: false, error: error })
        
    }

Ahora desglosando el siguiente código, lo que estamos haciendo es pasarle inicializar nuestra data vacía, para si tenemos suerte y sale todo bien, recibimos datos y esos datos vamos a guardarlos en nuestro estado mas abajo, le decimos que loading ya acabo y los datos allí están y en caso de que hubiese un error, le estamos diciendo que loading ya acabo y que tenemos un error y lo queremos guardar.

Para hacer la llamada a la API hemos creado un archivo que s un tipo de librería que nos ayudara, es un raper o una librería para hacer una llamada al servidor local que ya estamos corriendo, haciendo la llamada al localhost.

Crearemos nuestro archivo “api.js” en nuestra carpeta “src” y le pegaremos el archivo proporcionado en el curso y la importaremos a badges

import React from 'react';
import { Link } from 'react-router-dom';

import './styles/Badges.css';
import confLogo from '../images/badge-header.svg'
import BadgesList from '../components/BadgesList';

import api from '../api'

Y hacemos nuestra llamada;

       try {
            const data = api.badges.list();
            this.setState({ loading: false, data: data })
            
        } catch (error) {
            this.setState({ loading: false, error: error })
            
        }

Dejando asi data en vez de vacia, hacemos la llamada a badges donde queremos la lista de todos los badges, pasa que esta es una llamada asíncrona regresa una promesa, lo que podemos hacer aca es usar async await para esperar la contestación pero para poder declarar await, debemos declarar nuestra función como async de manera que;


    fetchData= async () =&gt; {
        this.setState( { loading: true, error:null })

        try {
            const data = await api.badges.list();
            this.setState({ loading: false, data: data })
            
        } catch (error) {
            this.setState({ loading: false, error: error })
            
        }

Si en nuestra constante de data ocurriese un error, entonces la llamada va a ser rechazada, la promesa se rechaza y tira error, por eso es que tenemos un tryCatch, si aquí hay error, lo capturamos en nuestro error y lo guardamos en el estado.

Si observamos nuestra pagina y la recargamos, podremos notar que nuestro loading se queda allí un rato y luego nos carga la lista de los miniBadges, es decir obtenemos los resultados y los presentamos, es posible que ;la llamada en lugar de regresar datos, regresa dato pero vacio, hagamos la prueba para ello. Vamonos a api.js y simulemoslo.

Colocaremos en nuestro código el siguiente arreglo vacio

const api = {
  badges: {
    list() {
        return [];
      //return callApi('/badges');
    },

Comprobaremos que no habrá ningún dato en nuestra pagina luego de esto.

Manejemos este caso porque no queda bien la interface cuando los datos regresan vacios de esta manera y pudimos haber presentado el estado de un dato vacio, para ello vamos a BadgesList;


class BadgesList extends React.Component {
  render() {
    if(this.props.badges.length === 0){
      return(
        &lt;div&gt;
          &lt;h3&gt;No badges were found&lt;/h3&gt;
          &lt;Link className=&quot;btn btn-primary&quot; to=&quot;/badges/new&quot;&gt;
            Create new badge
          &lt;/Link&gt;
        &lt;/div&gt;
      )
    }

Con esto lo que hacemos es que si no recibimos ninguna data en nuesta primse, se le indicara a la pagina que nos de el mensaje de que no obtuvimos una respuesta fructífera y daremos la opción de crear un nuevo badge con nuestro sistema creado previamente, recordando importar “Link” de react router en la parte de arriba.

Luego de esto, vamos a nuestra pagina, nos vamos a badges list y vemos que nuestro botón nos lleva a la app, todo perfecto, pero esto fue una simulación asi que vamos a hacer ahora el trabajo real, nos vamos a api.js y eliminamos el estado vacio que agregamos y reactivamos nuestro llamado a la api como lo teníamos previamente.

Ahora nos falta el último caso, el cual es donde tenemos un error, para ello vamos a hacer lo siguiente en lugar de regresar datos, automáticamente, tiraremos un error de manera que ;

const api = {
  badges: {
    list() {
        throw new Error('Not Found')
      //return callApi('/badges');
    },

Luego de esto vamos a nuestro archivo Badges.js Y agregamos otra condicional en render de manera que;


        if (this.state.error){
            return `Error: ${this.state.error.message}`;
        }

Lo que hara que al momento de recibir el state de error nos colocara nuestro mensaje en display

Erick Vicentin

student•

Por lo que vi se olvido de informar que acá no esta ninguna parte del código que se vio en el video de ciclo de vida practico de los componentes. Es decir el constructor, componentDidMount, componentWillUnmount... deberia informar al principio ya que sino es confuso.

Luis Felipe Medina Rodriguez

student•

Facundo Colavini

student•

Que mal por que siempre pasa esto con los cursos de platzi empiezan bien ,explican muy bien, pero siempre cortan el curso agregan un video nada que ver y a la hora de volver con el curso de antes falta algo y justamente esperaba esta parte bien explicada. Dé todas formas me gusta mucho el curso ojala lo actualicen no mas

Solicitando datos (GET)

Introducción a React.js

¿Qué es React.js?

Pre-requisitos

Herramientas que usaremos

Create-react-app

Fundamentos

Clonar el código de GitHub

ReactDOM.render

JSX

Creación y diseño de componentes

¿Qué es un componente?

Qué es y cómo funciona un componente en React.js

Nuestro primer componente

Cómo aplicar estilos

Props

Nuestra primera página

Enlazando eventos

Manejo de estado

Levantamiento del estado

Listas de componentes

React Router

Introducción a React Router

División de la aplicación en rutas

Mejorando la User Interface con un Layout

Component Lifecycle

Introducción del ciclo de vida de un componente

Práctica del ciclo de vida

Llamadas a un API

Introducción llamadas a un API

React.js: Cómo traer datos de un API en React

Solicitando datos (GET)

Mejorando la Experiencia de Usuario durante una petición

Enviando datos (POST)

Manejando los estados de la petición durante el POST

Actualizando datos (PUT)

Actualizaciones automáticas

Mejorando la UI

Los detalles de un Badge

UI Components y Container Components

Portales

Modales

Hooks

Search filter

Conclusion

Conclusión