Building a Full-Stack Web Application with Flask and React

Introduction

In the world of web development, combining a powerful backend with a dynamic frontend can create a seamless and efficient user experience. Today, we'll explore how to build a full-stack web application using Flask for the backend and React for the frontend. This guide will walk you through setting up both frameworks, connecting them, and creating a simple application to get you started.

Why Flask and React?

Flask is a micro web framework written in Python. It's lightweight, easy to set up, and great for building scalable web applications. Flask gives you the flexibility to structure your application the way you want without imposing strict guidelines.

React, developed by Facebook, is a popular JavaScript library for building user interfaces. It excels at creating interactive and dynamic UIs with reusable components, making your frontend code more manageable and efficient.

Setting Up Flask

First, let's set up the backend using Flask. Follow these steps to get started:

1. Install Flask: Ensure you have Python installed. Then, create a virtual environment and install Flask.

    python3 -m venv venv
    source venv/bin/activate  # On Windows use `venv\Scripts\activate`
    pip install Flask
   

2. Create a Basic Flask App: Create a new directory for your project and add a file named app.py.

    from flask import Flask, jsonify
   
    app = Flask(__name__)
   
    @app.route('/api/data')
    def get_data():
        return jsonify({"message": "Hello from Flask!"})
   
    if __name__ == '__main__':
        app.run(debug=True)
   

3. Run Your Flask App:

    python app.py
   

   You should see your Flask app running at http://127.0.0.1:5000.

Setting Up React

Now, let's set up the frontend using React. We’ll use Create React App, a convenient tool to set up a new React project.

1. Install Node.js and npm: Make sure you have Node.js and npm installed on your machine.

2. Create a New React App:

    npx create-react-app my-app
    cd my-app
   

3. Start Your React App:

    npm start
   

   Your React app should now be running at http://localhost:3000.

Connecting Flask and React

To connect your Flask backend to your React frontend, we'll make API calls from React to Flask.

1. Fetch Data from Flask in React: In your React project, open src/App.js and modify it to fetch data from your Flask API.

    import React, { useEffect, useState } from 'react';
    import './App.css';
   
    function App() {
      const [data, setData] = useState(null);
   
      useEffect(() => {
        fetch('/api/data')
          .then(response => response.json())
          .then(data => setData(data));
      }, []);
   
      return (
        <div className="App">
          <header className="App-header">
            <h1>Flask React App</h1>
            {data ? <p>{data.message}</p> : <p>Loading...</p>}
          </header>
        </div>
      );
    }
   
    export default App;
   

2. Proxy Requests to Flask: To avoid CORS issues, set up a proxy in your React app. Add the following line to your package.json in the React project:

    "proxy": "http://127.0.0.1:5000",
   

Running the Full-Stack Application

1. Start Flask Backend:

    python app.py
   

2. Start React Frontend:

    npm start
   

Your React app should now fetch data from the Flask backend and display it. Open your browser and navigate to http://localhost:3000 to see your full-stack application in action.

Conclusion

Congratulations! You've built a simple yet powerful full-stack web application using Flask and React. This setup forms a solid foundation for more complex applications. You can now expand your app by adding more routes in Flask and more components in React. Happy coding!