React と Java Spring Boot を使用したレスポンシブ Web アプリケーションの構築

ユーザーがさまざまなデバイスや画面サイズから Web サイトにアクセスする今日の世界では、応答性の高い Web アプリケーションを作成することが不可欠です。 React の強力なフロントエンド機能と Java Spring Boot の堅牢なバックエンド フレームワークを組み合わせることで、優れたユーザー エクスペリエンスを提供する、スケーラブルで応答性の高い Web アプリケーションを構築できます。

React と Spring Boot を使用する理由

• React: ユーザー インターフェイスを構築するための人気のある JavaScript ライブラリである React を使用すると、再利用可能な UI コンポーネントの作成が可能になり、動的でインタラクティブな Web アプリケーションの開発が容易になります。 React のコンポーネントベースのアーキテクチャと仮想 DOM により、React は非常に効率的でスケーラブルになります。

• Spring Boot: Java ベースのバックエンド アプリケーションの開発を簡素化するフレームワークである Spring Boot は、マイクロサービス開発のための包括的なインフラストラクチャ サポートを提供します。構成、依存関係の注入、セキュリティなどの強力なツールを提供します。

開発環境のセットアップ
開始するには、React 用の Node.js と Spring Boot 用の JDK を使用して開発環境をセットアップする必要があります。

1. Node.js と npm をインストールします:
2. 公式 Web サイトから Node.js をダウンロードしてインストールします。

3. ターミナルでnode -v と npm -v を実行して、インストールを確認します。

4. Java と Spring Boot をインストールします:

5. 公式 Web サイトから JDK をダウンロードしてインストールします。

6. Spring Boot Web サイトの手順に従って 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 では、styled-component などの 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 エンドポイントを作成する: React フロントエンドからのリクエストを処理する単純な REST コントローラーを作成します。

@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 アプリケーションをデプロイするには、次のようないくつかのオプションがあります。

• Heraku: フロントエンド アプリケーションとバックエンド アプリケーションの両方のデプロイをサポートするクラウド プラットフォーム。
• AWS: Elastic Beanstalk、S3、RDS などのサービスを使用して、スケーラブルなデプロイメント ソリューションを実現します。
• Docker: アプリケーションをコンテナ化して、展開と拡張性を容易にします。

結論

React と Java Spring Boot を使用して応答性の高い Web アプリケーションを構築すると、両方のテクノロジーの長所を活用して、強力でスケーラブルなソリューションを作成できます。 React の動的ユーザー インターフェイスの作成における柔軟性と効率性は、Spring Boot の堅牢なバックエンド機能と組み合わせることで、開発者が多様なユーザー ニーズを満たす最新の Web アプリケーションを構築できるようになります。ベスト プラクティスに従い、これらの強力なフレームワークを活用することで、優れたユーザー エクスペリエンスを提供する高品質で応答性の高い Web アプリケーションを提供できます。

以上がReact と Java Spring Boot を使用したレスポンシブ Web アプリケーションの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。