Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial de React: Consuma una API JSON REST con Fetch y Styling UI con Bootstrap 4

 En este tutorial aprenderemos cómo construir una aplicación React que consume una API REST de terceros usando la API fetch (). También usaremos Bootstrap 4 para diseñar la interfaz de usuario.

Consumiremos una API de terceros disponible en este enlace .

También veremos algunos conceptos básicos de React como:

  • El stateobjeto para mantener el estado de la aplicación y el setState()método para mutar el estado.
  • El componentDidMount()método de ciclo de vida para ejecutar código cuando el componente está montado en el DOM.
  • Cómo incrustar expresiones de JavaScript en JSX usando llaves.
  • Cómo renderizar listas de datos usando el map()método y JSX y renderizar condicionalmente elementos DOM usando el &&operador lógico .

React es la biblioteca de UI más popular para crear interfaces de usuario creadas y utilizadas internamente por Facebook.

React tiene muchas características como:

  • Declarativo: React facilita la creación de interfaces de usuario interactivas al crear vistas para cada estado en su aplicación y permite que React represente los componentes correctos cuando cambian los datos.
  • Basado en componentes: cree componentes que tengan su propio estado y compóngalos para crear interfaces de usuario complejas.
  • Aprenda una vez, escriba en cualquier lugar: React se puede renderizar en el servidor usando Node y se puede usar para crear aplicaciones móviles nativas usando React Native .

Prerrequisitos

Necesitará los siguientes requisitos previos para completar con éxito los pasos de este tutorial:

  • Experiencia laboral de JavaScript,
  • Comprensión básica de las API REST,
  • Nodo y NPM instalados en su máquina. React es una biblioteca del lado del cliente, pero necesita Node.js para ejecutar la utilidad create-react-app que se puede usar para generar proyectos React y trabajar con ellos localmente. Puede instalar Node y NPM muy fácilmente obteniendo los binarios de su sistema desde el sitio web oficial . Una mejor manera es usar NVM o Node Version Manager para instalar y administrar fácilmente múltiples versiones activas de Node.

Si está listo, ¡comencemos!

Instalación de create-react-app

Usaremos la create-react-apputilidad para generar un proyecto de React con las mejores prácticas y scripts de desarrollo creados por el equipo oficial detrás de React. Abra una nueva terminal y ejecute el siguiente comando para instalar la utilidad en su sistema:

$ npm install -g create-react-app

Nota : tenga en cuenta que es posible que deba agregar sudoantes de ordenar en sistemas Debian y macOS para poder instalar npmpaquetes globalmente. También puede arreglar sus permisos npm para evitar usar sudoSi instaló Node y NPM usando NVM, esto se manejará automáticamente por usted.

En el momento de escribir este artículo, create-react-app v2.1.8 está instalado en nuestro sistema.

Crear un proyecto de React

Después de instalar create-react-app, usémosla para generar nuestro proyecto React. Regrese a su terminal y ejecute los siguientes comandos:

$ cd ~
$ npx create-react-app react-fetch-rest-api

Navegamos a la carpeta de inicio y emitimos el comando npx create-react-app para crear nuestro proyecto.

Nota : obviamente, puede navegar a cualquier carpeta que elija para su proyecto. npxes una herramienta que te permite ejecutar ejecutables desde la node_modulescarpeta, puedes encontrar más detalles en el sitio web oficial .

Espere a que finalice el proceso de instalación. ¡Esto puede tardar un rato!

A continuación, navegue hasta la carpeta raíz de su proyecto y ejecute el servidor de desarrollo con los siguientes comandos:

$ cd create-react-app react-fetch-rest-api
$ npm start

Su servidor de desarrollo local se ejecutará desde la http://localhost:3000dirección y su navegador web se abrirá automáticamente y se navegará a su aplicación React.

Dado que usamos un servidor de desarrollo de recarga en vivo, puede dejar la ventana de terminal actual abierta e iniciar una nueva para ejecutar el resto de los comandos de este tutorial. Después de cualquier cambio, su servidor se reiniciará automáticamente y su aplicación se volverá a cargar en vivo en el navegador.

Esta es una captura de pantalla de nuestra aplicación en este punto:

Ejemplo de API de REST de React Fetch

Abra el src/App.jsarchivo y eliminemos el código repetitivo predeterminado que no estamos usando en nuestro ejemplo. Simplemente, cambie el contenido con lo siguiente:

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      // Your JSX code goes here.
    );
  }
}

export default App;

Diseñar la interfaz de usuario con Bootstrap 4

Usaremos Bootstrap 4 para diseñar la interfaz de usuario. Integrar Bootstrap 4 con React es bastante fácil. Abra el public/index.htmlarchivo y agregue el siguiente código:

  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <!-- [...] -->

