React と Flask を使用してシンプルで使いやすい Web アプリケーションを構築する方法

React と Flask を使用してシンプルで使いやすい Web アプリケーションを構築する方法

はじめに:
インターネットの発展に伴い、 Web アプリケーションはますます多様化し、複雑化しています。使いやすさとパフォーマンスに対するユーザーの要件を満たすために、最新のテクノロジー スタックを使用してネットワーク アプリケーションを構築することがますます重要になっています。 React と Flask は、フロントエンドおよびバックエンド開発用の 2 つの非常に人気のあるフレームワークであり、うまく連携してシンプルで使いやすい Web アプリケーションを構築します。この記事では、React と Flask を使ってシンプルで使いやすい Web アプリケーションを構築する方法と、具体的なコード例を詳しく紹介します。

1. React の概要:
React は、ユーザー インターフェイスを構築するための Facebook のオープンソース JavaScript ライブラリです。コンポーネント化の考え方を採用しており、開発者はページを独立したコンポーネントに分割することができ、各コンポーネントは独自のステータスと動作を独立して管理できます。この設計により、開発がよりモジュール化され、保守しやすくなります。

2. Flask の紹介:
Flask は、Python で書かれた軽量の Web アプリケーション フレームワークです。 Werkzeug および Jinja2 ライブラリに基づいて開発されており、使いやすく柔軟性に優れています。 Flask は、Web アプリケーションを迅速に構築する機能を提供し、他のライブラリやフレームワークと簡単に使用できます。

3. React フロントエンドを構築する:

1. React プロジェクトを作成する:
   まず、Create React App ツールを使用して React プロジェクトを作成する必要があります。コマンド ラインを開き、次のコマンドを実行します。

npx create-react-app my-app

このコマンドは、現在のディレクトリに my-app という名前の React プロジェクトを作成します。

2. React コンポーネントの作成:
   App.js という名前のファイルを src ディレクトリに作成し、次のコードを編集します:

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  
  const handleIncrement = () => {
    setCount(prevCount => prevCount + 1);
  };
  
  const handleDecrement = () => {
    setCount(prevCount => prevCount - 1);
  };
  
  return (
    <div>
      <h1 id="计数器">计数器</h1>
      <p>当前计数：{count}</p>
      <button onClick={handleIncrement}>增加</button>
      <button onClick={handleDecrement}>减少</button>
    </div>
  );
}

export default App;

この単純なカウンター コンポーネントにはテキストが含まれています現在のカウントと 2 つのボタンが表示され、ボタンをクリックするとカウントを増減できます。このコンポーネントは、React の useState フックを内部で使用して、カウント状態を管理します。

3. React コンポーネントのレンダリング:
   src ディレクトリの Index.js ファイルで、元のコードを次のコードに置き換えます:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

この役割code ルートの ID を持つ DOM 要素に App コンポーネントをレンダリングします。

4. Flask バックエンドを構築する:

1. Flask をインストールする:
   コマンド ラインで次のコマンドを実行して、Flask ライブラリをインストールします:

pip install flask

2. Flask アプリケーションを作成します:
   app.py という名前のファイルを作成し、次のコードを編集します:

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/counter', methods=['GET'])
def get_counter():
    counter = 0
    return jsonify(counter)

if __name__ == '__main__':
    app.run(debug=True)

このコードは、app という名前の Flask アプリケーションを作成し、get_counter という名前のルートを定義しますGET リクエストを処理し、カウンターの初期値を返すために使用されます。

3. Flask アプリケーションを実行します:
   コマンド ラインで次のコマンドを実行して、Flask アプリケーションを実行します:

python app.py

このコマンドはローカル サーバーを起動します。デフォルトではポート 5000 でリッスンします。

5. フロントエンドとバックエンドの接続:

1. GET リクエストを送信してデータを取得します:
   App.js ファイルで、handleIncrement 関数と handleDecrement 関数を編集します。

...
const handleIncrement = () => {
  fetch('/api/counter')
    .then(response => response.json())
    .then(data => setCount(data));
};

const handleDecrement = () => {
  fetch('/api/counter')
    .then(response => response.json())
    .then(data => setCount(data));
};
...

ここではフェッチ API を使用して GET リクエストを送信し、カウント値をコールバック関数に設定します。

2. POST リクエストを送信してデータを更新します。
   App.js ファイルで、handleIncrement 関数と handleDecrement 関数を次のように編集します。

...
const handleIncrement = () => {
  fetch('/api/counter', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ count: count + 1 }),
  })
    .then(response => response.json())
    .then(data => setCount(data));
};

const handleDecrement = () => {
  fetch('/api/counter', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ count: count - 1 }),
  })
    .then(response => response.json())
    .then(data => setCount(data));
};
...

フェッチ API が使用されます。ここで POST リクエストを送信し、リクエスト本文にカウント値を含めます。次に、更新されたカウント値をコールバック関数に設定します。

6. 概要:
この記事では、React と Flask を使用してシンプルで使いやすい Web アプリケーションを構築する方法を詳しく紹介します。フロントエンド ページのコンポーネント化と状態管理は React を通じて実現でき、Flask はバックエンド インターフェイスの構築とデータ管理を提供します。フロントエンドとバックエンド間の接続を通じて、データの対話とページの更新を実現できます。上記のコード例は、実際のニーズに応じて拡張および変更できる単純なカウンター アプリケーションです。この記事が、React と Flask を使用して Web アプリケーションを構築したい開発者に役立つことを願っています。

以上がReact と Flask を使用してシンプルで使いやすい Web アプリケーションを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。