react spring boot
1.0.0
Creado el: 11-04-2020
Última actualización en: 10-09-2021 por Jordy Coder
Colaboradores:
Jeffrey Spaan (desarrollador de pila completa @ CodeBean)
Jordy Hamwijk (desarrollador de pila completa @ codebean)
Bienvenido desarrollador. Este es el primer tutorial en el desarrollo de su primera aplicación web con React y Spring Boot.
En el futuro, utilizaremos este repositorio como punto de partida para cualquier repositorios adicionales que publicaremos aquí en GitHub.
En este tutorial, cubriremos los conceptos básicos y configuraremos un frontend React con un backend de arranque de resorte.
React es una biblioteca JavaScript de código abierto que se utiliza para construir interfaces de usuario específicamente para aplicaciones de una sola página.
Se usa para manejar la capa de vista para aplicaciones web y móviles. React también nos permite crear componentes de UI reutilizables.
El uso de componentes de la interfaz de usuario facilita el desarrollo y reduce el tiempo de desarrollo de su aplicación.
Spring Boot es un marco basado en Java utilizado para crear un servicio micro.
La configuración del backend de su aplicación se simplifica con el uso de dependencias de arranque de resorte, lo que le permite simplemente seleccionar las dependencias requeridas para configurar rápidamente el backend de su aplicación.
Hablando de eso, comencemos con la creación de nuestro backend de inmediato.
En su navegador, abierto: https://start.spring.io
Maven ProjectJava2.2.6nl.codebeanreact-spring-bootReact and Spring Boot TutorialJAR8Spring Web Para crear la aplicación de arranque de primavera pregenerada, haga clic en: Generar
Se descarga un archivo zip en su tracción dura. Abra el archivo zip y extraiga la carpeta del proyecto.
Abra la carpeta del proyecto en su IDE favorito.
Un modelo de objeto de proyecto o POM es la unidad de trabajo fundamental en Maven.
Es un archivo XML que contiene información sobre el proyecto y los detalles de configuración utilizados por Maven para crear el proyecto.
El siguiente listado muestra el archivo POM.xml que se crea cuando elige un proyecto Maven:
<? xml version = " 1.0 " encoding = " UTF-8 " ?>
< project xmlns = " http://maven.apache.org/POM/4.0.0 " xmlns : xsi = " http://www.w3.org/2001/XMLSchema-instance "
xsi : schemaLocation = " http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd " >
< modelVersion >4.0.0</ modelVersion >
< parent >
< groupId >org.springframework.boot</ groupId >
< artifactId >spring-boot-starter-parent</ artifactId >
< version >2.2.6.RELEASE</ version >
< relativePath /> <!-- lookup parent from repository -->
</ parent >
< groupId >nl.codebean</ groupId >
< artifactId >react-spring-boot</ artifactId >
< version >0.0.1-SNAPSHOT</ version >
< name >react-spring-boot</ name >
< description >React and Spring Boot Tutorial</ description >
< properties >
< java .version>1.8</ java .version>
</ properties >
< dependencies >
< dependency >
< groupId >org.springframework.boot</ groupId >
< artifactId >spring-boot-starter-web</ artifactId >
</ dependency >
< dependency >
< groupId >org.springframework.boot</ groupId >
< artifactId >spring-boot-starter-test</ artifactId >
< scope >test</ scope >
< exclusions >
< exclusion >
< groupId >org.junit.vintage</ groupId >
< artifactId >junit-vintage-engine</ artifactId >
</ exclusion >
</ exclusions >
</ dependency >
</ dependencies >
< build >
< plugins >
< plugin >
< groupId >org.springframework.boot</ groupId >
< artifactId >spring-boot-maven-plugin</ artifactId >
</ plugin >
</ plugins >
</ build >
</ project > Agregamos un servicio para que la aplicación emita algunos datos.
Para hacerlo, agregue un controlador llamado: GreetController.java
Guarde el controlador en src/main/java/nl/codebean/reactspringboot/GreetController.java
package nl . codebean . reactspringboot ;
import org . springframework . web . bind . annotation . RequestMapping ;
import org . springframework . web . bind . annotation . RestController ;
@ RestController
public class GreetController {
@ RequestMapping ( "/api/greet" )
public String greet () {
return "Greetings from CodeBean!" ;
}
} @RestController : esta es una anotación de arranque de primavera que marca la clase como un controlador;
@RequestMapping : esta es una anotación de arranque de primavera que mapea "/api/greet" al método greet() ; Cuando se invoca desde un navegador o utilizando Curl en la línea de comando, el método solo devuelve texto. Esto se debe a que @RestController combina @Controller y @ResponseBody , dos anotaciones que resultan en las solicitudes web que devuelven datos en lugar de una vista.
Ahora ejecutemos la aplicación en el terminal.
Para iniciar la aplicación, abra el terminal de comando y ejecute la siguiente tarea (que se muestra con su salida):
En este tutorial, los comandos de terminal se marcan con> frente al comando original.
> mvn spring-boot:run
2020-04-12 10:42:20.303 INFO 2232 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat initialized with port(s): 8080 (http)
2020-04-12 10:42:20.311 INFO 2232 --- [ main] o.apache.catalina.core.StandardService : Starting service [Tomcat]
2020-04-12 10:42:20.312 INFO 2232 --- [ main] org.apache.catalina.core.StandardEngine : Starting Servlet engine: [Apache Tomcat/9.0.33]
2020-04-12 10:42:20.378 INFO 2232 --- [ main] o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring embedded WebApplicationContext
2020-04-12 10:42:20.378 INFO 2232 --- [ main] o.s.web.context.ContextLoader : Root WebApplicationContext: initialization completed in 896 ms
2020-04-12 10:42:20.503 INFO 2232 --- [ main] o.s.s.concurrent.ThreadPoolTaskExecutor : Initializing ExecutorService 'applicationTaskExecutor'
2020-04-12 10:42:20.610 INFO 2232 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat started on port(s): 8080 (http) with context path ''
2020-04-12 10:42:20.612 INFO 2232 --- [ main] n.c.r.ReactSpringBootApplication : Started ReactSpringBootApplication in 1.444 seconds (JVM running for 1.78) Una vez que se inicia la aplicación, ejecutemos el servicio (en un terminal de comando separado). Ejecute la siguiente tarea (que se muestra con su salida):
> curl http://localhost:8080/api/greet
Greetings from CodeBean! ¡Gran trabajo! El servicio de reposo de arranque de Spring ya está en funcionamiento.
Continuemos llevando los datos de backend al interfaz.
Ahora construiremos el frontend usando la biblioteca JavaScript llamada React.
En el frontend podemos obtener los datos generados por el backend. ¡Comencemos!
> npx create-react-app frontend
Creating a new React app in ../react-spring-boot/frontend
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
Installing template dependencies using npm...
Removing template package using npm...
Success! Created frontend at ../react-spring-boot/frontend
We suggest that you begin by typing:
cd frontend
npm startLas instrucciones son claras, continuemos haciéndolo (se muestra con su salida):
> cd frontend
> npm start
Compiled successfully!
You can now view frontend in the browser.
Local: http://localhost:3000
Abra su navegador y vaya a http: // localhost: 3000 para ver la aplicación React .
Debería verse algo así:
Nuestra siguiente tarea es mostrar los datos de API del backend (lado del servidor) en el frontend (lado del cliente) .
El backend se ejecuta en el puerto 8080 http://localhost:8080
El frontend se ejecuta en el puerto 3000 http://localhost:3000
Ambos puertos ahora se están ejecutando entre ellos sin ninguna interconectividad. Para permitir el acceso de lectura y escritura desde el puerto frontend al puerto de backend, necesitamos configurar un proxy que permita la transferencia de datos.
Esto se resuelve agregando un campo proxy a su archivo frontend/package.json que permite al puerto 3000 transferir datos desde/al puerto 8080 .
"proxy" : " http://localhost:8080 " , Su archivo frontend/package.json ahora debería verse algo así:
{
"name" : " frontend " ,
"version" : " 0.1.0 " ,
"private" : true ,
"dependencies" : {
"@testing-library/jest-dom" : " ^4.2.4 " ,
"@testing-library/react" : " ^9.5.0 " ,
"@testing-library/user-event" : " ^7.2.1 " ,
"react" : " ^16.13.1 " ,
"react-dom" : " ^16.13.1 " ,
"react-scripts" : " 3.4.1 "
},
"scripts" : {
"start" : " react-scripts start " ,
"build" : " react-scripts build " ,
"test" : " react-scripts test " ,
"eject" : " react-scripts eject "
},
"proxy" : " http://localhost:8080 " ,
"eslintConfig" : {
"extends" : " react-app "
},
"browserslist" : {
"production" : [
" >0.2% " ,
" not dead " ,
" not op_mini all "
],
"development" : [
" last 1 chrome version " ,
" last 1 firefox version " ,
" last 1 safari version "
]
}
} Para obtener más información sobre las solicitudes de API de representación, consulte la documentación Crear React App.
Probemos si ahora también podemos acceder a los datos desde el interfaz.
Primero, reinicie su frontend. Para detener la sesión actual, escriba Ctrl + C en su ventana Terminal IDE.
Una vez que se reinicie el frontend, abra una nueva ventana de terminal y escriba el siguiente comando (que se muestra con su salida):
> curl http://localhost:3000/api/greet
Greetings from CodeBean! Estamos casi allí. Ahora obtendremos los datos del backend para mostrar en la interfaz.
Abra su carpeta /frontend/src . Agregue una carpeta con nombre de components .
En la carpeta de components , agregue un archivo llamado Greet.js
Según las mejores prácticas de React, la carpeta de componentes contendrá todos los archivos que actúan como un componente.
Según las mejores prácticas de React, los nombres de los componentes comenzarán con una letra mayúscula.
Su estructura de carpeta /src ahora se verá así:
.
├─ ...
├─ components
│ └─ Greet.js
└─ ...
Agregue el siguiente código a su archivo Greet.js .
import React , { useState , useEffect } from 'react' ;
const Greet = ( ) => {
const [ greet , setGreet ] = useState ( "" ) ;
async function fetchData ( ) {
let res = await fetch ( '/api/greet' ) ;
let greet = await res . text ( )
setGreet ( greet ) ;
}
useEffect ( ( ) => {
fetchData ( ) ;
} , [ ] ) ;
return (
< div >
< h4 > { greet } </ h4 >
</ div >
)
}
export default Greet ; Ahora abra su archivo App.js , ubicado en la carpeta /frontend/src .
Aquí importaremos el componente Greet.js agregando import Greet from './components/Greet'; y <Greet /> al archivo App.js
Su código debería verse así:
import React from 'react' ;
import logo from './logo.svg' ;
import './App.css' ;
import Greet from './components/Greet' ;
function App ( ) {
return (
< div className = "App" >
< header className = "App-header" >
< img src = { logo } className = "App-logo" alt = "logo" />
< p >
Edit < code > src/App.js </ code > and save to reload.
</ p >
< Greet />
< a
className = "App-link"
href = "https://reactjs.org"
target = "_blank"
rel = "noopener noreferrer"
>
Learn React
</ a >
</ header >
</ div >
) ;
}
export default App ;Su React Frontend ahora debe mostrar el texto de su API de backend.
Su React Frontend ahora está conectado con su backend de arranque de Spring, lo que permite que su aplicación obtenga datos de/a su servidor.
Espero que hayas disfrutado siguiendo este tutorial, no olvides darle a este repositorio una estrella.
Siga la Universidad de CodeBean en GitHub y actualice con nuevos tutoriales interesantes.
En nuestro próximo tutorial, haremos una aplicación API Restful Restful de Spring Boot que nos conectaremos con una base de datos PostgreSQL.
