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

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