Full-Stack Flask and React

Full-Stack Flask and React

by Olatunde Adedeji
Released October 2023
Publisher(s): Packt Publishing
ISBN: 9781803248448

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Get to grips with UI interaction, data modeling, API development, and documentation while building modern web apps for cloud deployment

Key Features

  • Combine Flask's pagination techniques with React's dynamic rendering for an enhanced user experience
  • Implement robust API development within Flask applications by performing CRUD operations
  • Improve Flask app scalability with blueprints using a modular development approach
  • Purchase of the print or Kindle book includes a free PDF eBook

Book Description

Developing an interactive, efficient, and fast enterprise web application requires both the right approach and tooling. If you are a web developer looking for a way to tap the power of React’s reusable UI components and the simplicity of Flask for backend development to develop production-ready, scalable web apps in Python, then this book is for you.

Starting with an introduction to React, a JavaScript library for building highly interactive and reusable user interfaces, you’ll progress to data modeling for the web using SQLAlchemy and PostgreSQL, and then get to grips with Restful API development. This book will aid you in identifying your app users and managing access to your web application. You’ll also explore modular architectural design for Flask-based web applications and master error-handling techniques. Before you deploy your web app on AWS, this book will show you how to integrate unit testing best practices to ensure code reliability and functionality, making your apps not only efficient and fast but also robust and dependable.

By the end of this book, you’ll have acquired deep knowledge of the Flask and React technology stacks, which will help you undertake web application development with confidence.

What you will learn

  • Explore the fundamentals of React for building user interfaces
  • Understand how to use JSX to render React components
  • Handle data and integrate third-party libraries and APIs into React applications
  • Secure your Flask application with user authentication and authorization
  • Discover how to use Flask RESTful API to build backend services with React frontend
  • Build modular and scalable Flask applications using blueprints

Who this book is for

This book is for Python web developers who want to build full-stack applications, as well as for frontend developers seeking to expand their skillset by employing Flask as a backend development tool. You’ll gain proficiency in both frontend and backend skills, and acquire the knowledge necessary to deploy solutions in the cloud using AWS. Prior knowledge of basic HTML, CSS, JavaScript, and Python programming will help you to get the most out of this book.

