#100DaysOfCode _ #Day44

Mostrando en el blog hecho con “React”, los datos del back

¿A qué me he dedicado hoy durante el reto?

Esta mañana he seguido con el curso de React, y esta parte del curso me ha permitido aprender cómo intercambiar datos entre el “front” y la base de datos que creé anteriormente con NodeJS y Mongo DB.

Los pasos que he dado, teniendo en cuenta que ya había creado las entradas del blog y que las peticiones HTTP funcionaban correctamente (comprobadas con Postman), son los siguientes (de forma muy resumida):

• Poner en marcha MongoDB Daemon para permitir las comunicaciones con Mongo DB

• Lanzar el index.js con NodeJS para que se establezca la conexión con el servidor

• Podría probar las peticiones con Postman, pero confiemos en que funciona por el mensaje que aparece, que sólo se muestra si la conexión funciona correctamente (… sí, lo he comprobado por si acaso).
• Habiendo configurado también durante las clases anteriores la interfaz de la web con React, y cargado la librería “axios” que permite hacer peticiones HTTP, configuramos un nuevo componente “articles”, que colocaremos dentro de la página del blog, y que se encargará de cargar los JSON que tenemos en la base de datos:

Visualización con Robo 3T de la base de datos creada previamente

Componente “article”, encargado de hacer las peticiones mediante el método “getArticles” y de cargarlo con “componentDidMount”

• Estando todo configurado, y con el blog cargando el componente “articles”, testeamos que todo funciona correctamente:

• Con el método “componentDidMount” hemos cargado previamente los objetos, que mostraremos una vez que estén correctamente cargados.
• Las diferentes entradas del blog se renderizan con el método render mediante la estructura copiada del blog estático que cree previamente sin React, y que me permite ver la diferencia entre ambos.

Sí, tengo que cambiar las fotos y generar unas entradas de verdad, pero eso lo dejaré para el siguiente paso del curso (las fotos también están almacenadas en su correspondiente objeto de la BBDD).

NOTA: también tengo que verificar que no es mejor realizar este ejercicio con “componentWillMount”, para que se carguen los objetos antes de renderizar absolutamente nada.

¿Cuál ha sido el aprendizaje que quiero compartir?

Además de esto, he avanzado con el módulo avanzado de JavaScript en Codecademy y en esta parte del mismo, estoy repasando la creación de clases y la herencia, que es imprescindible para React.

Mañana voy a tomar una pausa en el curso para darle una vuelta al contenido de la web de React:

React - A JavaScript library for building user interfaces

Y su tutorial, que parece bastante completo.

Keep Coding!