Flask + React でHello World

PythonのFlaskとJavaScriptのReactを使ってHello Worldを出力させたいと思います。
そしてメッセージを送って、出力させるところまで一気にやります。

簡単なサーバー側とフロント側での実装がこちらの記事でできるようになります。

create-react-app コマンドを使用してReactを作ります。
設定未だの方はこちらからご覧ください。

あわせて読みたい
React環境設定をしてHelloWorldを表示しよう 面倒な環境設定。既にインストール済みの場合もあると思います。バージョンの確認をしてインストール済みかどうかを確認してください。 Node.jsのインストール 下記のUR...

まずは今回作成するファイル階層を確認します。

目次

ファイル階層

app
  ├── backend
      └── main.py
  └── frontend
        ├── node_modules
        ├── package.json
        ├── public
        ├── README.md
        ├── yarn.lock
        └── src
            ├── その他省略...
            ├── App.js
            └── index.js


コマンドを使って上記のファイル構成を作成します。
こちらのコマンドでファイル構成が完成します。

$ mkdir app
$ cd app
$ mkdir backend frontend
$ touch backend/main.py
$ create-react-app frontend

Success!メッセージが表示されていればOKです。

Success! Created app at /Users/user/workspace/app

Reactで必要なモジュール(axios)もここで取得しておきます。

$ cd frontend
$ yarn add axios
$ cd ../


これで前準備OKです。コードを書いていきます。

サーバー側(Flask)


app/backend/main.py のファイルを編集していきます。

from flask import Flask
from flask import request, make_response, jsonify
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
@app.route('/index', methods = ['GET'])
def hello():
    text = 'Hello World';
    response = {'result': text};
    return make_response(jsonify(response));
@app.route('/helloworld', methods = ['GET', 'POST'])
def index():
    text = 'Hello World';
    response = {'result': text};
    return make_response(jsonify(response));
@app.route("/post", methods=['GET','POST'])
def parse():
    data = request.get_json()
    text = data['post_text']
    response = {'result': text}
    return make_response(jsonify(response))
if __name__ == '__main__':
    app.run(debug=True, port=5000, threaded=True)


フロント側(React)


app/frontend/src/App.js の編集をしていきます。
既に何か書かれていますが、全て消して下記で上書きしてください。

import React from 'react';
import axios from 'axios';
import './App.css';
export class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
      labelValue: ''
    };
this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); this.updateState = this.updateState.bind(this);
}
render() {
    return (
      <div className="App">
        <h1>メッセージ</h1>
        <form onSubmit={this.handleSubmit}>
          <div>
            <label>
              <textarea name="text" cols="50" rows="3" value={this.state.labelValue} onChange={this.handleChange} />
            </label>
          </div>
          <input type="submit" value="送る" />
        </form>
        <form onSubmit={this.handleSubmitHelloWorld}>
          <input type="submit" value="Hello World" />
        </form>
        <div>
          <span>{this.state.value}</span>
        </div>
      </div>
    );
  };
posting = (url, text) => {
    const data = {
      post_text: text
    };
    this.requestPost(url, data)
    .then(response => {
      this.updateState(response.data.result);
    });
  };
requestPost = (url, data) => {
    return axios.post(url, data);
  };
handleSubmit = event => {
    const url = 'http://127.0.0.1:5000/post'
    this.posting(url, this.state.labelValue);
    event.preventDefault();
  };
handleSubmitHelloWorld = event => {
    const url = 'http://127.0.0.1:5000/helloworld';
    this.posting(url, this.state.labelValue);
    event.preventDefault();
  };
handleChange = event => {
    this.setState({ labelValue: event.target.value });
  };
  updateState = value => {
    this.setState({
      value: value,
      labelValue: ''
    });
  };
};
export default App;

実行

ターミナルが2つ必要になります。

サーバーの起動(※ app上にいる想定です)

$ python ./backend/main.py

フロント側の起動(※ app上にいる想定です)

$ cd frontend
$ yarn start

起動を止めたい時は「commnad + c 」で止まります。

これで

http://localhost:3000/

にアクセスすると画面が表示されると思います。


Hello World のボタンと実際にメッセージを入れて送ってみて、うまく表示されれば成功です。

動かないとき


・サーバーを起動したか確認 ($ python ./backend/main.py)
・フロントを起動したか確認 ($ yarn start)
・コードの見直し

所感

たったこれだけ作るのにすごい苦労しました。
サーバーとフロントをつなげるだけでとても大変でした。

無事動いた方おめでとうございます。
お役に立ててたら幸いです。

以上になります。お疲れさまでした。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次