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-app
herramienta, 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
state
objeto que se utiliza para contener las piezas de estado de la aplicación y elsetState()
método para cambiar los valores en elstate
objeto. - 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-app
herramienta: 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-app
herramienta. 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
npm
configuración, es posible que deba usarsudo
su comando en Linux y macOS para instalarnpm
paquetes en todo el sistema.En el momento de escribir estas
create-react-app
lí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-app
comando para crear nuestro proyecto React. npx
es un ejecutable que le permite ejecutar ejecutables desde la node_modules
carpeta. 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 start
script:
$ cd create-react-app react-axios-rest-api-example
$ npm start
Este comando iniciará un servidor de desarrollo local desde la http://localhost:3000
direcció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.html
archivo y agregue un <link>
para importar el bootstrap.min.css
archivo 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.js
y 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 className
lugar de class
agregar 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.js
archivo e importe la axios
biblioteca, defina la API_URL
que 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 App
componente; 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.js
archivo 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 /users
punto final de la API REST. Una vez Promise
resuelto el JavaScript , llamamos al setState()
método para poner los datos JSON devueltos en la users
variable.
Si abre la consola de su navegador, debería ver los usuarios recibidos mostrados como una matriz de objetos.
Ahora, rendericemos la users
matriz en nuestra aplicación React. Simplemente abra el src/App.js
archivo 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.users
matriz 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-app
herramienta 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!