React移行 - Githubissues

フロントエンドがHTMLだけで開発されている既存のFlaskアプリケーションにReactを安全に追加する方法はいくつかあります。以下の手順を参考にしてください。

1. 環境の準備

まず、開発環境にNode.jsとnpm（Node Package Manager）をインストールします。これにより、Reactやその他の必要なパッケージを管理できます。

2. Reactプロジェクトの初期化

ReactプロジェクトをFlaskプロジェクトのディレクトリ内に作成します。以下のコマンドを使用します。

npx create-react-app my-react-app

これにより、my-react-appというディレクトリにReactの基本プロジェクトが作成されます。

3. Reactのビルド設定

Reactアプリケーションをビルドして静的ファイルとしてFlaskに提供するために、package.jsonにビルドスクリプトを追加します。

"scripts": {
 "build": "react-scripts build",
 ...
}

4. Reactビルド出力の配置

my-react-appディレクトリ内で以下のコマンドを実行し、Reactアプリケーションをビルドします。

npm run build

ビルドが成功すると、my-react-app/buildディレクトリが生成されます。このディレクトリにあるファイルをFlaskの静的ファイルディレクトリ（例えば、static）にコピーします。

5. Flaskテンプレートの変更

Flaskのテンプレート（HTMLファイル）をReactのビルドファイルを参照するように変更します。例：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flask with React</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>
<body>
<div id="root"></div>
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html>

6. Flaskルートの設定

Flaskのルート設定を行い、Reactアプリケーションのエントリーポイントを提供します。例：

from flask import Flask, render_template
app = Flask(__name__, static_folder='static', template_folder='templates')
@app.route('/')
def index():
   return render_template('index.html')
if __name__ == '__main__':
   app.run(debug=True)

7. 実行と確認

Flaskアプリケーションを起動し、ブラウザで確認します。

python app.py

ブラウザでhttp://localhost:5000にアクセスして、Reactアプリケーションが正しく表示されることを確認します。これで、既存のFlaskアプリケーションにReactを統合する基本的な方法が完了です。必要に応じて、Reactのコンポーネントや状態管理、APIの統合などを追加で実装していくことができます。

kuroneko-hornet / household_chore_record_app

React移行 #13