Crear cliente para consumir el API

Clase 23 de 58 • Curso Profesional de React con Redux 2016

Resumen

Vamos a crear nuestra API para consumir los datos, para esto usamos una librería que nos permite usar fetch en el navegador y en node

Para instalarla ejecutamos npm i -S isomorphic-fetch

Daniel Gonzalez Blanco

student•

Buenas, cuando te estas creador los recursos de la API, no entiendo esta parte dl codigo:
/posts?_page=${page}.
Que significado tiene la interrogacion, y para que le pasamos el parametro de nuero de pagina?
Gracias de antemano

Sergio Daniel Xalambrí

student•

/posts en la URL a la que hacemos la petición

El ? indica que desde ese punto vamos a empezar a pasar parámetros para que el servidor los procese, de esta forma el servidor puede mandar un resultado diferente dependiendo de estos valores (en nuestro caso el número de página que este API recibe con el nombre _page).

La razón de pasar el número de página es que más adelante implementamos un sistema de paginación para obtener más datos y mostrar más posts. Esto es para evitar traerse todos los posts (que pueden ser miles) y en vez de eso ir trayendo solo los necesarios.

Daniel Gonzalez Blanco

student•

Gracias… perfecto explicado

Dante Jauregui Yallico Jauregui Yallico

student•

Hola Sergio! porque tus archivos “api.js” y “server.js” usas la extension “.JS”, y con los demas archivos usas la extension “.JSX”??

es una buena practica? cuando colocar .jsx o .js segun tu experiencia? 😃

Sergio Daniel Xalambrí

student•

Usas .jsx para los archivos que exportan un componente de React.
Usas .js para todos los demás archivos JavaScript.

Jesus Sandrea

student•

Donde puedo conseguir el repo del curso?

David Toca

student•

aqui https://github.com/sergiodxa/react-course-project

Jonathan Huertas

student•

¿Por qué anteponer el await en la constante data, la promesa de la peticioón ya no ha sido resuelta en la constante response, es una buena practica en react?

Sergio Daniel Xalambrí

student•

La función response.json() devuelve una promesa, necesitamos usar await entonces para que data tenga los datos y no una promesa.

David Camacho

student•

Una función asíncrona puede contener una expresión await, que detiene la ejecución de la función asíncrona y espera la resolución de la Promise pasada, y después continúa la ejecución de la función async y devuelve el valor resuelto.

Michel Daniel Betancourt Gil

student•

Buenas sergio, usando graph-ql tambien funciona ese isomorphic-fetc?

Sergio Daniel Xalambrí

student•

No lo necesitas, los clientes de GraphQL lo hacen por vos, pero sí también sirve.

Felipe Ruiz

student•

Dejo este link para quien no recuerda como funcionaban las promesas. Recomiendo repasar la clase de Async-Await de Fundamentos de JS:
Fundamentos de JS: Async - Await

Alexander Silvera

student•

Pregunta: Como debería de consumir una api en producción? Ya que en todos los cursos se utilizan api de ejemplo ya creadas, y me gustaría ver como debo de crear una api propia con este ejemplo de una web que suba post.

Diego Forero

Team Platzi•

Tienes que estudiar un lenguaje de backend como python, php, ruby, java o JavaScript para aprender hacer un API, el consumir un API se hace igual ya sea una API propia o una que ya esta disponible, los principios son los mismos.

Alexander Silvera

student•

ok entonces en los cursos de backend de platzi se aprende ha realizar una API??

Miriam Gisella Mendoza Pilco

student•

Una pregunta, quiero saber si en cada componente (archivo js), puede tener un state que lo defina ó es una para todos ?.
Me estoy confundiendo

Victor Manuel Segura Garrido

student•

el video se queda trabado, con el spinner, no hay video no funciona, no se puede ver el video

Diego Forero

Team Platzi•

Prueba el serverD lo puedes seleccionar en el icono del engrane.

CRISTIAN DAVID VILLOTA JACOME Villota J

student•

Cómo consumo los daos de un jason web tocken? Para almacenar el tocken y dependiendo de ello dar acceso a ciertas partes de la app?

Diego Forero

Team Platzi•

El funcionamiento básico es cuando el usuario hace login en tu aplicación tu generas el token usando JWT, eso lo asignas en la sesión del usuario o en una cookie, y cada petición que haga el usuario tiene que enviar ese valor del JWT y tu validas que el token que esta enviando sea igual al que tienes almacenado.

Esto no solo tiene que ver con el frontend, también tiene que ver con backend.

Arquimedes

student•

Hola sergio, como seria un cliente API en un proyecto grande ? crearias un api.js en cada feature ? o tendrias un archivo gigante con los requests alli?

Sergio Daniel Xalambrí

student•

Crearía un archivo por cada endpoint del API y luego los importaría como import users from 'api/users';. Pero solo haría la division por endpoint del API si el API es muy grande, pero no si el proyecto en frontend en grande.

Arquimedes

student•

Me suena a los Services que usabamos en angular

Juan

student•

(${baseUrl}/posts?_page=${page}); que significa esto q no entiendo alguien me puede ayudar o donde puedo buescar informacion mas del tema gracias

David Camacho

student•

baseUrl = https://jsonplaceholder.typicode.com

Lo que quiere decir que lo que estas colocando ahí es esto:
https://jsonplaceholder.typicode.com/posts/1

Si colocas esa url en el navegador, veras que te esta devolviendo un objeto con datos, que supongo son los que vamos a usar mas adelante en el curso…

