Práctica | ReactJS + SpringBoot | CRUD Full-Stack

CRUD | Full-Stack

Introducción

Esta práctica consiste en crear un CRUD para empleados con la información de nombre, puesto, correo electrónico. Fue creado por mi mismo, el día 5 de diciembre de 2021.

Este proyecto tiene una arquitectura de "FrontEnd y BackEnd desacoplados", fue desarrollado usando ReactJS + Axios para el lado de "FrontEnd" y usando Spring Boot + MySQL para el lado del "BackEnd". 

También se utilizó la base de datos de MySQL para almacenar los datos usando Hibernate + JPA DATA como ORM, por lo que los datos se guardan en la nube, y pueden ser fácilmente recuperados.

Ver proyecto (GitHub)

Objetivo

El objetivo de la práctica es usar la arquitectura que se enfoque completo y moderno para el desarrollo de aplicaciones web, integrando frontend, backend, y bases de datos.

Este conjunto de tecnologías y características para este aplicación web:

• Proyecto de RectJS + Axios (FrontEnd).

• Proyecto de SpringBoot + MySQL (BackEnd).

• Base de datos usando MySQL

• Mapeo Objeto-Relacional (ORM con Hibernate y Data JPA).

• CRUD para mascotas (crear, leer, eliminar, actualizar).

Las herramientas utilizadas para la práctica son:

• Visual Studio Code (editor de texto)

• NPM (gestor de paquetes)

• Git (control de versiones)

• GitHub (almacenamiento de repositorios)

• MySQL (base de datos)

• Terminal 

• etc.

Conocimientos obtenidos

Spring Boot es un framework basado en Java que se utiliza para crear aplicaciones web y servicios backend de manera rápida y sencilla. 

ReactJS es una biblioteca de JavaScript de código abierto utilizada para construir interfaces de usuario, especialmente para aplicaciones web de una sola página (SPA, por sus siglas en inglés).

Axios es una biblioteca de JavaScript utilizada para realizar solicitudes HTTP desde el navegador o Node.js.

Al desarrollar la práctica se obtiene conocimientos acerca de 

• SpringBoot   Para crear un servicio backend.

• ReactJs  Para crear una aplicación web.

• Hibernate y Data JPA  Manipular la base de datos en aplicaciones Java usando ORM.

• MySQL  Para crear base de datos, crear tablas, insertar datos, actualizar datos, eliminar datos, consultar datos, etc.

• Axios  Para enviar solicitudes de tipo GET, POST, PUT, DELETE, etc.

• NPM  Para descargar, instalar y desinstalar paquetes.

• Git  Para crear commit, crear ramas, fusionar ramas, subir repositorio a GitHub, etc.

• etc.

Notas

• El proyecto se ha desarrollado con una arquitectura de "BackEnd y FrontEnd desacoplado", por lo que, es necesario iniciar los servicios por separado.

¿Cómo funciona?

Correr aplicación de forma independiente (Usando npm)

Es necesario ejecutar el siguiente comando desde donde se encuentra el archivo **package.json** de cada respectivo proyecto. 

Configuración previa

Antes de ejecutar los proyectos Frontend (ReactJs) y Backend (API SpringBoot) es necesario configurar el archivo `.env`  de cada respectivo proyecto. 

Ejecutar Frontend

Es necesario ejecutar el proyecto frontend usando el sig. comando dentro del path **./react-app/**

$ npm install

$ npm run start

Ejecutar Backend

Es necesario ejecutar el proyecto backend usando el sig. comando dentro del path **./spring-api/**

$ mvn clean install

$  mvn spring-boot:run

 

Vista previas