React? Flask? ???? ???? ???? ?? ? ??????? ???? ??

??:
???? ????? ? ??????? ?? ??? ?? ? ????? ????? ????. ?? ???? ??? ?? ??? ?? ??? ???? ?? ?? ?? ??? ???? ???? ??????? ???? ?? ?? ? ????? ????. React? Flask? ????? ? ??? ??? ?? ?? ?? ?? ???????, ?? ? ???? ???? ???? ?? ? ??????? ?????. ? ???? React? Flask? ???? ???? ???? ?? ? ??????? ???? ??? ??? ???? ???? ?? ??? ?????.

1. React ??:
React? ??? ????? ??? ?? Facebook? ?? ?? JavaScript ????????. ????? ??? ???? ???? ???? ???? ????? ?? ? ???, ? ????? ?? ??? ??? ????? ??? ? ????. ? ???? ??? ?? ????? ?? ???? ?? ????.

2. Flask ??:
Flask? Python?? ??? ?? ? ?????? ????????. Werkzeug ? Jinja2 ?????? ???? ?????? ???? ?? ???? ?????. Flask? ? ??????? ??? ??? ? ?? ??? ???? ?? ????? ? ?????? ?? ?? ??? ? ????.

3. React ????? ??:

1. React ???? ??:
   ?? Create React App ??? ???? React ????? ???? ???. ???? ?? ?? ??? ?????.

npx create-react-app my-app

? ??? ?? ????? my-app??? React ????? ?????.

2. React ?? ?? ??:
   src ????? App.js?? ??? ??? ?? ??? ?????.

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>計數(shù)器</h1>
      <p>當前計數(shù)：{count}</p>
      <button onClick={handleIncrement}>增加</button>
      <button onClick={handleDecrement}>減少</button>
    </div>
  );
}

export default App;

? ??? ??? ?? ???? ?? ??? ???? ???? ???? ??? ?? ?? ? ?? ??? ? ????. ??? ???? ??? ? ?????. ?? ??? ????? 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')
);

? ??? ??? App ?? ??? ID? ?? DOM ??? ????? ????. ???.

4. Flask ??? ??:

1. Flask ??:
   ????? ?? ??? ???? Flask ?????? ?????.

pip install flask

2. Flask ?????? ???:
   app.py?? ??? ??? ?????. it ?? ??:

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 ???? ??? ?? handlerIncrement ? handlerDecrement ??? ?????.

...
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));
};
...

fetch API? ?????. ???? GET ??? ?? ?? ???? ??? ??? ?? ?????.

2. POST ?? ??? ? ??? ????:
   App.js ???? ??? ?? handlerIncrement ? handlerDecrement ??? ?????.

...
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));
};
...

????? fetch API? ???? POST ??? ??? ??? ?? ?????. ?? ??. ?? ?? ?? ???? ????? ?? ?? ?????.

6. ??:
? ???? React? Flask? ???? ???? ???? ?? ? ??????? ???? ??? ??? ?????. ????? ???? ????? ? ?? ??? React? ?? ??? ? ???, Flask? ??? ?????? ?? ? ??? ??? ?????. ?????? ??? ?? ??? ?? ??? ????? ??? ????? ?????. ?? ?? ??? ?? ??? ?? ?? ? ??? ? ?? ??? ??? ?????????. ? ?? React? Flask? ???? ? ??????? ????? ????? ??? ??? ????.

? ??? React? Flask? ???? ???? ???? ?? ? ??????? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!