Table of contents

  1. Full-Stack Flask and React
  2. Contributors
  3. About the author
  4. About the reviewers
  5. Acknowledgment
  6. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
    4. Download the example code files
    5. Get in touch
    6. Share Your Thoughts
    7. Download a free PDF copy of this book
  7. Part 1 – Frontend Development with React
  8. Chapter 1: Getting Full Stack Ready with React and Flask
    1. Technical requirements
    2. An introduction to full stack web development
    3. Why should we choose React?
      1. Setting up the development environment with React
    4. Why should we choose Flask?
      1. Setting up the development environment with Flask
    5. Getting ready with Git
      1. How does Git work?
      2. Git versus GitHub
    6. What will we build?
    7. Summary
  9. Chapter 2: Getting Started with React
    1. Technical requirements
    2. Exploring a React project directory structure
    3. Arrow functions in React
    4. Understanding what destructuring is
    5. Default and named exports
    6. What is a React component?
      1. Function components
      2. Class components
      3. Component life cycle
    7. What are props?
      1. Passing data as props
    8. React state
    9. Summary
  10. Chapter 3: Managing State with React Hooks
    1. Technical requirements
    2. What is a Hook in React?
    3. Why use Hooks in React?
    4. Using useState to develop stateful components
      1. Passing state as props
      2. Conditional rendering with state
    5. Using useEffect to create side effects
    6. Using useContext to manage global state in React applications
      1. Understanding props drilling
      2. Using useContext to solve the props drilling problem
    7. Using useRef to directly access DOM elements and persist state values
    8. Using useReducer for state management
    9. Using useMemo to improve performance
      1. Prevents unnecessary component re-rendering
    10. Using useCallback to avoid re-rendering functions
    11. Using custom Hooks for code reusability
    12. Summary
  11. Chapter 4: Fetching Data with React APIs
    1. Technical requirements
    2. Fetching data using the Fetch API in React
    3. Fetching data using async/await syntax
    4. Fetching data using Axios
    5. Fetching data using the React Query in React
    6. Summary
  12. Chapter 5: JSX and Displaying Lists in React
    1. Technical requirements
    2. What is JSX?
    3. JSX versus HTML
    4. How JSX abstracts JavaScript
    5. Event handling in React
    6. Displaying lists in React
      1. Using key and id in JSX
    7. Nesting lists in JSX
    8. Looping over objects in JSX
      1. Using Object.keys()
      2. Using Object.values()
      3. Using Object.entries()
      4. Example of looping with Object.keys
    9. Summary
  13. Chapter 6: Working with React Router and Forms
    1. Technical requirements
    2. Routing with React Router
      1. Routers
      2. Components
      3. Hooks
    3. Adding React Router in React
      1. Setting up the routing configuration
      2. Adding links
      3. Adding a nested route
    4. Handling dynamic routes
      1. Using useParams
      2. Using useNavigate
    5. Using forms in React
    6. Controlled and uncontrolled form components
      1. Controlled form
      2. Uncontrolled form
    7. Handling user input – Input, TextArea, and Select
      1. Input
      2. TextArea
      3. Select
    8. Validating and sanitizing users’ data in React
      1. Implementing form validation
    9. Summary
  14. Chapter 7: React Unit Testing
    1. Technical requirements
    2. What is software testing?
    3. Introducing Jest
      1. Setting up the Jest environment
      2. Writing tests in Jest
    4. Unit-testing React components
      1. Writing a unit test for a stateless component
      2. Writing a unit test for a stateful component
    5. TDD
      1. Writing a single test case
      2. Writing minimal code that satisfies the test and making it pass
      3. Code refactoring
    6. Summary
  15. Part 2 – Backend Development with Flask
  16. Chapter 8: SQL and Data Modeling
    1. Technical requirements
    2. What is the relational data model?
    3. Exploring the different database relationships
      1. One-to-one (1:1) relationship
      2. One-to-many (1:M) relationship
      3. Many-to-many (M:M) relationship
    4. Setting up PostgreSQL, SQLAlchemy, and Alembic
      1. Setting up PostgreSQL
      2. Setting up SQLAlchemy
      3. Setting up Alembic
    5. Understanding database concepts for Flask applications
      1. RDBMS
      2. DB-APIs
      3. Client–server model interaction
    6. Understanding SQLAlchemy ORM basics
      1. The SQLAlchemy engine
      2. SQLAlchemy connection pools
      3. SQLAlchemy dialect
      4. SQLAlchemy data types – mapping between tables and classes
    7. Modeling data for a speakers’ conference web application
    8. Sending data to the PostgreSQL database from a Flask app
    9. Migration with Alembic
      1. Running migrations
    10. Summary
  17. Chapter 9: API Development and Documentation
    1. Technical requirements
    2. What is an API?
    3. Why use an API in web development
    4. Endpoint and payload anatomy
      1. Understanding the endpoint structure
      2. Understanding the payload structure
    5. Understanding HTTP requests/responses
      1. Request line
      2. HTTP responses
    6. Understanding HTTP status codes
    7. REST API design principles
      1. Client-server
      2. Statelessness
      3. Caching
      4. Uniform interface
      5. Layered system
      6. Code on demand (optional)
    8. Implementing a REST API in a Flask application
      1. Defining the application resources
      2. Defining the API endpoints
      3. Implementing the API endpoints
      4. JSONifying response data
      5. Adding query parameters to endpoints
      6. Passing variables to an endpoint
    9. API interaction with a database via CRUD operations
      1. Creating a venue resource
      2. Returning lists of venues
      3. Returning a single venue resource
      4. Updating a single venue resource
      5. Deleting a single venue resource
    10. API documentation
    11. Testing and documenting with Postman
    12. Summary
  18. Chapter 10: Integrating the React Frontend with the Flask Backend
    1. Technical requirements
    2. The Bizza application structure
      1. Application overview
      2. Breaking down the code structure into frontend and backend
    3. Configuring the React frontend for API consumption
    4. Making Flask backend-ready
    5. Handling forms in React and Flask
    6. Troubleshooting tips for the React frontend and the Flask backend
    7. Summary
  19. Chapter 11: Fetching and Displaying Data in a React-Flask Application
    1. Technical requirements
    2. Fetching and displaying data – the React-Flask approach
      1. Retrieving the speakers’ list from Flask
      2. Displaying data in React
    3. Adding data to a database – the React–Flask approach
      1. Adding data to Flask
      2. Adding the speaker data to the backend using the CreateSpeaker component
    4. Editing data – the React–Flask approach
      1. Editing data in Flask
      2. Displaying the edited data in React
    5. Deleting data from a database – the React–Flask approach
      1. Handling delete requests in Flask
      2. Handling delete requests in React
    6. Managing pagination in a React–Flask application
    7. Summary
  20. Chapter 12: Authentication and Authorization
    1. Technical requirements
    2. Understanding the fundamentals of information security
    3. Defining authentication and the authentication role in web application
    4. Implementing password security and hashing passwords
    5. Understanding access and authorization in web application development
    6. Adding authentication to your Flask application
      1. Flask backend
      2. React frontend
    7. Identifying system users and managing their information
    8. Session management
      1. Flask backend
      2. React Frontend
    9. Creating a password-protected dashboard
      1. Flask backend
      2. React frontend
    10. Implementing flash messages in Flask
      1. Flask backend
      2. React frontend
    11. Summary
  21. Chapter 13: Error Handling
    1. Technical requirements
    2. Using the Flask debugger
    3. Creating error handlers
      1. Flask backend
      2. React frontend
    4. Creating custom error pages
    5. Tracking events in your application
    6. Sending error emails to administrators
    7. Summary
  22. Chapter 14: Modular Architecture – Harnessing the Power of Blueprints
    1. Technical requirements
    2. Understanding the benefits of modular architecture in web development
    3. Understanding Flask Blueprints
    4. Setting up a Flask application with Blueprints
      1. Structuring Blueprint Flask applications
      2. Defining models and Blueprint modules
      3. Registering the Blueprints
    5. Handling the React frontend with Flask Blueprints
    6. Summary
  23. Chapter 15: Flask Unit Testing
    1. Technical requirements
    2. Unit testing in Flask applications
      1. FIRST
      2. RITE
      3. 3A
    3. Introducing Pytest
    4. Setting up Pytest
    5. Basic syntax, structures, and features of Pytest
      1. Using fixtures
      2. Parameterizing in pytest
      3. Mocking external dependencies in pytest
    6. Writing unit tests
      1. Unit-testing user registration
      2. Unit-testing user login
    7. Testing JSON APIs
      1. Testing speaker data creation
      2. Updating the speaker data object
      3. Testing the deletion of the speaker data object
    8. Test-driven development with Flask
      1. Defining the feature
      2. Writing a failed test case
      3. Implementing the minimal amount of code to pass the test
      4. Running the test and ensuring it passes
      5. Refactoring the code
      6. Writing additional tests
    9. Handling exceptions
    10. Summary
  24. Chapter 16: Containerization and Flask Application Deployment
    1. Technical requirements
    2. What is containerization?
    3. Introducing Docker
      1. Creating a Flask application
      2. Creating a Dockerfile
      3. Building the Docker image
      4. Running the Docker container
    4. Dockerizing React and Flask applications
      1. Bizza frontend application with React
      2. Bizza backend application with Flask
    5. Understanding AWS ECR
    6. Using Docker Compose
    7. Deploying React and Flask applications to AWS Elastic Beanstalk
    8. Summary
  25. Index
    1. Why subscribe?
  26. Other Books You May Enjoy
    1. Packt is searching for authors like you
    2. Download a free PDF copy of this book

Product information

  • Title: Full-Stack Flask and React
  • Author(s): Olatunde Adedeji
  • Release date: October 2023
  • Publisher(s): Packt Publishing
  • ISBN: 9781803248448