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

Clase 24 de 37 • Curso de React.js 2019

Resumen

Una llamada a una API es un proceso asíncrono, es decir que lo comenzamos pero no sabemos cuándo acabará. Por lo mismo la función a escribir debe ser asíncrona.
La llamada se hará usando fetch que es una función de JavaScript que al pasarle una dirección de internet, hará una petición GET y lo que sea que exista ahí será devuelto.

Matias Sebastian Perez

student•

Hablando de rick and morty, richard se parece mucho a este personaje :D

Tomás Alegre

student•

SOLENYA!!!!!!

Bernardo Aguayo Ortega

student•

JAJAJA

Aaron Felipe Isaacs

student•

Súper! 🤗

Diego Fernando Rojas Quintero

student•

👋Hola afisaacs, ¿como puedes hacer un gif de tu monitor y como la subes a platzi?

Lalo Díaz

student•

Hola, Diego Rojas. Lo puedes hacer grabando pantalla e importarlo a algún editor de video para que lo exportes en .gif

Alfonso Navarro

company_admin•

Huy profe en este video no se tomo la pastilla ajjajajaj

Andrés Campuzano Garzón

student•

Jajajajajajajajajaja

Luis Paredes

student•

JAJAJAJAJJAJAJAJJAJAJA

Jasan Azael Hernández Bautista

student•

La API rickyandMorty no tiene habilitados los cors, que hacen que puedamos hacer consultas desde una conexión http: lo acepta protocologos https, por ello creen un otra API en nodejs que lo único que hace es ser el intermediario, o mejor conocido como un middlewareo pegamento de código, y lo que hace es hacer las peticiones a la API desde otra ruta que cree.

La API es la siguiente: https://rick-and-morty-api.now.sh/api/morty/:page

Esta API, solo deben pasarle el número de la página como parámetro en el request para que les traiga los characters que pediamos en la API de RickyAndMorty.

También ya hice el código e hice el deploy de la SPA que hace el profesor Richard sobre obtener los DATOS de rickyAndMorty, pueden revisar el link aquí: https://jasanhdz.github.io/rickAndMorty/

Si gustan revisar el código pueden revisarlo en mi github: https://github.com/JasanHdz/rickAndMorty Por favor si esta información les es util dejenme un like, y también en el repositorio de que de la SPA de rickyAndMorty. Gracias 😃

Rodolfo Ugalde Ochoa

student•

Mas que un excelente aporte. Gracias

Bernardo Aguayo Ortega

student•

gracias!!

Duvan Felipe Reyes lopez

student•

Este tipo es un capo, el mejor profesor que tiene Platzi!

ALONSO HERNANDO MUJICA TRONCOSO

student•

Aquellos que prefieran usar Skeleton para el loading : https://github.com/dvtng/react-loading-skeleton

Daniel Alcudia

student•

ah prro

Usuario anónimo

user•

es la que usa platzi :)

Esteban Ciudad

student•

Mi versión del proyecto del api de Rick and Morty, eliminé el boton e implementé que se cargue automáticamente una siguiente pagina de personajes del api.

https://q8jkn270wq.codesandbox.io/

Oscar Barajas Tavares

Team Platzi•

Muy buen proyecto, comparte con todos el código en github.

Esteban Ciudad

student•

gracias por tu feedback @gndx, aqui esta el enlace al código: https://github.com/eciudad/RAM-API

Juan Pablo Arnedo

student•

Pueden resumir el objeto con propiedad "data" usado:

{
	loading: true
	data
}

Si la propiedad y la variable tienen el mismo nombre no es necesario escribirlo dos veces (data: data)

Jeith S Carrillo A

student•

bueno yo hice el ejercicio en el api que veníamos manejando y con los datos de breaking bad. asi quedo :

Habith José Mendoza Martínez

student•

Platzi Badges con la Api de Rick and Morty

Nicolas Esteban Prieto Sarmiento

student•

Felipe Jurado Murillo

student•

Esta genial!!! Podrias compartir tu codigo por favor??

Ernesto Vizcaíno Alvarado

student•

El codigo del index.js

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";
import data from "./data.json";
import logo from "./images/logo.png";

function CharacterCard(props) {
  const { character } = props;

  return (
    <div
      className="CharacterCard"
      style={{ backgroundImage: `url(${character.image})` }}
    >
      <div className="CharacterCard__name-container text-truncate">
        {character.name}
      </div>
    </div>
  );
}

class App extends React.Component {
  render() {
    return (
      <div className="container">
        <div className="App">
          <img className="Logo" src={logo} alt="Rick and Morty" />

          <ul className="row">
            {data.results.map(character => (
              <li className="col-6 col-md-3" key={character.id}>
                <CharacterCard character={character} />
              </li>
            ))}
          </ul>
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);