book

Full-Stack Flask and React

Name: Full-Stack Flask and React
Author: Olatunde Adedeji
ISBN: 9781803248448

by Olatunde Adedeji

October 2023

Intermediate to advanced

408 pages

9h 45m

English

Packt Publishing

Read now

Unlock full access

Full-Stack Flask and React
ContributorsAbout the authorAbout the reviewersAcknowledgment
Preface
Who this book is forWhat this book coversTo get the most out of this bookDownload the example code filesGet in touchShare Your ThoughtsDownload a free PDF copy of this book
Part 1 – Frontend Development with React
Chapter 1: Getting Full Stack Ready with React and Flask
Technical requirementsAn introduction to full stack web developmentWhy should we choose React?Setting up the development environment with ReactWhy should we choose Flask?Setting up the development environment with FlaskGetting ready with GitHow does Git work?Git versus GitHubWhat will we build?Summary
Chapter 2: Getting Started with React
Technical requirementsExploring a React project directory structureArrow functions in ReactUnderstanding what destructuring isDefault and named exportsWhat is a React component?Function componentsClass componentsComponent life cycleWhat are props?Passing data as propsReact stateSummary
Chapter 3: Managing State with React Hooks
Technical requirementsWhat is a Hook in React?Why use Hooks in React?Using useState to develop stateful componentsPassing state as propsConditional rendering with stateUsing useEffect to create side effectsUsing useContext to manage global state in React applicationsUnderstanding props drillingUsing useContext to solve the props drilling problemUsing useRef to directly access DOM elements and persist state valuesUsing useReducer for state managementUsing useMemo to improve performancePrevents unnecessary component re-renderingUsing useCallback to avoid re-rendering functionsUsing custom Hooks for code reusabilitySummary
Chapter 4: Fetching Data with React APIs
Technical requirementsFetching data using the Fetch API in ReactFetching data using async/await syntaxFetching data using AxiosFetching data using the React Query in ReactSummary
Chapter 5: JSX and Displaying Lists in React
Technical requirementsWhat is JSX?JSX versus HTMLHow JSX abstracts JavaScriptEvent handling in ReactDisplaying lists in ReactUsing key and id in JSXNesting lists in JSXLooping over objects in JSXUsing Object.keys()Using Object.values()Using Object.entries()Example of looping with Object.keysSummary
Chapter 6: Working with React Router and Forms
Technical requirementsRouting with React RouterRoutersComponentsHooksAdding React Router in ReactSetting up the routing configurationAdding linksAdding a nested routeHandling dynamic routesUsing useParamsUsing useNavigateUsing forms in ReactControlled and uncontrolled form componentsControlled formUncontrolled formHandling user input – Input, TextArea, and SelectInputTextAreaSelectValidating and sanitizing users’ data in ReactImplementing form validationSummary
Chapter 7: React Unit Testing
Technical requirementsWhat is software testing?Introducing JestSetting up the Jest environmentWriting tests in JestUnit-testing React componentsWriting a unit test for a stateless componentWriting a unit test for a stateful componentTDDWriting a single test caseWriting minimal code that satisfies the test and making it passCode refactoringSummary

