react spring boot Download - react spring boot Source Code Download

Reagieren und Spring Boot First Setup

Erstellt auf: 11-04-2020
Zuletzt aktualisiert zu: 10-09-2021 von Jordy Coder

Mitwirkende:
Jeffrey Spaan (Full Stack Developer @ codebean)
Jordy Hamwijk (Full Stack Developer @ codebean)

Willkommen Entwickler. Dies ist das erste Tutorial bei der Entwicklung Ihrer ersten Webanwendung mit React und Spring Boot.
In Zukunft werden wir dieses Repository als Ausgangspunkt für weitere Repositorys verwenden, die wir hier auf Github veröffentlichen werden.
In diesem Tutorial werden wir die Grundlagen abdecken und ein React -Frontend mit einem Spring -Boot -Backend einrichten.

Was ist reagiert?

React ist eine Open-Source-JavaScript-Bibliothek, die zum Erstellen von Benutzeroberflächen speziell für einseitige Anwendungen verwendet wird.
Es wird zum Umgang mit der View -Ebene für Web- und Mobile -Apps verwendet. React ermöglicht es uns auch, wiederverwendbare UI -Komponenten zu erstellen.
Die Verwendung von UI -Komponenten erleichtert die Entwicklung und verkürzt die Entwicklungszeit Ihrer Anwendung.

Was ist Spring Stiefel?

Spring Boot ist ein Java-basiertes Framework, das zum Erstellen eines Mikrodienstes verwendet wird.
Das Konfigurieren des Backends Ihrer Anwendung wird durch die Verwendung von Spring -Boot -Abhängigkeiten vereinfacht, mit der Sie einfach die erforderlichen Abhängigkeiten auswählen können, um das Backend Ihrer Anwendung schnell einzurichten.
Apropos, beginnen wir damit, unser Backend sofort zu erstellen.

Erste Schritte

In Ihrem Browser offen: https://start.spring.io

Projekt: Maven Project
Sprache: Java
Spring Boot (Version): Wir werden die neueste stabile Version verwenden: 2.2.6
Gruppe: Dies ist Ihre Internet -Domain rückwärts. Für CodeBean werden wir verwenden: nl.codebean
Artefakt: Dies ist der Name Ihres Projekts. Für dieses Projekt werden wir verwenden: react-spring-boot
Beschreibung: Dies ist eine kurze Beschreibung Ihres Projekts. Für dieses Projekt werden wir verwenden: React and Spring Boot Tutorial
Verpackung: JAR
Java: Version 8
Abhängigkeiten: Spring Web

Klicken Sie auf: Generieren Sie: So erstellen Sie die vorgenerierte Spring-Boot-Anwendung: Erstellen

Eine ZIP-Datei wird auf Ihrem Hartantrieb heruntergeladen. Öffnen Sie die ZIP -Datei und extrahieren Sie den Projektordner.
Öffnen Sie den Projektordner in Ihrer Lieblings -IDE.

Pom.xml

Ein Projektobjektmodell oder ein POM ist die grundlegende Arbeitseinheit in Maven.
Es handelt sich um eine XML -Datei, die Informationen zu den von Maven zum Erstellen des Projekts verwendeten Projekt- und Konfigurationsdetails enthält.

Die folgende Auflistung zeigt die Datei POM.xml , die bei der Auswahl eines Maven -Projekts erstellt wird:

<? 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 >

Federschuh -Controller

Fügen wir einen Dienst hinzu, um die Anwendungsausgabe einige Daten zu erstellen.
Fügen Sie dazu einen Controller mit dem Namen: GreetController.java hinzu

Speichern Sie den Controller in 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 : Dies ist eine Spring -Boot -Annotation, die die Klasse als Controller markiert.

@RequestMapping : Dies ist eine Spring -Boot -Annotation, die "/api/greet" zur greet() -Methode kartiert; Wenn Sie aus einem Browser aufgerufen oder mit Curl in der Befehlszeile verwendet werden, gibt die Methode nur den Text zurück. Das liegt daran, dass @RestController @Controller und @ResponseBody kombiniert, zwei Anmerkungen, die zu Webanforderungen führen, die Daten und nicht zu einer Ansicht zurückgeben.

Lassen Sie uns nun die Anwendung im Terminal ausführen.

Führen Sie die Spring -Boot -Anwendung aus

Öffnen Sie zum Starten der Anwendung das Befehlsterminal und führen Sie die folgende Aufgabe aus (mit der Ausgabe angezeigt):
In diesem Tutorial werden Terminalbefehle mit> vor dem ursprünglichen Befehl markiert.

