Integrando React.JS com Spring Boot

Adentrar o mundo do desenvolvimento Full Stack pode ser uma jornada emocionante. Com o Spring Boot facilitando a criação de aplicações robustas do lado do servidor em Java e o React.js permitindo a construção de interfaces de usuário reativas, combinar essas duas tecnologias pode ser muito poderoso. Este tutorial é um ponto de partida para iniciantes, guiando você através dos primeiros passos para criar uma aplicação “Hello World” com Spring Boot e React.js.

Parte 1: Configurando o Ambiente de Desenvolvimento

Antes de começarmos, é necessário configurar o ambiente de desenvolvimento:

1. Instale o Java Development Kit (JDK)

2. Instale o Node.js e o npm (para React.js)

3. Instale uma IDE de sua preferência (sugerimos IntelliJ IDEA ou VSCode)

Parte 2: Criando o Projeto Spring Boot

1. Gerando o Projeto: Vá até Spring Initializr e gere um projeto Maven com as seguintes dependências: Spring Web.

2. Desenvolvendo o Controlador: Após abrir o projeto na sua IDE, crie um novo controlador chamado HelloController.

@RestController 
public class HelloController 
{ 
@GetMapping("/api/hello") 
public String hello() 
{ return "Hello, World from Spring Boot!"; } 
}

Parte 3: Criando o Projeto React.js

1. Criando o Projeto React: Use o comando npx create-react-app client no terminal para criar um novo projeto React.

2. Criando o Componente Hello: Dentro do diretório src, crie um novo arquivo Hello.js.

import React, 
{ useState, useEffect } from 'react'; 
function Hello() 
{ 
const [message, setMessage] = useState(""); useEffect(() => { fetch('/api/hello') .then(response => response.text()) .then(message => { setMessage(message); }); }, []); return <h1>{message}</h1>; } export default Hello;

Parte 4: Integrando o Frontend e o Backend

1. Proxy para API: No arquivo package.json do projeto React, adicione a seguinte linha para configurar o proxy para a API do Spring Boot:

"proxy": "http://localhost:8080",

1. Executando a Aplicação: Inicie o servidor Spring Boot pela IDE e o cliente React com o comando npm start no diretório do cliente.

Conclusão: Parabéns! Você acabou de criar sua primeira aplicação Full Stack com Spring Boot e React.js. Ao carregar a página do React, você deve ver a saudação do servidor Spring Boot.

Visits: 96