Java フレームワークとフロントエンド React フレームワークの統合

Java フレームワークと React フレームワークの統合: 手順: バックエンド Java フレームワークをセットアップします。プロジェクト構造を作成します。ビルドツールを設定します。 React アプリを作成します。 REST API エンドポイントを作成します。通信メカニズムを構成します。実際のケース (Spring Boot + React): Java コード: RESTful API コントローラーの定義。 React コード: API によって返されたデータを取得して表示します。

Java フレームワークとフロントエンド React フレームワークの統合

現代の Web 開発では、複雑で対話型のアプリケーションを作成するために、バックエンド フレームワークがフロントエンド フレームワークと組み合わせて使用​​されることがよくあります。 Java フレームワークは安定性と堅牢性で人気があり、React フレームワークはコンポーネント化と状態管理機能で知られています。

統合手順

Java フレームワークと React フレームワークの統合には通常、次の手順が含まれます:

1. バックエンド Java フレームワークをセットアップする: Spring Boot や Play Framework などのサーバー上に Java フレームワークをセットアップします。 。
2. プロジェクト構造の作成: Java コードを React コードから分離するために、プロジェクトのディレクトリ構造を作成します。
3. Maven または Gradle を構成する: Maven または Gradle ビルド ツールを使用して依存関係を管理し、プロジェクトを構成します。
4. React アプリを作成する: create-react-app または同様のツールを使用して React アプリを作成し、プロジェクトに統合します。
5. REST API を作成する: Java フレームワークを使用して、React アプリによって呼び出される REST API エンドポイントを作成します。
6. 通信の構成: JSON または XML 形式でのデータの送信など、Java フレームワークと React アプリケーション間の通信メカニズムを構成します。

実践的なケース

以下は Spring Boot と React の統合を使用した実践的なケースです:

Java コード (Spring Boot コントローラー):

@RestController
@RequestMapping("/api")
public class UserController {

    @GetMapping("/users")
    public List<User> getAllUsers() {
        // 从数据库中获取所有用户
        return userService.getAllUsers();
    }

}

React コード (React コンポーネント):

import React, { useState, useEffect } from "react";

const UsersList = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    // 从后端获取用户列表
    fetch("/api/users")
      .then((res) => res.json())
      .then((data) => setUsers(data));
  }, []);

  return (
    <div>
      <h3 id="用户列表">用户列表</h3>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default UsersList;

デモ

プロジェクトで Spring Boot サーバーと React アプリケーションを実行し、http://localhost:8080 にアクセスします。これにより、サーバーから取得したユーザーのリストを含む React アプリケーションが表示されます。

以上がJava フレームワークとフロントエンド React フレームワークの統合の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。