Importar elementos a nuestro código es una estrategia muy útil para llenar nuestro proyecto de contenido externo de manera automática, haciendo que su creación y desarrollo sea más eficiente y rápido. Además, es una forma de hacer que nuestra aplicación interactúe con la web al traer datos de otros sitios. Por ello, en este post, te enseñaremos cómo traer contenido de una API en React para automatizar la creación de elementos en tu proyecto.
¿Por qué traer contenido de una API en React?
En nuestro post sobre cómo transformar un array de objetos en enlaces, te presentamos un escenario en el que queremos crear un proyecto con una página de tipo listado a partir de un array de objetos. Como puedes leer en nuestro post sobre crear una página listado en React, este estilo de páginas es muy utilizado en redes sociales, donde vemos listados de tweets y posts.
En los artículos anteriores, hemos creado estos listados de manera manual, insertando nuestras propias líneas de texto para llenar la página. Aunque este proceso funciona, no es muy eficiente a gran escala, cuando queramos insertar cientos de objetos en el listado. Por ello, lo mejor es crear una especie de túnel que nos envíe contenido externo a nuestro listado.
A continuación, te enseñamos cómo hacer que nuestra aplicación traiga datos de otros sitios a través de API REST.
¿Cómo traer contenido de una API en React?
El primer paso para traer contenido de una API en React es abrir una nueva terminal. En ella, accederemos a una carpeta sparrest.js. Para conocer más sobre qué es el sparREST en JavaScript y cómo crearlo, te invitamos a leer este post en GitHub.
En nuestro caso, estamos creando un proyecto que simula una página listado de tweets. Por ello, hemos creado un archivo sparrest.js con dos arrays. Uno de ellos tiene objetos users y otro tiene objetos de tipo tweets, cada uno con distintas propiedades descritas de manera literal con clave:valor. Además, hemos creado un array llamado likes que, por ahora, mantendremos vacío.
Ahora que tienes tu archivo sparrest.js, puedes ponerlo a correr desde tu terminal con el comando npm start. Después de insertar este comando, podrás pulsar enter y te aparecerá un mensaje diciendo que tu servidor JSON está corriendo en determinado puerto.
Para comprobar que este puerto está funcionando, basta con que vayas a la web e insertes el número de puerto que te ha dado la terminal en tu localhost:. Desde allí podrás acceder a los arrays de tu archivo sparrest usando las barras oblicuas para definir el camino de acceso. Si el puerto está funcionando, verás los objetos de tu array pintados en pantalla.
Ahora que tenemos nuestro servidor corriendo, podemos utilizarlo para traer datos externos de esta API REST a nuestra aplicación. Para ello, también utilizaremos una herramienta que nos simplifica las llamadas HTTP. Nosotros utilizaremos Axios, pero tu podrás usar cualquier otra herramienta para traer contenido de una API en React. Puedes aprender más sobre Axios en nuestro post sobre la librería Axios para JavaScript.
Entonces, el siguiente paso será preparar nuestro código para traer contenido de una API en React. Una de las cosas que te recomendamos hacer es evitar que los enlaces de localhost: se vean de manera directa en tu código. Esto no solo ayuda a la legibilidad de nuestro proyecto, sino que, además, es una buena práctica. Para ello, crearemos un archivo .env en el nivel más alto de nuestra aplicación. Aquí podemos declarar distintas variables de entorno; una de ellas nos permite acceder a todos los enlaces que empiecen por React App de una manera más sencilla. Para conocer más sobre este proceso, puedes leer el post de create-react-app sobre Environment Variables.
Los siguientes pasos para traer contenido de una API a React los encontrarás en nuestros posts sobre configurar un cliente en Axios y crear una función get con un cliente Axios.
¿Cuál es el siguiente paso?
Después de leer este post, no solamente sabes exactamente cómo traer contenido de una API en React, sino que también estás más cerca de dominar esta importante librería de programación. Ahora, el siguiente paso en tu camino es dedicarte por completo a tu aprendizaje. Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva en el que aprenderás a dominar herramientas de programación para la web como React, JavScript, CSS y HTML. ¿Te animas a dar el siguiente paso? ¡No lo dudes más e inscríbete ahora!
