Índice del curso de ReactJS

  1. Instalación y configuración inicial
  2. Estructura básica de un proyecto con ReactJS
  3. JSX
  4. Recogida de datos
  5. State
  6. Componentes
  7. Props
  8. Renderizado condicional
  9. Arrays
  10. Style
  11. Valor por defecto de una combo
  12. React router
  13. Fetch API
  14. Context API
  15. Login
  16. Redux
  17. React Developer Tool
  18. Sockets
  19. Build
  20. TypeScript
  21. React Native
  22. Expo
  23. React native
  24. Navigation
  25. Compilar con Expo en la nube
  26. Create React App
  27. Compartir código entre React Web y React Native. Dos aproximaciones:
    1. Empaquetar con NPM
    2. Importar código desde fuera del proyecto pero en el propio ordenador
    3. Importar código con prototype

Fetch API

Cuando queremos recuperar datos de un servidor, debemos usar el método useEffect para ejecutar la petición al servidor sólo cuando el componente se monta. De lo contrario, lo que ocurriría es:

  1. Al renderizar el componente App se haría la petición al servidor.
  2. Cuando la información llega del servidor, cambiaría el estado de la variable name
  3. Al cambiar el estado de la variable, se generaría otro render.
  4. Al ejecutarse otro render, volveríamos al paso 1, y así seguiríamos indefinidamente.

Ejemplo básico, usando then

./app.jsimport React, {useEffect} from 'react';

const App = () => {
  const [name, setName] = useState(null);

  useEffect(() => {
    fetch('https://swapi.co/api/people/1') // hacemos la petición get
    .then(res => res.json()) // cuando hayamos terminado (then) parseamos a json la respuesta de la petición
    .then(res => setName(res.name)); // cuando hayamos terminado (then) actualizamos el estado nombre
  }, []); //Debemos usar los [] para que la petición sólo se ejecute cuando el componente se monte. De lo contrario se ejecutaría en cada render. Si ponemos una variable de estado dentro de los [], la petición se ejecutárá cada vez que esa variable cambie.
  return <p>{name}</p>;
}

Estableciendo una abstracción de la función fetch

Con el fin de no repetir constantemente todo el código fuente de nuestras peticiones, que habitualmente siguen un patrón similar, podemos definir una librería a la que llamaremos y que contendrá todo ese códgio.

Haremos las peticiones get y post con getJSON y postJSON respectivamente. Ambos métodos utilizan la función fetchData

./http/index.jsconst API_URL = 'https://pokeapi.co/api/v2';

const fetchData = (url, options = {}) => {
  const { headers = {}, ...reqOptions } = options;
  console.log(headers)
  return fetch(API_URL + url, {
    headers: {
      'Content-Type': 'application/json',
      ...headers,
    },
    ...reqOptions,
  }).then(res => res.json())
};

export const getJson = (url, params, options) => {
  const urlParams = params && Object.entries(params)
    .reduce((acc, [name, value]) => `${acc}${name}=${value}&` , '?')
    .slice(0, -1);
  return fetchData(url + urlParams, options);
};

export const postJson = (url, params, options = {}) => {
  return fetchData(url, {
    method: 'POST',
    body:JSON.stringify(params),
    ...options,
  });
};

Utilizando la abstracción anterior

import React, { useState, useEffect } from 'react';
import { getJson } from '../src/http/index';

const App = _ => {
  const [pokemon, setPokemonState] = useState({});

  useEffect(() => {
    getJson('/pokemon/2', {}).then(res => {
      setPokemonState(res);
    });
  }, []);

  return <div>{pokemon.name}</div>
}
icono de mandar un mail¡Contacta conmigo!
Pablo Monteserín
contacta conmigoPablo Monteserín

Para dudas técnicas sobre los ejercicios de mis cursos es necesario estar suscrito.