A const response se le indica que espere (await) a que fetch en la url de arriba responda, entonces await lo que hace es que cuando se completa la promesa de fetch, te devuelve un objeto con los datos de esa respuesta.

Francisco J Jimenez H

student•

me podrias decir que significa fetch() pls 😃

Sergio Daniel Xalambrí

student•

Es una función, que sirve para hacer peticiones HTTP.

Francisco J Jimenez H

student•

gracias profe 😃

Adrián Natividad Hernandez León

student•

Cual es mas recomendable usar isomorphic-fetch o este que es nativo:

fetch(this.props.gRuta+"/siag/api/v1/PresupuestoEgresosAprobado",{
	headers: {
		'Accept': 'application/json',
		'Content-Type': 'application/json'
	},
	method: "POST",
	body: JSON.stringify({
		documento_fuente: this.state.iDoctoFuente,
      		folio_documento_fuente:  this.state.iFolioDoctoFuente
	})
})

Sergio Daniel Xalambrí

student•

isomorphic-fetch es un polyfill, en navegadores donde Fetch funciona vas a seguir usando la versión nativa, si el navegador no soporta Fetch entonces usa una implementación propia que sigue el mismo API y en Node.js (por eso es isomorphic) como Fetch no existe entonces usa la implementación propia.

Entonces lo mejor es que uses isomorphic-fetch.

Adrián Natividad Hernandez León

student•

Muchas gracias!

Adrián Natividad Hernandez León

student•

Hola Sergio que tal, me preguntaba como seria por ejemplo manejar un insert usando isomorphic-fetch, como se especificaria el headers, method y body, este es mi ejemplo usando el fetch nativo, pero si quiero usar isomorphic-fetch ¿como seria?

fetch(this.props.ruta+"/siag/api/v1/PresupuestoEgresosAprobado",{
	headers: {
		'Accept': 'application/json',
	  	'Content-Type': 'application/json'
	},
	method: "POST",
	body: JSON.stringify({
		documento_fuente: this.state.iDoctoFuente,
		folio_documento_fuente:  this.state.iFolioDoctoFuente
	})
})
.then((response)=>{
	return response.json()
})
.then((res)=>{
	
})
.catch((res)=>{ 

 })

Sergio Daniel Xalambrí

student•

isomorphich-fetch es un polyfill de Fetch nativo y como tal usa el mismo API, aka es exactamente igual.

MIG ADVERTISING ESPAÑA LAURA LOMBILLA

student•

Que tal Sergio, estoy empezando con esto de React y siguiendo tus videos para hacer un login a una api. Te comento mi duda. Esto es parte del código del componente Login.

  constructor(props)
  {
    super(props)

    this.state = {
      loading: false,
      user: { email: '',
              password: '',
              clientcode: ''},
    };

    // This binding is necessary to make `this` work in the callback
    this.handleSubmit = this.handleSubmit.bind(this);
  }


  handleSubmit(e) {

    e.preventDefault()

    const user = {email:e.target.email.value,
                  password:e.target.password.value,
                  clientcode:e.target.clientcode.value}

    console.log(user);

    this.setState({user})

    console.log(this.state.user);

    const post = api.posts.login(this.state.user)

    console.log(post);


  }

El caso es que el console.log(user) tiene el valor correcto con el email, clave y código de cliente. Sin embargo, cuando hago el setState, el console log this.state.user sale vacio

Crear cliente para consumir el API

Bienvenido al curso

Actualizaremos este curso pronto

Bienvenido al curso de React

Fundamentos

¿Qué es React?

Hola Mundo con React

¿Qué es y cómo funciona el Virtual DOM?

Introducción a JSX

Creación de componentes

Componentes Puros vs de Estado

Ciclo de vida de un componente

Ciclo de vida de componentes

Manejo de eventos del DOM

Event handlers con parámetros personalizados

Contexto de la aplicación

Componentes de Alto Orden (HOC) y Mixins

Creación del proyecto

Presentación del proyecto

Instalación de Node.js y usando npm

Estructura de archivos

Iniciar un servidor de render básico - Render en Server

Module bundlers en JavaScript

Configurar Webpack para el servidor de render

Crear una app con React y React Router

Manejo de rutas en el servidor con React Router

Crear cliente para consumir el API

Iniciar la app en el navegador y configurar Webpack para producción

Iniciar un servidor de estáticos con zeit/list

Herramientas de desarrollo de React

Consumir el API y mostrar datos en la home

Perfil de usuarios

Estado de cargando y detalle de post

Paginación de posts mediante scroll infinito

Mostrar listado de comentarios en cada post

Estilizar componentes con CSS Modules

Linter y buenas prácticas con ESLint

Internacionalización con React Intl

Deploy a producción

Implementación de Redux

Patrones de arquitectura de aplicaciones Frontend

Implementación inicial con Redux para los posts

Uso de middlewares

Acciones asíncronas

Dividir el reducer en funciones más pequeñas y combinarlas

Datos inmutables con Immutable.js

Herramientas de desarrollo

Conclusiones

Pruebas automatizadas de reducers

Pruebas de componentes de React

Actualizando a la última versión de React Router

Desafíos

Cambiar el título de la página dependiendo de la ruta (en el servidor y cliente)

Implementar Redux en perfíl de usuario y detalle de un post

Cargar datos iniciales en el servidor

Desafío especial

Contenido bonus

Glosario

Evitar que webpack genere el CSS durante el build del servidor

LazyLoad de imágenes

Animaciones con ReactCSSTransitionGroup

Server render con Next.js

Aplicaciones universales/isomórficas

Iniciar proyectos con create-react-app

Diplomado de desarrollo de aplicaciones con ReactJS