react spring boot
1.0.0
Criado em: 11-04-2020
Última atualização em: 10-09-2021 por Jordy Coder
Colaboradores:
Jeffrey Spaan (desenvolvedor de pilha completa @ codebean)
Jordy Hamwijk (desenvolvedor de pilha completa @ codebean)
Bem -vindo desenvolvedor. Este é o primeiro tutorial no desenvolvimento do seu primeiro aplicativo da Web com a React e a Spring Boot.
Avançando, usaremos esse repositório como ponto de partida para outros repositórios que publicaremos aqui no Github.
Neste tutorial, abordaremos o básico e configuraremos um front -end React com um back -end de inicialização da mola.
O React é uma biblioteca JavaScript de código aberto que é usado para criar interfaces de usuário especificamente para aplicativos de uma página única.
É usado para lidar com a camada de visualização para aplicativos da Web e móveis. O React também nos permite criar componentes de interface do usuário reutilizáveis.
O uso de componentes da interface do usuário facilita o desenvolvimento e reduz o tempo de desenvolvimento do seu aplicativo.
O Spring Boot é uma estrutura baseada em Java usada para criar um micro serviço.
Configurar o back -end do seu aplicativo é simplificado com o uso de dependências de inicialização da mola, o que permite simplesmente selecionar as dependências necessárias para configurar rapidamente o back -end do seu aplicativo.
Falando nisso, vamos começar a criar nosso back -end imediatamente.
No seu navegador, aberto: https://start.spring.io
Maven ProjectJava2.2.6nl.codebeanreact-spring-bootReact and Spring Boot TutorialJAR8Spring Web Para criar o aplicativo de inicialização de mola pré-gerado, clique: GERETE
Um arquivo zip é baixado no seu dura. Abra o arquivo zip e extraia a pasta do projeto.
Abra a pasta do projeto em seu IDE favorito.
Um modelo de objeto de projeto ou POM é a unidade fundamental de trabalho no MAVEN.
É um arquivo XML que contém informações sobre o projeto e os detalhes de configuração usados pelo Maven para criar o projeto.
A lista a seguir mostra o arquivo POM.xml criado quando você escolhe um projeto 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 > Vamos adicionar um serviço para fazer com que o aplicativo produzam alguns dados.
Para fazer isso, adicione um controlador chamado: GreetController.java
Salvar o controlador em 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 é uma anotação de bota de primavera que marca a classe como um controlador;
@RequestMapping : Esta é uma anotação de bota de primavera que mapeia "/api/greet" para o método greet() ; Quando chamado de um navegador ou usando o CURL na linha de comando, o método retorna apenas o texto. Isso ocorre porque @RestController combina @Controller e @ResponseBody , duas anotações que resultam em solicitações da Web que retornam dados em vez de uma visualização.
Agora vamos executar o aplicativo no terminal.
Para iniciar o aplicativo, abra o terminal de comando e execute a seguinte tarefa (mostrada com sua saída):
Neste tutorial, os comandos do terminal são marcados com> em frente ao 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) Depois que o aplicativo é iniciado, vamos executar o serviço (em um terminal de comando separado). Execute a seguinte tarefa (mostrada com sua saída):
> curl http://localhost:8080/api/greet
Greetings from CodeBean! Ótimo trabalho! O serviço de descanso de inicialização da primavera está agora em funcionamento.
Vamos continuar colocando os dados de back -end para o front -end.
Agora vamos construir o front -end usando a biblioteca JavaScript chamada React.
No front -end, podemos buscar os dados gerados pelo back -end. Vamos começar!
> 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 startAs instruções são claras, vamos continuar fazendo isso (mostrado com sua saída):
> cd frontend
> npm start
Compiled successfully!
You can now view frontend in the browser.
Local: http://localhost:3000
Abra seu navegador e vá para http: // localhost: 3000 para visualizar o aplicativo React .
Deve parecer algo assim:
Nossa próxima tarefa é mostrar os dados da API do back-end (lado do servidor) no front-end (lado do cliente) .
O back -end está em execução na porta 8080 http://localhost:8080
O front -end está em execução na porta 3000 http://localhost:3000
Ambas as portas agora estão correndo ao lado de um para o outro, sem qualquer interconectividade. Para permitir o acesso de leitura e gravação da porta front -end até a porta de back -end, precisamos configurar um proxy que permita a transferência de dados.
Isso é resolvido adicionando um campo proxy ao seu arquivo frontend/package.json , que permite que a porta 3000 transfira dados de/para a porta 8080 .
"proxy" : " http://localhost:8080 " , Seu arquivo frontend/package.json agora deve parecer algo assim:
{
"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 saber mais sobre as solicitações de API proxy, consulte a documentação do Create React App.
Vamos testar se agora também podemos acessar os dados do front -end.
Primeiro, reinicie seu front -end. Para interromper a sessão atual, digite Ctrl + C na janela do terminal IDE.
Depois que o front -end for reiniciado, abra uma nova janela do terminal e digite o seguinte comando (mostrado com sua saída):
> curl http://localhost:3000/api/greet
Greetings from CodeBean! Estamos quase lá. Agora, buscaremos os dados do back -end para mostrar no front -end.
Abra sua pasta /frontend/src . Adicione uma pasta chamada components .
Na pasta components , adicione um arquivo chamado Greet.js
De acordo com as práticas recomendadas do React, a pasta Components conterá todos os arquivos que atuam como um componente.
De acordo com as práticas recomendadas do React, os nomes dos componentes começarão com uma letra maiúscula.
Sua estrutura de pastas /src agora ficará assim:
.
├─ ...
├─ components
│ └─ Greet.js
└─ ...
Adicione o código a seguir ao seu arquivo 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 ; Agora abra seu arquivo App.js , localizado na pasta /frontend/src .
Aqui vamos importar o componente Greet.js , adicionando import Greet from './components/Greet'; e <Greet /> para o arquivo App.js
Seu código deve ficar assim:
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 ;Seu front -end do React agora deve exibir o texto da sua API de back -end.
Seu front -end do React está agora conectado ao back -end do seu spring de inicialização, o que permite que seu aplicativo busque e grava dados de/para o servidor.
Espero que você tenha gostado de seguir este tutorial, não se esqueça de dar a este repositório uma estrela.
Siga a CodeBean University no Github e seja atualizado com novos tutoriais interessantes.
Em nosso próximo tutorial, faremos um aplicativo de API RESTful Spring Boot que conectaremos com um banco de dados PostgreSQL.
