Building React and Django Apps

Course details

Discover how to combine the robust front-end functionality of the React framework with the best of the Django back end to build full-stack applications. In this course, join Rudolf Olah as he demonstrates how to wire together the two frameworks, add pagination, secure, and test your applications. Throughout the course, discover how to prepare your React code for production and communicate between the front-end and back-end servers using Axios. Plus, learn how to implement filtering with React and Django, build your own custom React hook, and use unit testing and end-to-end testing to ensure that your app is ready for production.

Learning objectives
Preparing React code for production
Pagination with Django and React
Filtering with Django and React
Creating a basic form as a React component
Connecting a React component to a service
Validating form data with Django REST framework
Refactoring React with hooks
Writing unit tests

Concepts

0. Introduction

01 - Create a full-stack React app with Django REST framework
02 - What you should know
03 - Demo project overview

1. Django and React Preparation

04 - Running the React and Django development servers
05 - Preparing React code for production
06 - Serving React code through Django's static files
07 - Navigating between React components using React Router

2. Filtering and Pagination with Django and React

08 - Creating a ViewSet with Django
09 - Displaying a list of items with React
10 - Deleting an item using React and Django
11 - Partially updating an item using React
12 - Pagination with Django
13 - Pagination with React
14 - Filtering with Django
15 - Filtering with React

3. Forms with React and Django

16 - Handling creating models with Django REST framework
17 - Creating a REST API Service class with React and Axios
18 - Creating a basic form as a React component
19 - Creating form fields for basic form
20 - Connecting a React component to a service
21 - Validating form data with Django REST framework
22 - Displaying validation errors with React

4. Refactoring React with Hooks and Higher-Order Components

23 - Using timers with state to display data
24 - Creating a higher-order component with React
25 - Using React hooks and refactoring a component to use hooks
26 - Refactoring a higher-order component to use hooks

5. Testing React and Django

27 - Unit testing a component
28 - Unit testing two React routes and navigation between components
29 - End2End testing the form submission process
30 - End2End testing the filtered data table
31 - Unit testing caching with Django REST framework
32 - Unit testing sorting and filtering
33 - Unit testing validation for the REST API

Conclusion

34 - Next steps