Desde el reto hasta el deploy— Mi acercamiento a React JS
Hablar de React en pleno 2021 parece ser un tema muy recurrente, “El mejor para front-end”, no quiero hacer una comparativa sobre que es mejor y en que falla uno de otro, hoy vengo a contar mi experiencia en la creación de una, por así decirlo, “App” sobre ahorros personales desarrollada en React para el front, Node.js para el back, una sencilla base de datos en MySQL y haciendo el deploy en Heroku, no quiero tratar el código en esta ocasión paso a paso si no solo una vista general y la experiencia que fue el hacerlo.
La Idea
Desde hace ya tiempo el papá de mi pareja tenia la necesidad de poder ingresar sus ahorros del día a día, claro que hay miles y miles de aplicaciones para hacerlo pero el nos puso el reto a nosotros de hacerlo ya que compartimos el mismo sector de TI y los conocimientos para realizarlo.
Los requerimientos básicos:
*Ingresar un monto de dinero
*Poder consultar los ingresos del día, semana o mes
Así de simple, así de corto
Desarrollo
Como mi primer trabajo despues de terminar la universidad fue un puesto de desarrollador de base de datos con PL/SQL no pude evitar pensar en com estaria estructurada la BD, claro fue algo sencilla idea, dos tablas algunos campos para relacionar y listo, despues vino el dilema del back-end en el cual estoy mas enfocado en PHP pero viendo los costos para poder subir la App a la nube se me hacia mucho para esto que solo verian dos o cuatro personas asi que me decidi que seria lo mejor mantenerlo simple con Node que tenia una sorprendete experiencia de cero pero incursionar en cosas nuevas siempre es algo bueno y por ultimo lo que si me tenia emocionado el desarrollo del front-end en React.
Base de datos
Como mencionaba anteriormente lo mas rápido en pensar y hacer fue la BD que solo consiste en dos tablas (actualmente):
ahorro
users
Simple y sin mayor complejidad aquí esta el entidad relación de la BD para que tengas una idea de lo simple que es:
Si lo se, sin llaves foraneas, buenas practicas etc. Pero esto no e lo importante solo es de referencia.
Back-end
Similar a lo anterior si ya eres un programador experimentado esto podría ser un espanto para ti, pero fue así que lo resolví de manera rápida y sencilla el tema del back trabajando con Node, como mis conocimientos eran nulos casi por completo, recurrí a un mini tutorial de un CRUD, que de esos hay miles y cualquiera puede ser de ayuda, fue sencillo hacerlo y probarlo con postman (una herramienta muy buena para probar servicios REST), recordemos que el back-end es la comunicación del servidor con la base de datos así que solo eso puse en mi proyecto, consultas sencillas para traer o almacenar datos.
Aquí un poco de ese código:
Front-end con React
Decir que desarrolle este pequeño proyecto tal cual lo estas leyendo seria mentir, ya que en realidad todo se baso en lo que iba aprendiendo hasta que surgió el camino del proyecto.
Prácticamente mi road map fue, comprender conceptos básicos de React, tales como componentes el estado usando el state y luego olvidarlo ya que trabajar con Hooks fue una opción mejor ya que es el nuevo estándar.
Con la guía muy básica de cursos, fui guiándome a las mejores convenciones del framework, pero lo que mejor ayuda a comprender es la documentación de React
Así es tu mejor amigo para aprender lo básico y estar probando es siempre la documentación, se que a veces no viene la respuesta directa como seria consultarlo en StackOverFlow pero créeme que es mejor comprender como funciona y no solo tener la respuesta.
Aunque tampoco nos compliquemos demasiado en caso de estar muy atorados en un tema que parece simple, el show debe continuar asi que no te sientas mal en buscar en otros lados.
Deploy en Heroku
¡Wow! simplemente ¡Wow! con lo fácil que es subir aplicaciones (al menos pequeñas) basadas en JavaScript, solo con abrir una cuenta en heroku, vincular a nuestro GitHub a este mismo ya tenemos un deploy funcional en nuestras manos.
Hago mención que subí mi proyecto de back hecho en Node y después subí mi front hecho en React, ya solo se comunican entre si.
Mobile First
Una buena practica y sobre lo que me base es desarrollo de mobile first, esto consiste en diseñar tu sistema o aplicación pensando en primer lugar en como se vera en un smartphone, como es React.js y no React Native, no podemos hacer una aplicación nativa para nuestros celulares pero si podemos generar una experiencia muy similar con una PWA(Progressive Web App) en español Aplicación Web Progresiva, esto se logra de manera muy rápida con React, parece hasta magia lo bien que funciona.
Solo quédate con la idea que, si tu aplicación/sistema se podrá usar en un celular parte de este para el diseño, para el diseño de escritorio será mucho mas sencillo.
La pequeña Demo
Muy bien hora de exhibir mi creación
Para ingresar puedes usar el siguiente usuario de pruebas:
User: tester
Pin: 1234
Conclusiones
Trabajar con React fue algo que deseaba hacer desde hace tiempo, solo hacer cursos y no tener alguna idea para aplicar lo aprendido no es tan divertido como el hecho de desarrollar algo desde el papel.
Si me considero ser una persona con mas experiencia en el back, pero sin duda alguna el estar manipulando cosas del DOM ver como funcionan los componentes que nos da React fue algo muy interesante, claro no solo vi React en este proyecto si no que también me metí a Node.js y MySQL, pero fue solo por cuestiones de rapidez y simplicidad ya que todas mis energías las deseaba para el front.
Si eres un desarrollador de cualquier tipo, te recomiendo darle un vistazo a React, Vue o Angular, son herramientas que te pueden apoyar a realizar cosas grandes y en poco tiempo.
