Full-Stack Flask and React : Learn, Code, and Deploy Powerful Web Applications with Flask 2 and React 18

Embark on an immersive journey from user interface interaction, data modeling, API development and documentation to deploying web applications in the cloud, while learning modern web development approaches to develop applications Key Features Acquire the ability to effectively manage pagination in Flask using postgreSQL database Implement robust API development within Flask applications by performing CRUD operations Improve the modularity and scalability of Flask applications by implementing Blueprints in a modular development approach Book Description Developing an interactive and efficiently fast enterprise web application requires both the right approach and tooling. Flask is a lightweight web framework designed to develop scalable web applications in Python. If you are a web developer looking for a way to tap the awesome power of reusable UI components of React and the simplicity of Flask for backend development, you are on the right cruise ship. This book teaches you how to build simple and efficiently fast production-ready web applications. We begin the book with an introduction to React, a JavaScript library for building highly interactive and reusable user interfaces. As you progress further, you will learn data modeling for the web using SQLAlchemy and PostgreSQL, Restful API development, as well as understand how to identify your application users and control access to your web application. You will also explore the modular architectural design for flask-based web applications, error handling techniques, and a practical web project which will be deployed to AWS cloud computing. By the end of this book, you would have acquired a deeper knowledge of Flask and React technology stacks to undertake web application development with improved confidence and success. 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 Learn 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 intended for Python web developers who wish to build full-stack applications, as well as for frontend developers seeking to expand their skillset by employing Flask as a backend development tool. Readers will gain proficiency in both frontend and backend skills, and acquire knowledge on how to deploy their solutions in the cloud using AWS. Prior knowledge of basic HTML, CSS, JavaScript, and Python is required to benefit from this book. 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 Get to grips with UI interaction, data modeling, API development, and documentation while building modern web apps for cloud deploymentKey FeaturesCombine Flask's pagination techniques with React's dynamic rendering for an enhanced user experienceImplement robust API development within Flask applications by performing CRUD operationsImprove Flask app scalability with blueprints using a modular development approachPurchase of the print or Kindle book includes a free PDF eBookBook DescriptionDeveloping 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 learnExplore the fundamentals of React for building user interfacesUnderstand how to use JSX to render React componentsHandle data and integrate third-party libraries and APIs into React applicationsSecure your Flask application with user authentication and authorizationDiscover how to use Flask RESTful API to build backend services with React frontendBuild modular and scalable Flask applications using blueprintsWho this book is forThis 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.