A lo largo de este tutorial, crearemos una aplicación React simple que llama a una API web y consume datos JSON de API RESTful de terceros utilizando la biblioteca Axios. También vamos a diseñar la interfaz de usuario de nuestra aplicación con componentes Bootstrap 4, como los componentes Container y Card.
Usaremos una API de terceros disponible en JSONPlaceholder .
Aprenderemos cómo crear un proyecto React usando la create-react-appherramienta, cómo instalar la biblioteca cliente Axios y usarla para enviar solicitudes GET para obtener y consumir datos JSON de las API REST.
Si es nuevo en React; también aprenderás sobre los conceptos básicos como:
- El
stateobjeto que se utiliza para contener las piezas de estado de la aplicación y elsetState()método para cambiar los valores en elstateobjeto. - El
componentDidMount()gancho del ciclo de vida. Esto se ejecuta cuando su componente React se inserta / monta en el DOM. - JSX para agregar HTML en JavaScript.
React es una biblioteca de interfaz de usuario popular creada por Facebook. Es declarativo, basado en componentes y se puede utilizar para crear aplicaciones web y móviles utilizando tecnologías web.
Prerrequisitos
React es una biblioteca de JavaScript y usaremos la herramienta create-react-app para crear un proyecto React. Como tal; Deberá tener los siguientes requisitos previos para poder seguir este tutorial paso a paso.
- Conocimiento de JavaScript ya que React se basa en JS,
- Nodo y NPM instalados en su sistema de desarrollo. Esto es necesario para instalar y usar la
create-react-appherramienta: la herramienta oficial para crear proyectos de React, servirlos localmente y construirlos para producción. Puede instalar Node y NPM simplemente descargando los binarios para su sistema desde el sitio web oficial . También puede usar la instalación de NVM y administrar múltiples versiones de Node en su sistema.
Ahora, si tiene estos requisitos previos; ¡Empecemos con nuestro tutorial!
Instalación de create-react-app
Como mencionamos anteriormente, la forma recomendada de crear un proyecto React es mediante el uso de la create-react-appherramienta. Si tiene Node y NPM instalados, continúe y abra una nueva terminal, luego ejecute el siguiente comando para instalar la herramienta globalmente en su sistema:
$ npm install -g create-react-app
Nota : Tenga en cuenta que, dependiendo de su
npmconfiguración, es posible que deba usarsudosu comando en Linux y macOS para instalarnpmpaquetes en todo el sistema.En el momento de escribir estas
create-react-applíneas, se instalará v2.1.8.
Crear un proyecto de React
Ahora que lo ha instalado create-react-app, procedamos a crear nuestro proyecto React. Regrese a la ventana de su terminal y ejecute los siguientes comandos:
$ cd ~
$ npx create-react-app react-axios-rest-api-example
Primero navegamos a nuestro directorio de trabajo y usamos el npx create-react-appcomando para crear nuestro proyecto React. npxes un ejecutable que le permite ejecutar ejecutables desde la node_modulescarpeta. Vea más detalles en el sitio web oficial .
La herramienta creará una estructura de proyecto básica e instalará las dependencias necesarias desde npm.
Después de eso, simplemente puede navegar a la carpeta raíz de su proyecto y servir su aplicación React usando el npm startscript:
$ cd create-react-app react-axios-rest-api-example
$ npm start
Este comando iniciará un servidor de desarrollo local desde la http://localhost:3000dirección.
Esta es una captura de pantalla de nuestra aplicación en funcionamiento:
Agregar estilos de Bootstrap 4 a nuestra aplicación React
Para crear una interfaz de usuario hermosa, usaremos Bootstrap 4. Afortunadamente para nosotros, usar Bootstrap 4 con React es muy fácil. Simplemente siga adelante, abra el public/index.htmlarchivo y agregue un <link>para importar el bootstrap.min.cssarchivo desde un CDN:
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- [...] -->
Ahora, probemos si Bootstrap se ha integrado correctamente. Abra src/App.jsy reemplace su contenido con lo siguiente:
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div className="container">
<div className="col-xs-8">
<h1>React Axios Example</h1>
<div className="card">
<div className="card-body">
<h5 className="card-title">My User</h5>
</div>
</div>
</div>
</div>
);
}
}
export default App;
En React, debe usar en classNamelugar de classagregar una clase CSS a los elementos DOM.
Instalación del cliente Axios
Axios es una biblioteca de cliente HTTP JavaScript moderna y basada en Promise que se puede utilizar tanto en el navegador como en el servidor con Node.js. Axios funciona de forma asincrónica y le permite realizar llamadas HTTP a puntos finales REST y consumir API REST JSON.
Ahora instalemos Axios en nuestro proyecto React usando el siguiente comando desde la carpeta raíz de su proyecto:
$ npm install --save axios
Consumir la API REST con Axios
Ahora veamos cómo podemos consumir datos JSON desde nuestro punto final de API de terceros utilizando el cliente Axios.
Abra el src/App.jsarchivo e importe la axiosbiblioteca, defina la API_URLque contiene la URL de nuestra API REST de terceros y agregue una variable de estado que se utilizará para retener a los usuarios después de obtenerlos de la API REST:
import React, { Component } from 'react';
import axios from 'axios';
const API_URL = 'http://jsonplaceholder.typicode.com';
class App extends Component {
state = {
users: []
}
// [...]
}
export default App;
A continuación, agreguemos un componentDidMount()gancho de ciclo de vida en nuestro Appcomponente; y luego agregue el código requerido para enviar una solicitud GET para obtener los datos JSON del punto final REST. Abra el src/App.jsarchivo y actualícelo de la siguiente manera:
import React, { Component } from 'react';
import axios from 'axios';
const API_URL = 'http://jsonplaceholder.typicode.com';
class App extends Component {
state = {
users: []
}
componentDidMount() {
const url = `${API_URL}/users/`;
axios.get(url).then(response => response.data)
.then((data) => {
this.setState({ users: data })
console.log(this.state.users)
})
}
// [...]
}
export default App;
Usamos el axios.get()método para enviar una solicitud HTTP GET al /userspunto final de la API REST. Una vez Promiseresuelto el JavaScript , llamamos al setState()método para poner los datos JSON devueltos en la usersvariable.
Si abre la consola de su navegador, debería ver los usuarios recibidos mostrados como una matriz de objetos.
Ahora, rendericemos la usersmatriz en nuestra aplicación React. Simplemente abra el src/App.jsarchivo y actualice el render()método en consecuencia:
render() {
return (
<div className="container">
<div className="col-xs-8">
<h1>React Axios Example</h1>
{this.state.users.map((user) => (
<div className="card">
<div className="card-body">
<h5 className="card-title">{user.name}</h5>
<h6 className="card-subtitle mb-2 text-muted">
{user.email}
</h6>
</div>
</div>
))}
</div>
</div>
);
}
En React, puede crear listas de elementos e incluirlos en JSX usando llaves {}.
En nuestro render()método, simplemente revisamos la state.usersmatriz usando el map()método JavaScript y devolvemos un elemento de tarjeta Bootstrap 4 para cada usuario.
También podemos incrustar cualquier expresión en JSX envolviéndola con llaves.
Conclusión
Hemos llegado al final de nuestro tutorial donde aprendimos cómo usar React y Axios para buscar y mostrar datos JSON desde una API RESTful. Como resumen:
Comenzamos instalando la create-react-appherramienta y luego la usamos para crear nuestro proyecto React. A continuación, agregamos Bootstrap 4 en nuestra aplicación React usando una <link>etiqueta y un CDN. Finalmente, instalamos la biblioteca cliente de axios y usamos el get()método para enviar una solicitud HTTP GET para obtener y consumir datos JSON de una API REST de terceros en el componendDidMount()enlace del ciclo de vida.
0 Comentarios
Dejanos tu comentario para seguir mejorando!