In this complete guide, you'll learn how to connect Flask (Python backend) with React.js (frontend) to build a full-stack web application. We'll cover:

✅ Setting up a Flask REST API
✅ Creating a React.js frontend
✅ Connecting React with Flask using Fetch API & Axios
✅ Handling CORS (Cross-Origin Resource Sharing)
✅ Sending & Receiving Data Between Frontend & Backend

By the end, you'll have a fully functional Flask + React app that communicates seamlessly!

Why Flask + React.js?

🔹 Flask → Lightweight Python backend for APIs
🔹 React.js → Powerful frontend for dynamic UIs
🔹 Perfect combo for full-stack apps (startups, dashboards, SaaS products)

Prerequisites

Before we start, make sure you have:

• Python 3.6+ (for Flask)
• Node.js & npm (for React)
• Basic knowledge of Flask, React, and REST APIs

Step 1: Setting Up the Flask Backend

1. Create a Flask Project

mkdir flask-react-app
cd flask-react-app
python -m venv venv
source venv/bin/activate  # On Windows: `venv\Scripts\activate`

2. Install Flask & Flask-CORS

pip install flask flask-cors

3. Create server.py (Flask API)

from flask import Flask, jsonify, request
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # Enable CORS for all routes

# Sample data
books = [
    {"id": 1, "title": "Python for Beginners", "author": "John Doe"},
    {"id": 2, "title": "React.js Fundamentals", "author": "Jane Smith"},
]

# API Routes
@app.route('/api/books', methods=['GET'])
def get_books():
    return jsonify(books)

@app.route('/api/books', methods=['POST'])
def add_book():
    new_book = request.get_json()
    books.append(new_book)
    return jsonify({"message": "Book added successfully!"}), 201

if __name__ == '__main__':
    app.run(debug=True)

4. Run the Flask Server

python server.py

API Endpoints:

• GET → http://localhost:5000/api/books
• POST → http://localhost:5000/api/books

Step 2: Setting Up the React Frontend

1. Create a React App

npx create-react-app client
cd client

2. Install Axios (for API calls)

npm install axios

3. Modify src/App.js

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import './App.css';

function App() {
  const [books, setBooks] = useState([]);
  const [title, setTitle] = useState('');
  const [author, setAuthor] = useState('');

  // Fetch books from Flask API
  useEffect(() => {
    axios.get('http://localhost:5000/api/books')
      .then(res => setBooks(res.data))
      .catch(err => console.log(err));
  }, []);

  // Add a new book
  const addBook = () => {
    axios.post('http://localhost:5000/api/books', { 
      id: books.length + 1, 
      title, 
      author 
    })
    .then(res => {
      alert(res.data.message);
      setBooks([...books, { id: books.length + 1, title, author }]);
      setTitle('');
      setAuthor('');
    })
    .catch(err => console.log(err));
  };

  return (
    <div className="App">
      <h1>Flask + React Bookstore</h1>
      
      <div className="form">
        <input 
          type="text" 
          placeholder="Title" 
          value={title} 
          onChange={(e) => setTitle(e.target.value)} 
        />
        <input 
          type="text" 
          placeholder="Author" 
          value={author} 
          onChange={(e) => setAuthor(e.target.value)} 
        />
        <button onClick={addBook}>Add Book</button>
      </div>

      <div className="books">
        <h2>Book List</h2>
        <ul>
          {books.map(book => (
            <li key={book.id}>
              <strong>{book.title}</strong> by {book.author}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default App;

4. Run the React App

npm start

Visit → http://localhost:3000

Step 3: Connecting Flask & React

1. Fetching Data (GET Request)

React fetches book data from Flask when the page loads:

useEffect(() => {
  axios.get('http://localhost:5000/api/books')
    .then(res => setBooks(res.data))
    .catch(err => console.log(err));
}, []);

2. Sending Data (POST Request)

React sends new book data to Flask:

axios.post('http://localhost:5000/api/books', { 
  id: books.length + 1, 
  title, 
  author 
})

3. Handling CORS

Flask needs flask-cors to allow React requests:

from flask_cors import CORS
CORS(app)  # Allow all origins (for development)

Step 4: Testing the Full-Stack App

✅ Flask Backend: Running on http://localhost:5000
✅ React Frontend: Running on http://localhost:3000

Try these actions:

1. View books (loaded from Flask)
2. Add a new book (saved to Flask)

Common Issues & Fixes

1. CORS Errors

🔹 Solution: Ensure flask-cors is installed and configured.

2. Flask Server Not Detecting React Changes

🔹 Solution: Run Flask in debug mode (app.run(debug=True)).

3. React Not Updating After POST

🔹 Solution: Manually update state after a successful POST:

.then(res => {
  setBooks([...books, { id: books.length + 1, title, author }]);
})

Conclusion

You’ve successfully connected Flask with React.js! 🎉

🔹 Flask handles the backend (API & database).
🔹 React manages the frontend (UI & user interactions).

Next Steps:

✅ Add user authentication (JWT)
✅ Connect to a real database (SQLAlchemy, MongoDB)
✅ Deploy to production (Heroku, Vercel, AWS)