Full Stack Django and React: Get hands-on experience in full-stack web development with Python, React, and AWS

✍ Scribed by Kolawole Mangabo

• Publisher: Packt Publishing
• Tongue: English
• Leaves: 432
• Category: Library

✦ Synopsis

Build professional, cloud-ready web applications from frontend to backend using the latest features of Django and React

Key Features

• Explore the advanced features of – popular frameworks like Django and React by working on hands-on projects
• Launch your career as a full-stack Python web developer with this step-by-step guide
• Learn to deploy complete web applications to AWS

Book Description

Django developers often need to rely on frontend developers to build a client-side solution for their web apps. By combining the capabilities of React with Django, this book creates a complete learning path to go from being a backend developer to a full stack developer in no time. This book will help you use React to build state-of-the-art UI layouts and Django to create an immaculate backend.

This web development book will help you discover the full potential of combining the dual power of the two most popular frameworks – React and Django. You’ll build full stack applications, including a RESTful API in the backend and an intuitive frontend, while exploring the advanced features of both frameworks. You’ll also explore how the dynamic functionality of the React framework can be used to build your frontend systems and how the ORM layer of Django helps in simplifying database interactions. This will in turn boost the development process for building the backend and facilitate the building of full stack applications.

By the end of the book, you will be able to create a dynamic full stack app starting from scratch on your own.

What you will learn

• Explore how things work differently under the hood in the frontend as well as the backend
• Discover how to build an API with Django
• Start from scratch to build an intuitive UI using React’s capabilities
• Dockerize and prepare projects for deployment
• Deploy an API and UI using AWS services such as AWS EC2, S3, and AWS Cloudfront

Who this book is for

This book is for Django web developers who want to get started with full-stack development and learn a frontend framework that can be quickly bootstrapped with the backend to build full-stack applications. Familiarity to React and JavaScript would be an added advantage.

Table of Contents

1. Creating a Django Project
2. Authentication and Authorization Using JWTs
3. Social Media Post Management
4. Adding Comments to Social Media Posts
5. Testing the REST API
6. Creating a Project with React
7. Building Login and Registration Forms
8. Social Media Posts
9. Post comments
10. User Profiles
11. Effective UI Testing for React Components
12. Deployment Basics – Git, GitHub, and AWS
13. Dockerizing the Django Project
14. Automating Deployment on AWS
15. Deploying Our React App on AWS
16. Performance, Optimization, and Security

✦ Table of Contents