Part 2 – Backend Development with Flask
Chapter 8: SQL and Data Modeling
Technical requirementsWhat is the relational data model?Exploring the different database relationshipsOne-to-one (1:1) relationshipOne-to-many (1:M) relationshipMany-to-many (M:M) relationshipSetting up PostgreSQL, SQLAlchemy, and AlembicSetting up PostgreSQLSetting up SQLAlchemySetting up AlembicUnderstanding database concepts for Flask applicationsRDBMSDB-APIsClient–server model interactionUnderstanding SQLAlchemy ORM basicsThe SQLAlchemy engineSQLAlchemy connection poolsSQLAlchemy dialectSQLAlchemy data types – mapping between tables and classesModeling data for a speakers’ conference web applicationSending data to the PostgreSQL database from a Flask appMigration with AlembicRunning migrationsSummary
Chapter 9: API Development and Documentation
Technical requirementsWhat is an API?Why use an API in web developmentEndpoint and payload anatomyUnderstanding the endpoint structureUnderstanding the payload structureUnderstanding HTTP requests/responsesRequest lineHTTP responsesUnderstanding HTTP status codesREST API design principlesClient-serverStatelessnessCachingUniform interfaceLayered systemCode on demand (optional)Implementing a REST API in a Flask applicationDefining the application resourcesDefining the API endpointsImplementing the API endpointsJSONifying response dataAdding query parameters to endpointsPassing variables to an endpointAPI interaction with a database via CRUD operationsCreating a venue resourceReturning lists of venuesReturning a single venue resourceUpdating a single venue resourceDeleting a single venue resourceAPI documentationTesting and documenting with PostmanSummary
Chapter 10: Integrating the React Frontend with the Flask Backend
Technical requirementsThe Bizza application structureApplication overviewBreaking down the code structure into frontend and backendConfiguring the React frontend for API consumptionMaking Flask backend-readyHandling forms in React and FlaskTroubleshooting tips for the React frontend and the Flask backendSummary
Chapter 11: Fetching and Displaying Data in a React-Flask Application
Technical requirementsFetching and displaying data – the React-Flask approachRetrieving the speakers’ list from FlaskDisplaying data in ReactAdding data to a database – the React–Flask approachAdding data to FlaskAdding the speaker data to the backend using the CreateSpeaker componentEditing data – the React–Flask approachEditing data in FlaskDisplaying the edited data in ReactDeleting data from a database – the React–Flask approachHandling delete requests in FlaskHandling delete requests in ReactManaging pagination in a React–Flask applicationSummary
Chapter 12: Authentication and Authorization
Technical requirementsUnderstanding the fundamentals of information securityDefining authentication and the authentication role in web applicationImplementing password security and hashing passwordsUnderstanding access and authorization in web application developmentAdding authentication to your Flask applicationFlask backendReact frontendIdentifying system users and managing their informationSession managementFlask backendReact FrontendCreating a password-protected dashboardFlask backendReact frontendImplementing flash messages in FlaskFlask backendReact frontendSummary
Chapter 13: Error Handling
Technical requirementsUsing the Flask debuggerCreating error handlersFlask backendReact frontendCreating custom error pagesTracking events in your applicationSending error emails to administratorsSummary
Chapter 14: Modular Architecture – Harnessing the Power of Blueprints
Technical requirementsUnderstanding the benefits of modular architecture in web developmentUnderstanding Flask BlueprintsSetting up a Flask application with BlueprintsStructuring Blueprint Flask applicationsDefining models and Blueprint modulesRegistering the BlueprintsHandling the React frontend with Flask BlueprintsSummary
Chapter 15: Flask Unit Testing
Technical requirementsUnit testing in Flask applicationsFIRSTRITE3AIntroducing PytestSetting up PytestBasic syntax, structures, and features of PytestUsing fixturesParameterizing in pytestMocking external dependencies in pytestWriting unit testsUnit-testing user registrationUnit-testing user loginTesting JSON APIsTesting speaker data creationUpdating the speaker data objectTesting the deletion of the speaker data objectTest-driven development with FlaskDefining the featureWriting a failed test caseImplementing the minimal amount of code to pass the testRunning the test and ensuring it passesRefactoring the codeWriting additional testsHandling exceptionsSummary
Chapter 16: Containerization and Flask Application Deployment
Technical requirementsWhat is containerization?Introducing DockerCreating a Flask applicationCreating a DockerfileBuilding the Docker imageRunning the Docker containerDockerizing React and Flask applicationsBizza frontend application with ReactBizza backend application with FlaskUnderstanding AWS ECRUsing Docker ComposeDeploying React and Flask applications to AWS Elastic BeanstalkSummary
Index
Why subscribe?
Other Books You May EnjoyPackt is searching for authors like youDownload a free PDF copy of this book

Overview

Learn how to build robust, full-stack web applications with "Full-Stack Flask and React". This comprehensive guide offers step-by-step instructions on combining Flask's versatile backend capabilities with React's interactive user interfaces. With practical examples and expert insights, you'll gain hands-on experience deploying scalable and modular web apps.

What this Book will help me do

Gain proficiency in using React to create dynamic and engaging user interfaces.
Understand how to use Flask for developing robust and scalable backends.
Learn to integrate frontend and backend using Flask RESTful APIs and React.
Secure your applications with proper user authentication and authorization strategies.
Deploy production-ready applications using cloud platforms like AWS.

Author(s)

None Adedeji is an expert web developer and technology instructor with years of hands-on experience in building scalable, professional web applications. He specializes in full-stack development using Flask and React and has a passion for teaching through accessible and practical examples. His approachable style makes complex topics understandable and actionable.

Who is it for?

This book is ideal for Python developers looking to expand into full-stack web development using Flask and React. It's also suitable for frontend developers wanting to learn how to use Flask for backend development. Readers should have basic knowledge of Python, JavaScript, HTML, and CSS and aim to enhance their skillset for building and deploying professional web applications.

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781803248448

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills