Building React and Django Apps

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.

Introduction

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

1. Django and React Preparation

• Running the React and Django development servers
• Preparing React code for production
• Serving React code through Django's static files
• Navigating between React components using React Router

2. Filtering and Pagination with Django and React

• Creating a ViewSet with Django
• Displaying a list of items with React
• Deleting an item using React and Django
• Partially updating an item using React
• Pagination with Django
• Pagination with React
• Filtering with Django
• Filtering with React

3. Forms with React and Django

• Handling creating models with Django REST framework
• Creating a REST API Service class with React and Axios
• Creating a basic form as a React component
• Creating form fields for basic form
• Connecting a React component to a service
• Validating form data with Django REST framework
• Displaying validation errors with React

4. Refactoring React with Hooks and Higher-Order Components

• Using timers with state to display data
• Creating a higher-order component with React
• Using React hooks and refactoring a component to use hooks
• Refactoring a higher-order component to use hooks

5. Testing React and Django

• Unit testing a component
• Unit testing two React routes and navigation between components
• End2End testing the form submission process
• End2End testing the filtered data table
• Unit testing caching with Django REST framework
• Unit testing sorting and filtering
• Unit testing validation for the REST API

Conclusion

• Next steps