Java 프레임워크와 프런트엔드 React 프레임워크의 통합

Java 프레임워크와 React 프레임워크의 통합: 단계: 백엔드 Java 프레임워크를 설정합니다. 프로젝트 구조를 만듭니다. 빌드 도구를 구성합니다. React 앱을 만듭니다. REST API 엔드포인트를 작성합니다. 통신 메커니즘을 구성합니다. 실제 사례(Spring Boot + React): Java 코드: RESTful API 컨트롤러를 정의합니다. React 코드: API에서 반환된 데이터를 가져오고 표시합니다.

Java 프레임워크와 프런트엔드 React 프레임워크의 통합

현대 웹 개발에서는 백엔드 프레임워크가 프런트엔드 프레임워크와 함께 사용되어 복잡하고 대화형 애플리케이션을 만드는 경우가 많습니다. Java 프레임워크는 안정성과 견고성으로 인기가 있는 반면, React 프레임워크는 구성 요소화 및 상태 관리 기능으로 유명합니다.

통합 단계

Java 프레임워크와 React 프레임워크 통합에는 일반적으로 다음 단계가 포함됩니다.

1. 백엔드 Java 프레임워크 설정: Spring Boot 또는 Play Framework와 같은 Java 프레임워크를 서버에 설정 .
2. 프로젝트 구조 만들기: Java 코드와 React 코드를 분리하기 위해 프로젝트의 디렉터리 구조를 만듭니다.
3. Maven 또는 Gradle 구성: Maven 또는 Gradle 빌드 도구를 사용하여 종속성을 관리하고 프로젝트를 구성합니다.
4. Create React App: 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;

Demo

프로젝트에서 Spring Boot 서버와 React 애플리케이션을 실행하고 http://localhost:8080를 방문하세요. 그러면 서버에서 가져온 사용자 목록이 포함된 React 애플리케이션이 표시됩니다.

위 내용은 Java 프레임워크와 프런트엔드 React 프레임워크의 통합의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!