Full-Stack Flask and React: Learn, code, and deploy powerful web applications with Flask 2 and React 18 9781803248448

Table of contents :
Full-Stack Flask and React
Contributors
About the author
About the reviewers
Acknowledgment
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Get in touch
Share Your Thoughts
Download a free PDF copy of this book
Part 1 – Frontend Development with React
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
2
Getting Started with React
Technical requirements
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
Summary
3
Managing State with React Hooks
Technical requirements
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
Summary
4
Fetching Data with React APIs
Technical requirements
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
Summary
5
JSX and Displaying Lists in React
Technical requirements
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
Summary
6
Working with React Router and Forms
Technical requirements
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
Summary
7
React Unit Testing
Technical requirements
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
Summary
Part 2 – Backend Development with Flask
8
SQL and Data Modeling
Technical requirements
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
Summary
9
API Development and Documentation
Technical requirements
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
Summary
10
Integrating the React Frontend with the Flask Backend
Technical requirements
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
Summary
11
Fetching and Displaying Data in a React-Flask Application
Technical requirements
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
Summary
12
Authentication and Authorization
Technical requirements
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
Flask backend
React Frontend
Creating a password-protected dashboard
Flask backend
React frontend
Implementing flash messages in Flask
Flask backend
React frontend
Summary
13
Error Handling
Technical requirements
Using the Flask debugger
Creating error handlers
Flask backend
React frontend
Creating custom error pages
Tracking events in your application
Sending error emails to administrators
Summary
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
Summary
15
Flask Unit Testing
Technical requirements
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
Summary
16
Containerization and Flask Application Deployment
Technical requirements
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
Summary
Index
Why subscribe?
Other Books You May Enjoy
Packt is searching for authors like you
Download a free PDF copy of this book