Full-Stack Flask and React learn, code, and deploy powerful web applications with Flask 2 and React 18
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...
| Otros Autores: | |
|---|---|
| Formato: | Libro electrónico |
| Idioma: | Inglés |
| Publicado: |
Birmingham, England :
Packt Publishing
[2023]
|
| Edición: | First edition |
| Materias: | |
| Ver en Biblioteca Universitat Ramon Llull: | https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009769021506719 |
Tabla de Contenidos:
- 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
- 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
- Chapter 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
- Chapter 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
- Chapter 5: JSX and Displaying Lists win 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
- Chapter 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
- Chapter 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
- Chapter 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
- Chapter 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
- Chapter 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
- Chapter 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
- Chapter 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
- Chapter 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
- 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
- Summary
- Chapter 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
- Chapter 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
- Other Books You May Enjoy.
