React フロントエンドとバックエンドの分離ガイド: フロントエンドとバックエンドの分離と独立したデプロイメントを実現する方法-jsチュートリアル-php.cn

React フロントエンドとバックエンドの分離ガイド: フロントエンドとバックエンドの分離と独立したデプロイメントを実現する方法

WBOY

リリース： 2023-09-28 10:48:29

オリジナル

1702 人が閲覧しました

React フロントエンドとバックエンドの分離ガイド: フロントエンドとバックエンドの分離と独立したデプロイメントを実現する方法

React フロントエンドとバックエンドの分離ガイド: フロントエンドとバックエンドの分離と独立したデプロイメントを実現する方法、具体的なコード例が必要です

今日の Web 開発環境では、フロントエンドとバックエンドを分離することがトレンドになっています。フロントエンドコードとバックエンドコードを分離することで、開発作業がより柔軟かつ効率的になり、チームのコラボレーションが促進されます。この記事では、React を使用してフロントエンドとバックエンドの分離を実現し、それによって分離と独立したデプロイの目標を達成する方法を紹介します。

まず、フロントエンドとバックエンドの分離とは何かを理解する必要があります。従来の Web 開発モデルでは、フロントエンドとバックエンドが結合されており、すべての HTML、CSS、JavaScript コードがバックエンドで生成され、フロントエンドとバックエンドのコードが混在します。フロントエンドとバックエンドの分離により、フロントエンドとバックエンドのコードが分離され、フロントエンドとバックエンドを独立して開発および展開できるようになります。

React は非常に人気のあるフロントエンドフレームワークであり、コンポーネントベースの開発モデルを提供し、フロントエンド開発をよりモジュール化し、保守を容易にします。フロントエンドとバックエンドの分離を実現するフロントエンドフレームワークとして React を使用します。

以下は、React Node.js を使用してフロントエンドとバックエンドの分離を実現する方法を示す具体的なコード例です。

まず、React プロジェクトを作成する必要があります。 create-react-app ツールを使用して、新しい React プロジェクトを作成できます。

npx create-react-app frontend

ログイン後にコピー

次に、バックエンドから返されたデータを表示する単純な React コンポーネントを作成します。 src フォルダーに新しいファイル HelloWorld.js を作成し、次のコードを追加します。

import React from 'react';

class HelloWorld extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: '',
    };
  }

  componentDidMount() {
    fetch('/api/helloworld')
      .then(response => response.json())
      .then(data => this.setState({ message: data.message }));
  }

  render() {
    return (
      <div>
        <h1>Hello World!</h1>
        <p>{this.state.message}</p>
      </div>
    );
  }
}

export default HelloWorld;

ログイン後にコピー

このコンポーネントはフェッチ API を使用してバックエンドからデータを取得し、ページにデータを表示します。

次に、バックエンドサーバーを作成する必要があります。 Node.js と Express フレームワークを使用して、単純なバックエンドサーバーを作成できます。プロジェクトのルートディレクトリに新しいファイル server.js を作成し、次のコードを追加します。

const express = require('express');
const app = express();

app.get('/api/helloworld', (req, res) => {
  res.send({ message: 'Hello World from the backend!' });
});

const port = process.env.PORT || 5000;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

ログイン後にコピー

このサーバーはポート 5000 をリッスンし、/api/helloworld の API インターフェイスを提供し、「Hello World」を含む API を返します。バックエンドから!」という JSON オブジェクト。

最後に、フロントエンドプロジェクトとバックエンドプロジェクトを接続する必要があります。 React プロジェクトのルートディレクトリに新しいファイル setupProxy.js を作成し、次のコードを追加します。

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

ログイン後にコピー

このファイルは、フロントエンド API リクエストをバックエンドアドレスに転送するために使用されます。

これで、フロントエンドプロジェクトとバックエンドプロジェクトを実行できるようになりました。ターミナルで、React プロジェクトのルートディレクトリと、server.js が配置されているディレクトリを入力し、次のコマンドを実行します。

# React项目
npm start

# 后端服务器
node server.js

ログイン後にコピー

http://localhost:3000 にアクセスすると、「バックエンドからの Hello World!」ページを含むファイル。

上記の例を通じて、React のフロントエンドとバックエンドの分離に成功し、フロントエンドとバックエンドを独立して開発およびデプロイできるようになりました。フロントエンドとバックエンドのコードを分離することで、プロジェクト構造をより適切に整理し、開発効率を向上させることができます。同時に、独立した展開により、プロジェクトの立ち上げとメンテナンスをより柔軟に行うことができます。

実際の開発では、特定のニーズとアーキテクチャに応じて適切なテクノロジースタックとフレームワークを選択し、フロントエンドとバックエンドの分離を実現できます。 React はあくまで選択肢の 1 つであり、上記の例を通じて、基本的な考え方と手法はすでにマスターできると思います。

要約すると、React フロントエンドとバックエンドを分離するには、次の手順が必要です。React プロジェクトの作成、フロントエンドコンポーネントの実装、バックエンドサーバーの作成、フロントエンドとバックエンドの接続フロントエンドプロジェクト。これらの手順を通じて、フロントエンドとバックエンドの分離と独立した展開を実現できます。

この記事があなたのお役に立てば幸いです。また、フロントエンドとバックエンドの分離の開発が成功することを願っています。

以上がReact フロントエンドとバックエンドの分離ガイド: フロントエンドとバックエンドの分離と独立したデプロイメントを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。