Preface
Cover
Part 1: Technical Background
Chapter 1: Creating a Django Project
An overview of software development
Understanding backend development
Responsibilities of backend developers
What is an API?
Understanding REST APIs
What is Django?
Setting up the work environment
Creating a virtual environment
Installing Django
Creating a sample project
Configuring the database
Postgres configuration
Connecting the database
Installing an HTTP request client
Summary
Questions
Chapter 2: Authentication and Authorization using JWTs
Technical requirements
Understanding JWTs
Understanding how JWTs are used in authentication
Organizing a project
Creating a user model
What are Django models?
Writing the User model
Writing UserSerializer
Writing UserViewset
Adding a router
Writing the user registration feature
Adding the login feature
Refresh logic
Summary
Questions
Chapter 3: Social Media Post Management
Technical requirements
Creating the Post model
Designing the Post model
Abstraction
Writing the AbstractSerializer
Writing the AbstractViewSet
Writing the Post model
Writing the Post serializer
Writing Post viewsets
Adding the Post route
Rewriting the Post serialized object
Adding permissions
Deleting and updating posts
Adding the Like feature
Adding the posts_liked field to the User model
Adding the like, remove_like, and has_liked methods
Adding the likes_count and has_liked fields to PostSerializer
Adding like and dislike actions to PostViewSet
Summary
Questions
Chapter 4: Adding Comments to Social Media Posts
Technical requirements
Writing the Comment model
Adding the Comment model
Creating a comment in the Django shell
Writing the comment serializer
Nesting routes for the comment resource
Creating nested routes
Writing the CommentViewSet class
Testing the comments feature with Insomnia
Updating a comment
Deleting a comment
Summary
Questions
Chapter 5: Testing the REST API
Technical requirements
What is testing?
What is software testing?
Why is software testing important?
What are the various types of testing?
Understanding manual testing
Understanding automated testing
Testing in Django
The testing pyramid
Configuring the testing environment
Writing your first test
Writing tests for Django models
Writing tests for the User model
Writing tests for the Post model
Writing tests for the Comment model
Writing tests for your Django viewsets
Writing tests for authentication
Writing tests for PostViewSet
Writing tests for CommentViewSet
Writing tests for the UserViewSet class
Summary
Questions
Part 2: Building a Reactive UI with React
Chapter 6: Creating a Project with React
Technical requirements
Understanding frontend development
What is React?
Creating the React project
Installing Node.js
Installing VS Code
Adding VS Code extensions
Creating and running a React app
Installing a debugging plugin in the browser
Configuring the project
Adding React Router
Adding React Bootstrap
Creating the Home page
Configuring CORS
Useful ES6 and React features
const and let
Template literals
JSX styling
Props versus states
The Context API
useMemo
Handling forms – controlled components and uncontrolled components
Summary
Questions
Chapter 7: Building Login and Registration Forms
Technical requirements
Understanding the authentication flow
Writing the requests service
Protected routes
Creating a protected route wrapper
Creating the registration page
Adding a registration page
Registering the registration page route
Creating the login page
Adding the login page
Registering the login page
Refactoring the authentication flow code
What is a hook?
Writing code for a custom hook
Using the functions in code
Summary
Questions
Chapter 8: Social Media Posts
Technical requirements
Creating the UI
Adding the NavBar component
Adding the Layout component
Using the Layout component on the home page
Creating a post
Adding the Toast component
Adding toaster to post creation
Adding the CreatePost component to the home page
Listing posts on the home page
Writing the Post component
Adding the Post component to the home page
Updating a post
Minor refactoring
Summary
Questions
Chapter 9: Post Comments
Technical requirements
Creating a UI
Tweaking the Post component
Adding a back button to the Layout component
Creating the SinglePost component
Creating a comment
Listing the comments
Deleting a comment
Updating a comment
Adding the UpdateComment modal
Liking a comment
Summary
Questions
Chapter 10: User Profiles
Technical requirements
Listing profiles on the home page
Displaying user information on their profile page
Configuring the default avatar
Writing the ProfileDetails component
Editing user information
Adding the edit method to useUserActions
The UpdateProfileForm component
Creating the EditProfile page
Summary
Questions
Chapter 11: Effective UI Testing for React Components
Technical requirements
Component testing in React
The necessity of testing your frontend
What to test in your React application
Jest, the RTL, and fixtures
Writing testing fixtures
Running the first test
Extending the RTL render method
Testing authentication components
Testing Post components
Mocking the localStorage object
Writing post fixtures
Writing tests for the Post component
Testing the CreatePost component
Testing the UpdatePost component
Snapshot testing
Summary
Questions
Part 3: Deploying Django and React on AWS
Chapter 12: Deployment Basics – Git, GitHub, and AWS
Technical requirements
Basics of software deployment
Tools and methods of web application deployment
Using Git and GitHub
Platforms for web application deployment
Creating an EC2 instance
Configuring the server for the Django project
Postgres configuration and deployment
Errors made when deploying on EC2
Summary
Questions
Chapter 13: Dockerizing the Django Project
Technical requirements
What is Docker?
Dockerizing the Django application
Adding a Docker image
Using Docker Compose for multiple containers
Writing the docker-compose.yaml file
Configuring environment variables in Django
Writing NGINX configuration
Launching the Docker containers
Summary
Questions
Chapter 14: Automating Deployment on AWS
Technical requirements
Explaining CI/CD
CI
CD
Defining the CI/CD workflow
What is GitHub Actions?
How to write a GitHub Actions workflow file
Configuring the backend for automated deployment
Adding the GitHub actions file
Configuring the EC2 instance
Summary
Questions
Chapter 15: Deploying Our React App on AWS
Technical requirements
Deployment of React applications
What is a production build?
Deploying on AWS S3
Creating a build of Postagram
Adding environment variables and building the application
Deploying the React application on S3
Automating deployment with GitHub Actions
Writing the workflow file
Summary
Questions
Chapter 16: Performance, Optimization, and Security
Technical requirements
Revoking JWT tokens
Adding a logout endpoint
Handling the logout with React
Adding caching
The cons of caching
Adding caching to the Django API
Using caching on the endpoints
Optimizing the React application build
Integrating webpack
Using pnpm
Securing deployed applications with HTTPS with AWS CloudFront
Configuring the React project with CloudFront
Summary
Questions
Appendix
Logging
Database queries optimization
Security
Answers
Index
Other Books You May Enjoy