> 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)

Sobald die Anwendung gestartet ist, führen wir den Dienst (in einem separaten Befehlsterminal) aus. Führen Sie die folgende Aufgabe aus (mit ihrer Ausgabe gezeigt):

> curl http://localhost:8080/api/greet
Greetings from CodeBean!

Tolle Arbeit! Der Frühlingsstart -REST -Service ist jetzt in Betrieb.
Lassen Sie uns weiterhin die Backend -Daten an den Frontend bringen.

React Frontend erstellen

Jetzt werden wir die Frontend mit der JavaScript -Bibliothek namens React erstellen.
In der Frontend können wir die vom Backend generierten Daten abholen. Fangen wir an!

> 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 start

Die Anweisungen sind klar.

> cd frontend
> npm start

Compiled successfully!

You can now view frontend in the browser.

  Local:            http://localhost:3000

Öffnen Sie Ihren Browser und gehen Sie zu http: // localhost: 3000, um die React -Anwendung anzuzeigen.
Es sollte ungefähr so aussehen:

Sehen Sie sich REST -Dienste vom Spring Boot im React -Frontend an

Unsere nächste Aufgabe ist es, die API-Daten aus dem Backend (Server-Side) in der Frontend (Client-Seite) anzuzeigen.
Das Backend wird auf Port 8080 http://localhost:8080 ausgeführt
Der Frontend wird auf Port 3000 http://localhost:3000 ausgeführt

Beide Ports laufen jetzt ohne Interkonnektivität nebeneinander. Um das Lesen und Schreibzugriff vom Frontend -Port zum Backend -Port zu ermöglichen, müssen wir einen Proxy einrichten, der die Datenübertragung ermöglicht.

Dies wird durch Hinzufügen eines proxy -Felds zu Ihrer frontend/package.json -Datei gelöst, mit der Port 3000 Daten von/auf Port 8080 übertragen kann.

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

Ihre frontend/package.json -Datei sollte jetzt ungefähr so aussehen:

{
  "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 "
    ]
  }
}

Weitere Informationen zu Proxying -API -Anfragen finden Sie unter Dokumentation der React -App erstellen.

Testen wir, ob wir jetzt auch auf die Daten aus dem Frontend zugreifen können.

Starten Sie zuerst Ihre Frontend neu. Um die aktuelle Sitzung zu stoppen, geben Sie Strg + C in Ihrem IDE -Terminalfenster ein.
Sobald das Frontend neu gestartet ist, öffnen Sie ein neues Terminalfenster und geben Sie den folgenden Befehl ein (mit seiner Ausgabe angezeigt):

> curl http://localhost:3000/api/greet
Greetings from CodeBean!

Abrufen Sie Daten aus dem Feder -Boot -Backend im React -Frontend ab

Wir sind fast da. Wir werden nun die Daten aus dem Backend abrufen, um in der Frontend zu zeigen.
Öffnen Sie Ihren /frontend/src -Ordner. Fügen Sie einen Ordner namens components hinzu.
Fügen Sie im Ordner components eine Datei namens Greet.js hinzu

Gemäß den Best Practices React Best Practices enthält der Komponentenordner alle Dateien, die als Komponente fungieren.
Nach den Best Practices der React -Bestätigung beginnen die Komponentennamen mit einem Großbuchstaben.

Ihre /src -Ordnerstruktur sieht jetzt so aus:

 .
├─ ...
├─ components
│   └─ Greet.js
└─ ...

Fügen Sie den folgenden Code Ihrer Datei Greet.js hinzu.

 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 ;

Öffnen Sie nun Ihre App.js -Datei im Ordner /frontend/src .
Hier importieren wir die Komponente Greet.js , indem wir import Greet from './components/Greet'; und <Greet /> zur Datei App.js
Ihr Code sollte so aussehen:

 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 ;

Ihr React -Frontend sollte nun den Text von Ihrer Backend -API von Ihrer Backend -API anzeigen.

Glückwunsch!

Ihr React -Frontend ist jetzt mit Ihrem Spring -Boot -Backend verbunden, mit dem Ihre Anwendung Daten aus/an Ihren Server abrufen und schreiben kann.

Ich hoffe, Sie haben es genossen, diesem Tutorial zu folgen. Vergessen Sie nicht, diesem Repository einen Stern zu geben.
Folgen Sie der Codebean University auf Github und werden Sie mit neuen interessanten Tutorials aktualisiert.