使用 React 和 Java Spring Boot 建立響應式 Web 應用程式

在當今世界，使用者透過各種裝置和螢幕尺寸造訪網站，創建響應式 Web 應用程式至關重要。將 React 強大的前端功能與 Java Spring Boot 強大的後端框架相結合，您可以建立可擴展且響應靈敏的 Web 應用程序，從而提供卓越的用戶體驗。

為什麼要用 React 和 Spring Boot？

• React：React 是一個用於建立使用者介面的流行 JavaScript 函式庫，它允許建立可重複使用的 UI 元件，從而可以輕鬆開發動態和互動式 Web 應用程式。 React 基於元件的架構和虛擬 DOM 使其高效且可擴展。

• Spring Boot：Spring Boot 是一個簡化基於 Java 的後端應用程式開發的框架，Spring Boot 為開發微服務提供了全面的基礎設施支援。它提供了強大的配置、依賴注入和安全性等功能的工具。

設定您的開發環境
首先，您需要使用 Node.js for React 和 JDK for Spring Boot 設定開發環境。

1. 安裝 Node.js 和 npm:
2. 從官網下載並安裝Node.js。

3. 透過在終端機中執行 node -v 和 npm -v 來驗證安裝。

4. 安裝 Java 和 Spring Boot:

5. 從官網下載並安裝JDK。

6. 依照 Spring Boot 網站上的說明安裝 Spring Boot CLI。

建立 React 前端
首先使用 Create React App 建立一個新的 React 項目，這是一個無需配置即可設定現代 Web 開發環境的工具。

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

這將建立一個新的 React 應用程式並啟動開發伺服器。現在您可以開始建立響應式 UI 元件。

建構響應式元件:
React 可以使用 CSS-in-JS 函式庫（如樣式元件）或直接使用 CSS 媒體查詢輕鬆建立響應式元件。

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;

建立 Spring Boot 後端

使用 Spring Initializr 建立一個新的 Spring Boot 專案。選擇必要的依賴項，例如 Spring Web、Spring Data JPA 以及任何資料庫連接器（例如 MySQL 或 PostgreSQL）。

1. 初始化項目:
2. 訪問Spring Initializr。
3. 選擇您的項目元資料和相依性。

4. 產生並下載專案。

5. 設定應用程式:

6. 解壓縮下載的專案並在您喜歡的 IDE 中開啟它。配置應用程式屬性以連接到您的資料庫。
   

# 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 端點： 建立一個簡單的 REST 控制器來處理來自 React 前端的請求。

@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. 定義產品實體與儲存庫：

@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 與 Spring Boot 整合
若要將 React 前端與 Spring Boot 後端集成，您可以使用 Axios 或 Fetch API 向 Spring Boot REST 端點發出 HTTP 請求。

1. 在 React 中安裝 Axios：

npm install axios

1. 從 Spring Boot 取得資料：

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;

部署應用程式

應用程式準備就緒後，您需要部署它。部署 React 和 Spring Boot 應用程式有多種選項，例如：

• Heroku：支援部署前端和後端應用程式的雲端平台。
• AWS：使用 Elastic Beanstalk、S3 和 RDS 等服務來實現可擴展的部署解決方案。
• Docker：容器化您的應用程式以方便部署和可擴展性。

結論

使用 React 和 Java Spring Boot 建立響應式 Web 應用程序，利用這兩種技術的優勢來創建強大且可擴展的解決方案。 React 在創建動態使用者介面方面的靈活性和效率，與 Spring Boot 強大的後端功能相結合，使開發人員能夠建立可以滿足不同使用者需求的現代 Web 應用程式。透過遵循最佳實踐並利用這些強大的框架，您可以交付高品質、響應迅速的 Web 應用程序，從而提供出色的用戶體驗。

以上是使用 React 和 Java Spring Boot 建立響應式 Web 應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！