Ahora, mostremos un ejemplo de todo solo para asegurarnos de que Bootstrap se haya agregado correctamente. Abra src/App.jsy reemplace con el siguiente código:

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
       <div className="container">
        <div className="col-xs-12">
        <h1>My Todos</h1>
          <div className="card">
            <div className="card-body">
              <h5 className="card-title">Example Todo</h5>
              <h6 className="card-subtitle mb-2 text-muted">Completed</h6>
            </div>
          </div>
        </div>
       </div>
    );
  }
}
export default App;

En React usamos en classNamelugar de classagregar una clase CSS a los elementos DOM.

Esta es una captura de pantalla de la interfaz de usuario:

Ejemplo de React Bootstrap 4

Obtención y visualización de la API REST

Como dijimos anteriormente, vamos a utilizar la API de búsqueda del navegador para consumir datos JSON desde el punto final de la API de todos . Primero, en el src/App.jsarchivo y agregue un objeto de estado para mantener nuestros todos una vez que los recuperemos:

import React, { Component } from 'react';

class App extends Component {
  state = {
    todos: []
  }
  // [...]
}

export default App;

Creamos una variable de estado llamada todos.

A continuación, agregue un componentDidMount()método de ciclo de vida en nuestro src/App.jsarchivo y agregue el código para recuperar los datos JSON dentro de él. Este método se ejecuta cuando el componente se monta en el DOM, por lo que es el lugar correcto para colocar nuestra lógica de búsqueda JSON:

import React, { Component } from 'react';

class App extends Component {
  state = {
    todos: []
  }
  componentDidMount() {
    fetch('http://jsonplaceholder.typicode.com/todos')
    .then(res => res.json())
    .then((data) => {
      this.setState({ todos: data })
      console.log(this.state.todos)
    })
    .catch(console.log)
  }
  // [...]
}
export default App;

Simplemente enviamos una solicitud GET al /todospunto final. Una vez que se resuelve la Promesa devuelta, usamos el setState()método para asignar los datos devueltos a la todosvariable de estado. Si hay un error simplemente lo mostramos en la consola.

Nota: también puede obtener datos en React usando Axios

Si abre la consola de su navegador, los todos buscados deberían mostrarse como una matriz de objetos. Renderémoslos en nuestra interfaz de usuario. Actualice el render()método en el src/App.jsarchivo de la siguiente manera:

  render() {

    return (
       <div className="container">
        <div className="col-xs-12">
        <h1>My Todos</h1>
        {this.state.todos.map((todo) => (
          <div className="card">
            <div className="card-body">
              <h5 className="card-title">{todo.title}</h5>
              <h6 className="card-subtitle mb-2 text-muted">
              { todo.completed &&
                <span>
                Completed
                </span>
              }
              { !todo.completed &&
                <span>
                  Pending
                </span>
              }              
              </h6>
            </div>
          </div>
        ))}
        </div>
       </div>
    );
  }

En React, puede crear listas de elementos e incluirlos en JSX usando llaves {}.

En el código, recorremos la state.todosmatriz usando el map()método JavaScript y devolvemos un elemento de tarjeta Bootstrap 4 para cada tarea.

También podemos incrustar cualquier expresión en JSX envolviéndola entre llaves.

Usamos el &&operador lógico para incluir condicionalmente los elementos <span>Completed</span><span>Pending</span>dependiendo del valor del completedvalor booleano del elemento todo.

Esto funciona porque en JavaScript, true && expressionsiempre evalúa expressionfalse && expressionsiempre evalúa false.

Si la completedvariable es true, el elemento inmediatamente posterior &&aparecerá en la salida. Si es así false, React lo ignorará y lo omitirá.

Consulte: Representación condicional .

Esto representará el todosobjeto en el estado.

Esta es una captura de pantalla de nuestra interfaz de usuario:

Ejemplo de API de REST de React Fetch

Conclusión

Ese es el final de este tutorial. Como resumen:

Hemos instalado el create-react-appy lo usamos para crear un proyecto React. A continuación, integramos Bootstrap 4 en nuestra aplicación React y usamos para buscar API para enviar una solicitud GET para consumir datos JSON de una API REST de terceros en el componendDidMount()método de ciclo de vida.

También usamos el objeto de estado para contener nuestros datos JSON obtenidos y el setState()método para establecer el estado.

Finalmente, hemos visto cómo incrustar expresiones JS en JSX y cómo representar listas de datos y representar condicionalmente elementos DOM utilizando el &&operador lógico .

Publicar un comentario

0 Comentarios