Erstellen reaktionsfähiger Webanwendungen mit React und Java Spring Boot

In der heutigen Welt, in der Benutzer über unterschiedliche Geräte und Bildschirmgrößen auf Websites zugreifen, ist die Erstellung reaktionsfähiger Webanwendungen unerlässlich. Durch die Kombination der leistungsstarken Front-End-Funktionen von React mit dem robusten Back-End-Framework von Java Spring Boot können Sie skalierbare und reaktionsfähige Webanwendungen erstellen, die ein außergewöhnliches Benutzererlebnis bieten.

Warum React und Spring Boot verwenden?

• React: React ist eine beliebte JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen und ermöglicht die Erstellung wiederverwendbarer UI-Komponenten, wodurch die Entwicklung dynamischer und interaktiver Webanwendungen vereinfacht wird. Die komponentenbasierte Architektur und das virtuelle DOM von React machen es äußerst effizient und skalierbar.

• Spring Boot: Spring Boot ist ein Framework, das die Entwicklung von Java-basierten Back-End-Anwendungen vereinfacht und eine umfassende Infrastrukturunterstützung für die Entwicklung von Microservices bietet. Es bietet unter anderem leistungsstarke Tools für Konfiguration, Abhängigkeitsinjektion und Sicherheit.

Einrichten Ihrer Entwicklungsumgebung
Um zu beginnen, müssen Sie Ihre Entwicklungsumgebung mit Node.js für React und JDK für Spring Boot einrichten.

1. Node.js und npm installieren:
2. Laden Sie Node.js von der offiziellen Website herunter und installieren Sie es.

3. Überprüfen Sie die Installation, indem Sie node -v und npm -v in Ihrem Terminal ausführen.

4. Java und Spring Boot installieren:

5. Laden Sie das JDK von der offiziellen Website herunter und installieren Sie es.

6. Installieren Sie Spring Boot CLI, indem Sie den Anweisungen auf der Spring Boot-Website folgen.

Erstellen des React-Frontends
Erstellen Sie zunächst ein neues React-Projekt mit Create React App, einem Tool, das eine moderne Webentwicklungsumgebung ohne Konfiguration einrichtet.

npx create-react-app my-react-app
cd my-react-app
npm start

Dadurch wird eine neue React-Anwendung erstellt und der Entwicklungsserver gestartet. Sie können jetzt mit der Erstellung Ihrer responsiven UI-Komponenten beginnen.

Responsive Komponenten erstellen:
React macht es einfach, reaktionsfähige Komponenten mithilfe von CSS-in-JS-Bibliotheken wie „styled-components“ oder durch direkte Verwendung von CSS-Medienabfragen zu erstellen.

import React from 'react';
import styled from 'styled-components';

const Container = styled.div`
  display: flex;
  flex-direction: column;
  padding: 20px;

  @media (min-width: 768px) {
    flex-direction: row;
  }
`;

const Item = styled.div`
  flex: 1;
  margin: 10px;
`;

function App() {
  return (
    <Container>
      <Item>Item 1</Item>
      <Item>Item 2</Item>
      <Item>Item 3</Item>
    </Container>
  );
}

export default App;

Erstellen des Spring Boot-Backends

Erstellen Sie ein neues Spring Boot-Projekt mit Spring Initializr. Wählen Sie die erforderlichen Abhängigkeiten wie Spring Web, Spring Data JPA und einen beliebigen Datenbankkonnektor wie MySQL oder PostgreSQL.

1. Initialisieren Sie das Projekt:
2. Besuchen Sie Spring Initializr.
3. Wählen Sie Ihre Projektmetadaten und Abhängigkeiten aus.

4. Generieren Sie das Projekt und laden Sie es herunter.

5. Einrichten der Anwendung:

6. Extrahieren Sie das heruntergeladene Projekt und öffnen Sie es in Ihrer bevorzugten IDE. Konfigurieren Sie die Anwendungseigenschaften für die Verbindung mit Ihrer Datenbank.
   

# src/main/resources/application.yml
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/mydatabase
    username: root
    password: password
  jpa:
    hibernate:
      ddl-auto: update
    show-sql: true

1. RESTful-Endpunkte erstellen: Erstellen Sie einen einfachen REST-Controller, um Anfragen vom React-Frontend zu verarbeiten.

@RestController
@RequestMapping("/api/products")
public class ProductController {

    @Autowired
    private ProductRepository productRepository;

    @GetMapping
    public List<Product> getAllProducts() {
        return productRepository.findAll();
    }

    @PostMapping
    public Product createProduct(@RequestBody Product product) {
        return productRepository.save(product);
    }
}

1. Definieren Sie die Produkteinheit und das Repository:

@Entity
public class Product {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private double price;

    // Getters and setters
}

public interface ProductRepository extends JpaRepository<Product, Long> {
}

React mit Spring Boot integrieren
Um das React-Front-End in das Spring Boot-Back-End zu integrieren, können Sie Axios oder die Fetch-API verwenden, um HTTP-Anfragen an die Spring Boot-REST-Endpunkte zu stellen.

1. Axios in React installieren:

npm install axios

1. Daten von Spring Boot abrufen:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function App() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    axios.get('/api/products')
      .then(response => setProducts(response.data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    <div>
      <h1>Product List</h1>
      <ul>
        {products.map(product => (
          <li key={product.id}>{product.name} - ${product.price}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Bereitstellen der Anwendung

Sobald Ihre Anwendung fertig ist, müssen Sie sie bereitstellen. Es gibt mehrere Optionen für die Bereitstellung von React- und Spring Boot-Anwendungen, wie zum Beispiel:

• Heroku: Eine Cloud-Plattform, die die Bereitstellung von Front-End- und Back-End-Anwendungen unterstützt.
• AWS: Nutzen Sie Dienste wie Elastic Beanstalk, S3 und RDS für eine skalierbare Bereitstellungslösung.
• Docker: Containerisieren Sie Ihre Anwendungen für eine einfache Bereitstellung und Skalierbarkeit.

Fazit

Das Erstellen reaktionsfähiger Webanwendungen mit React und Java Spring Boot nutzt die Stärken beider Technologien, um leistungsstarke und skalierbare Lösungen zu schaffen. Die Flexibilität und Effizienz von React bei der Erstellung dynamischer Benutzeroberflächen in Kombination mit den robusten Back-End-Funktionen von Spring Boot ermöglichen es Entwicklern, moderne Webanwendungen zu erstellen, die unterschiedliche Benutzeranforderungen erfüllen können. Indem Sie Best Practices befolgen und diese leistungsstarken Frameworks nutzen, können Sie hochwertige, reaktionsfähige Webanwendungen bereitstellen, die ein hervorragendes Benutzererlebnis bieten.

Das obige ist der detaillierte Inhalt vonErstellen reaktionsfähiger Webanwendungen mit React und Java Spring Boot. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!