Flask + React でHello World

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

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

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

React環境設定をしてHelloWorldを表示しよう

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

1. ファイル階層
2. サーバー側(Flask)
3. フロント側(React)
4. 実行
5. 動かないとき
6. 所感

ファイル階層

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;