react spring boot
1.0.0
Créé sur: 11-04-2020
Dernière mise à jour sur: 10-09-2021 par Jordy Coder
Contributeurs:
Jeffrey Spaan (développeur complet de pile @ codeBean)
Jordy Hamwijk (développeur complet de pile @ codeBean)
Bienvenue développeur. Il s'agit du premier tutoriel pour développer votre première application Web avec React et Spring Boot.
À l'avenir, nous utiliserons ce référentiel comme point de départ pour tout autre référentiel que nous publierons ici sur GitHub.
Dans ce didacticiel, nous couvrirons les bases et configurerons un frontend React avec un backend de démarrage de printemps.
React est une bibliothèque JavaScript open source qui est utilisée pour la création d'interfaces utilisateur spécifiquement pour les applications d'une seule page.
Il est utilisé pour gérer la couche de vue pour les applications Web et mobiles. React nous permet également de créer des composants d'interface utilisateur réutilisables.
L'utilisation de composants d'interface utilisateur facilite le développement et réduit le temps de développement de votre application.
Spring Boot est un framework basé sur Java utilisé pour créer un service micro.
La configuration du backend de votre application est simplifiée avec l'utilisation des dépendances de démarrage Spring qui vous permet de sélectionner simplement les dépendances requises pour configurer rapidement le backend de votre application.
En parlant de cela, commençons par créer notre backend tout de suite.
Dans votre navigateur, ouvert: https://start.spring.io
Maven ProjectJava2.2.6nl.codebeanreact-spring-bootReact and Spring Boot TutorialJAR8Spring Web Pour créer l'application Spring Boot pré-générée, cliquez: générer
Un fichier zip est téléchargé sur votre disque dur. Ouvrez le fichier zip et extraire le dossier du projet.
Ouvrez le dossier du projet dans votre IDE préféré.
Un modèle d'objet de projet ou POM est l'unité fondamentale de travail à Maven.
Il s'agit d'un fichier XML qui contient des informations sur le projet et les détails de configuration utilisés par Maven pour construire le projet.
La liste suivante affiche le fichier POM.xml qui est créé lorsque vous choisissez un projet 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 > Ajoutons un service pour faire de l'application la sortie de données.
Pour ce faire, ajoutez un contrôleur nommé: GreetController.java
Enregistrez le contrôleur dans 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 : Il s'agit d'une annotation de démarrage de printemps qui marque la classe en tant que contrôleur;
@RequestMapping : Il s'agit d'une annotation de démarrage de printemps qui mappe "/api/greet" à la méthode greet() ; Lorsqu'il est invoqué à partir d'un navigateur ou en utilisant Curl sur la ligne de commande, la méthode renvoie uniquement le texte. En effet, @RestController combine @Controller et @ResponseBody , deux annotations qui se traduisent par des demandes Web de retour des données plutôt que d'une vue.
Exécutons maintenant l'application dans le terminal.
Pour démarrer l'application, ouvrez le terminal de commande et exécutez la tâche suivante (affichée avec sa sortie):
Dans ce didacticiel, les commandes de terminaux sont marquées avec> devant la commande d'origine.
> 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) Une fois l'application démarrée, exécutons le service (dans un terminal de commande séparé). Exécutez la tâche suivante (indiquée avec sa sortie):
> curl http://localhost:8080/api/greet
Greetings from CodeBean! Excellent travail! Le service Spring Boot Rest est maintenant opérationnel.
Continuons à obtenir les données backend au frontend.
Nous allons maintenant construire le frontend à l'aide de la bibliothèque JavaScript appelée React.
Dans le frontend, nous pouvons récupérer les données générées par le backend. Commençons!
> 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 startLes instructions sont claires, continuons à le faire (illustrées avec sa sortie):
> cd frontend
> npm start
Compiled successfully!
You can now view frontend in the browser.
Local: http://localhost:3000
Ouvrez votre navigateur et allez sur http: // localhost: 3000 pour afficher l'application React .
Cela devrait ressembler à ceci:
Notre prochaine tâche consiste à afficher les données de l'API du backend (côté serveur) dans le frontend (côté client) .
Le backend fonctionne sur le port 8080 http://localhost:8080
Le frontend fonctionne sur le port 3000 http://localhost:3000
Les deux ports fonctionnent maintenant les uns les autres sans aucune interconnectivité. Pour permettre à la lecture et à l'écriture d'accès du port frontal au port backend, nous devons configurer un proxy qui permet le transfert de données.
Ceci est résolu en ajoutant un champ proxy à votre fichier frontend/package.json qui permet au port 3000 de transférer des données de / vers le port 8080 .
"proxy" : " http://localhost:8080 " , Votre fichier frontend/package.json devrait maintenant ressembler à ceci:
{
"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 "
]
}
} Pour en savoir plus sur les demandes d'API de proxyation, voir Créer la documentation de React App.
Testons si nous sommes maintenant en mesure d'accéder aux données depuis le frontend également.
Tout d'abord, redémarrez votre frontend. Pour arrêter la session en cours, tapez Ctrl + C dans votre fenêtre Terminal IDE.
Une fois le frontend redémarré, ouvrez une nouvelle fenêtre de terminal et tapez la commande suivante (illustré avec sa sortie):
> curl http://localhost:3000/api/greet
Greetings from CodeBean! Nous sommes presque là. Nous allons maintenant récupérer les données du backend à afficher dans le frontend.
Ouvrez votre dossier /frontend/src . Ajoutez un dossier nommé components .
Dans le dossier components , ajoutez un fichier nommé Greet.js
Selon les meilleures pratiques React, le dossier Composants contiendra tous les fichiers qui agissent comme un composant.
Selon les meilleures pratiques React, les noms des composants commenceront par une majuscule.
Votre structure de dossiers /src ressemblera maintenant à ceci:
.
├─ ...
├─ components
│ └─ Greet.js
└─ ...
Ajoutez le code suivant à votre fichier 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 ; Ouvrez maintenant votre fichier App.js , situé dans le dossier /frontend/src .
Ici, nous importerons le composant Greet.js en ajoutant import Greet from './components/Greet'; et <Greet /> au fichier App.js
Votre code devrait ressembler à ceci:
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 ;Votre frontend React devrait désormais afficher le texte de votre API backend.
Votre frontend React est désormais connecté à votre backend Spring Boot qui permet à votre application de récupérer et d'écrire des données de / vers votre serveur.
J'espère que vous avez aimé suivre ce tutoriel, n'oubliez pas de donner à ce référentiel une étoile.
Suivez CodeBean University sur GitHub et soyez mis à jour avec de nouveaux tutoriels intéressants.
Dans notre prochain tutoriel, nous créerons une application API Spring Boot Restful que nous vous connecterons avec une base de données PostgreSQL.
