¿Como conectar y consumir un API con ReactJs? Presentación y Parte 1.

3 min readAug 16, 2018

Esta pequeña serie de tutoriales tratará de guiar en el aprendizaje de la conexión entre ReactJS con un API externa, para ello vamos a hacer uso principalmente de la librería Axios la cual es una herramienta basada en promesas para manipular las peticiones y respuestas HTTP.

Me decanté por esta librería ya que es con la cual trabajo regularmente para consumo de arquitecturas de servicios, pero tranquilamente podrían hacer uso de otras como:
- Fetch(API nativa de HTML5)
- SuperAgent
- o Incluso Ajax de jquery (si quieren hacer cochinadas/cosas locas).

Mi nombre es Facundo Herrera y soy de Tucumán/Argentina. Este es el primer tutorial que realizo, espero que sea de su agrado y que tenga una gran utilidad para ustedes.

Para mantener un estandar, vamos a iniciar el tutorial con el Boilerplate que nos proporciona facebook llamado create-react-app, además usaremos el api publica de videos YTS-API.

Como editor utilizaré VSCode, el cual es desarollado por Microsoft y de descarga libre.

# Instalaciónes iniciales y configuraciónes de entorno — Parte 1.

Primeramente vamos a hacer uso del CLI Reactjs “create-react-app” y crearemos nuestro proyecto.

$ npm install -g create-react-app
$ create-react-app kakuvideos

En el proyecto tendremos la estructura basica que nos proporciona CRA, la cual sufrirá una serie de minimas modificaciones en nuestro desarollo.

Lo primero que realizaremos es ir a la carpeta “src” y crearemos la siguiente estructura

En ella tenemos la siguiente estructura:

Assets => Assets comunes a la aplicación como imgs o css.
Screens => Es donde vamos a organizar nuestras vistas con React-Router, al ser un tutorial corto solo tendremos un fuchero llamado “movies” donde organizaremos nuestros componentes. Utilizaremos la metodologia “Smart and Dumb Components”.
Services => Aquí configuraremos nuestros servicios, conectaremos con el API de yts.
UI => Componentes de diseño generales a toda la aplicación.

Ahora procederemos a hacer las instalaciones de las librerias de desarollo que usaremos.

En lo que es el apartado visual y para que sea más veloz el desarollo utilizaré MaterializeCss, pero recordar que esto solo tiene relación con el apartado visual y no con la funcionalidades del tutorial, por lo tanto no ahondaré demasiado. De igual manera todo estará en un repositorio de github.

$ npm install react-materialize -D
$ npm install axios -D

react-materialize => MaterializeCss es un framework de CSS que sigue el patrón de google Material Design. React-materialize es una librería que implementa a manera de componentes el framework y nos ayudará a acelerar el proceso. [Documentación de la libreria]
axios => Es la librería con la cual nos conectaremos al API de YTS. Axios es una libreria de peticiones HTTP en base a promesas. [Documentación oficial]

## Nota. Tal como aparece en la [Documentación oficial de la librería react-materialize] debemos setear nuestro index.html de una determinada manera, aqui muestro como debería quedar.

<head>
  <!-- Import Google Icon Font -->
  <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!-- Import materialize.css -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
  <!-- Import jQuery before materialize.js -->
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
</body>

Repositorio en [https://github.com/faherrera/kakuvideo]

Parte 2:
¿Como conectar y consumir un API con ReactJs? Parte 2 y ejemplo practico.
Parte 3:
#En proceso de desarollo.

¿Como conectar y consumir un API con ReactJs? Presentación y Parte 1.

# Instalaciónes iniciales y configuraciónes de entorno — Parte 1.

Written by Facundo N. Herrera