Full-Stack Flask and React : learn, code, and deploy powerful web applications with Flask 2 and React 18 / Olatunde Adedeji.

Format:

Book

Author/Creator:

Adedeji, Olatunde, author.

Language:

English

Subjects (All):

Web applications--Development.

Web applications.

Application software--Development.

Application software.

Physical Description:

1 online resource (408 pages)

Edition:

First edition.

Place of Publication:

Birmingham, England : Packt Publishing, [2023]

Summary:

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.

Contents:

Cover

Copyright

Acknowledgment

Contributors

Table of Contents

Preface

Part 1 - Frontend Development with React

Chapter 1: Getting Full Stack Ready with React and Flask

Technical requirements

An introduction to full stack web development

Why should we choose React?

Setting up the development environment with React

Why should we choose Flask?

Setting up the development environment with Flask

Getting ready with Git

How does Git work?

Git versus GitHub

What will we build?

Summary

Chapter 2: Getting Started with React

Exploring a React project directory structure

Arrow functions in React

Understanding what destructuring is

Default and named exports

What is a React component?

Function components

Class components

Component life cycle

What are props?

Passing data as props

React state

Chapter 3: Managing State with React Hooks

What is a Hook in React?

Why use Hooks in React?

Using useState to develop stateful components

Passing state as props

Conditional rendering with state

Using useEffect to create side effects

Using useContext to manage global state in React applications

Understanding props drilling

Using useContext to solve the props drilling problem

Using useRef to directly access DOM elements and persist state values

Using useReducer for state management

Using useMemo to improve performance

Prevents unnecessary component re-rendering

Using useCallback to avoid re-rendering functions

Using custom Hooks for code reusability

Chapter 4: Fetching Data with React APIs

Fetching data using the Fetch API in React

Fetching data using async/await syntax

Fetching data using Axios.

Fetching data using the React Query in React

Chapter 5: JSX and Displaying Lists win React

What is JSX?

JSX versus HTML

How JSX abstracts JavaScript

Event handling in React

Displaying lists in React

Using key and id in JSX

Nesting lists in JSX

Looping over objects in JSX

Using Object.keys()

Using Object.values()

Using Object.entries()

Example of looping with Object.keys

Chapter 6: Working with React Router and Forms

Routing with React Router

Routers

Components

Hooks

Adding React Router in React

Setting up the routing configuration

Adding links

Adding a nested route

Handling dynamic routes

Using useParams

Using useNavigate

Using forms in React

Controlled and uncontrolled form components

Controlled form

Uncontrolled form

Handling user input - Input, TextArea, and Select

Input

TextArea

Select

Validating and sanitizing users' data in React

Implementing form validation

Chapter 7: React Unit Testing

What is software testing?

Introducing Jest

Setting up the Jest environment

Writing tests in Jest

Unit-testing React components

Writing a unit test for a stateless component

Writing a unit test for a stateful component

TDD

Writing a single test case

Writing minimal code that satisfies the test and making it pass

Code refactoring

Part 2 - Backend Development with Flask

Chapter 8: SQL and Data Modeling

What is the relational data model?

Exploring the different database relationships

One-to-one (1:1) relationship

One-to-many (1:M) relationship

Many-to-many (M:M) relationship

Setting up PostgreSQL, SQLAlchemy, and Alembic

Setting up PostgreSQL.

Setting up SQLAlchemy

Setting up Alembic

Understanding database concepts for Flask applications

RDBMS

DB-APIs

Client-server model interaction

Understanding SQLAlchemy ORM basics

The SQLAlchemy engine

SQLAlchemy connection pools

SQLAlchemy dialect

SQLAlchemy data types - mapping between tables and classes

Modeling data for a speakers' conference web application

Sending data to the PostgreSQL database from a Flask app

Migration with Alembic

Running migrations

Chapter 9: API Development and Documentation

What is an API?

Why use an API in web development

Endpoint and payload anatomy

Understanding the endpoint structure

Understanding the payload structure

Understanding HTTP requests/responses

Request line

HTTP responses

Understanding HTTP status codes

REST API design principles

Client-server

Statelessness

Caching

Uniform interface

Layered system

Code on demand (optional)

Implementing a REST API in a Flask application

Defining the application resources

Defining the API endpoints

Implementing the API endpoints

JSONifying response data

Adding query parameters to endpoints

Passing variables to an endpoint

API interaction with a database via CRUD operations

Creating a venue resource

Returning lists of venues

Returning a single venue resource

Updating a single venue resource

Deleting a single venue resource

API documentation

Testing and documenting with Postman

Chapter 10: Integrating the React Frontend with the Flask Backend

The Bizza application structure

Application overview

Breaking down the code structure into frontend and backend

Configuring the React frontend for API consumption

Making Flask backend-ready.

Handling forms in React and Flask

Troubleshooting tips for the React frontend and the Flask backend

Chapter 11: Fetching and Displaying Data in a React-Flask Application

Fetching and displaying data - the React-Flask approach

Retrieving the speakers' list from Flask

Displaying data in React

Adding data to a database - the React-Flask approach

Adding data to Flask

Adding the speaker data to the backend using the CreateSpeaker component

Editing data - the React-Flask approach

Editing data in Flask

Displaying the edited data in React

Deleting data from a database - the React-Flask approach

Handling delete requests in Flask

Handling delete requests in React

Managing pagination in a React-Flask application

Chapter 12: Authentication and Authorization

Understanding the fundamentals of information security

Defining authentication and the authentication role in web application

Implementing password security and hashing passwords

Understanding access and authorization in web application development

Adding authentication to your Flask application

Flask backend

React frontend

Identifying system users and managing their information

Session management

React Frontend

Creating a password-protected dashboard

Implementing flash messages in Flask

Chapter 13: Error Handling

Using the Flask debugger

Creating error handlers

Creating custom error pages

Tracking events in your application

Sending error emails to administrators

Chapter 14: Modular Architecture - Harnessing the Power of Blueprints

Technical requirements.

Understanding the benefits of modular architecture in web development

Understanding Flask Blueprints

Setting up a Flask application with Blueprints

Structuring Blueprint Flask applications

Defining models and Blueprint modules

Registering the Blueprints

Handling the React frontend with Flask Blueprints

Chapter 15: Flask Unit Testing

Unit testing in Flask applications

FIRST

RITE

3A

Introducing Pytest

Setting up Pytest

Basic syntax, structures, and features of Pytest

Using fixtures

Parameterizing in pytest

Mocking external dependencies in pytest

Writing unit tests

Unit-testing user registration

Unit-testing user login

Testing JSON APIs

Testing speaker data creation

Updating the speaker data object

Testing the deletion of the speaker data object

Test-driven development with Flask

Defining the feature

Writing a failed test case

Implementing the minimal amount of code to pass the test

Running the test and ensuring it passes

Refactoring the code

Writing additional tests

Handling exceptions

Chapter 16: Containerization and Flask Application Deployment

What is containerization?

Introducing Docker

Creating a Flask application

Creating a Dockerfile

Building the Docker image

Running the Docker container

Dockerizing React and Flask applications

Bizza frontend application with React

Bizza backend application with Flask

Understanding AWS ECR

Using Docker Compose

Deploying React and Flask applications to AWS Elastic Beanstalk

Index

Other Books You May Enjoy.

Notes:

Includes index.

Description based on print version record.

ISBN:

9781803236605

1803236604

OCLC:

1397570595