How to build simple and easy-to-use web applications with React and Flask

How to use React and Flask to build simple and easy-to-use web applications

Introduction:
With the development of the Internet, the needs of web applications are becoming more and more diverse. ization and complexity. In order to meet user requirements for ease of use and performance, it is becoming increasingly important to use modern technology stacks to build network applications. React and Flask are two very popular frameworks for front-end and back-end development, and they work well together to build simple and easy-to-use web applications. This article will introduce in detail how to use React and Flask to build simple and easy-to-use web applications, and give specific code examples.

1. Introduction to React:
React is Facebook’s open source JavaScript library for building user interfaces. It adopts the idea of ​​componentization, allowing developers to divide the page into independent components, and each component can manage its own status and behavior independently. This design makes development more modular and maintainable.

2. Introduction to Flask:
Flask is a lightweight web application framework written in Python. It is developed based on Werkzeug and Jinja2 libraries, and is easy to use and highly flexible. Flask provides the ability to quickly build web applications and can be easily used with other libraries and frameworks.

3. Build the React front-end:

1. Create a React project:
   First, we need to use the Create React App tool to create a React project. Open the command line and execute the following command:

npx create-react-app my-app

This command will create a React project named my-app in the current directory.

2. Writing React components:
   Create a file named App.js in the src directory and edit the following code:

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;

This simple counter component Contains a text displaying the current count and two buttons. Clicking the buttons can increase and decrease the count. The component uses React's useState hook internally to manage the counting state.

3. Rendering React components:
   In the index.js file in the src directory, replace the original code with the following code:

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

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

The role of this code It renders the App component to the DOM element with the id of root.

4. Build the Flask backend:

1. Install Flask:
   Execute the following command on the command line to install the Flask library:

pip install flask

2. Create a Flask application:
   Create a file named app.py and edit the following code:

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)

This code creates a Flask application named app and defines A route named get_counter is used to process GET requests and return the initial value of a counter.

3. Run the Flask application:
   Execute the following command in the command line to run the Flask application:

python app.py

This command will start a local server, which will listen by default. on port 5000.

5. Front-end and back-end connections:

1. Send a GET request and obtain data:
   In the App.js file, edit the handleIncrement and handleDecrement functions as follows:

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

The fetch API is used here to send a GET request, and then the count value is set in the callback function.

2. Send POST request and update data:
   In the App.js file, edit the handleIncrement and handleDecrement functions as follows:

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

The fetch API is used here to send POST request, and bring the count value in the request body. Then set the updated count value in the callback function.

6. Summary:
This article introduces in detail how to use React and Flask to build simple and easy-to-use web applications. The componentization and state management of the front-end page can be achieved through React, while Flask provides the construction and data management of the back-end interface. Through the connection between the front and back ends, data interaction and page updates can be achieved. The above code example is a simple counter application that can be expanded and modified according to actual needs. I hope this article will be helpful to developers who want to build web applications using React and Flask.

The above is the detailed content of How to build simple and easy-to-use web applications with React and Flask. For more information, please follow other related articles on the PHP Chinese website!