Components and Tools for building a React App having Django Rest Framework (DRF) as server
!DRF And React By Schema - React
This package, with the corresponding Django package with the same name, enables a django headless infrastructure for running with react very easily, directly from your models.
React has great power in building highly responsive and dynamic interfaces for users, with great flexibility and quality.
On the other hand, Django offers a consolidated infrastructure, high performance, and a popular way to organize data models for creating, removing, and updating data (CRUD) for simple to highly complex and intricate systems.
A recognized and active library in Django, called Django Rest Framework, or simply DRF, leverages these Django characteristics to allow developers to create powerful API schemas directly related to the data model, using the concept of viewsets (analogous to views) and serializers (analogous to forms).
Building systems with a large number of forms for managing different processes is Django's power, but its approach to the interface, based on views, forms, and especially templates, templatetags, and inclusiontags, is outdated, as every update must refresh the entire page, following a logic of HTML template rendering.
An attractive option is to use React as the client (interface) for a Django instance with DRF as the server. In other words, Django serves the data and performs operations on the data as a Headless server (i.e., without views, forms, or templates, but only through the API).
However, a common problem with this approach is that it often requires duplicating work in the client (React) and the server (Django/DRF) to handle form interactions and validations in React that are related to the server models.
As an example, let's suppose that you want to manage products. Let's say that each product belongs to a product category. Let's assume we have the categories "fruits and vegetables" and "grains," and the products lettuce, papaya, and grapes in the "fruits and vegetables" category, and beans, rice, and fava beans in the "grains" category. In this example, we could consider that each product has attributes such as "name", "description", "unit", "price per unit," and "availability". For the categories, we could say they have attributes like "name" and "description".
In Django, the data model is created very simply: create a ProductCategory and a Product models, with a "ForeignKey" relationship indicating a one-to-many relationship between the product and the category (one category can have many products, and one product belongs to a single category).
In React, you would need to build the form, types of components (simple text input, long text input, numeric input, password input, yes/no switch input, autocomplete multiple-choice, single-choice dropdown, date pickers, etc.), validation conditions (whether it's mandatory or not, initial data, data format masks, etc.).
The problem is that this is redundant work because this information is already available in the Django model!
But how do you pass the data structure information to React? This is where _DRF and React By Schema - Django_ (drf-react-by-schema-django) comes in. It creates a powerful schema on the server that can be accessed by React via the OPTION method.
And how do you build forms, validation conditions, and form components in React? This is where _DRF and React By Schema - React_ (drf-react-by-schema-react) comes in, which consumes the schemas generated by drf-react-by-schema-django and automatically builds all of this for the developer with very few lines of code, while allowing complete customization of the interfaces (layout).
Furthermore, on the Django side, drf-react-by-schema-django automatically generates a full API endpoint structure directly from the app's models, along with powerful search tools, filters, nested related objects, validation, and handling of object creation, updating, and removal processes, which is a challenging task to do manually in Django DRF because it typically requires in-depth knowledge of serializers and viewsets. The Django package simplifies this entire process for the developer while maintaining performance.
On the React side, drf-react-by-schema-react offers a range of powerful components that allow for the automatic construction of forms, including forms for multiple related objects (through editable tables), using the full power of MUI and MUI x-DataGrid.
The _DRF and React By Schema_ Suite is available for React at https://www.npmjs.com/package/drf-react-by-schema and for Django at https://pypi.org/project/drf-react-by-schema/.
1. Build the Django model (a guide is available at https://pypi.org/project/drf-react-by-schema/)
2. Create a frontend folder, where you will add your React project
3. Install all peer-dependencies of drf-react-by-schema:
``
yarn add @emotion/react@^11.11.0 @emotion/styled@^11.11.0 @hookform/resolvers@^2.9.10 @mui/icons-material@^5.11.0 @mui/lab@^5.0.0-alpha.112 @mui/material@^5.13.7 @mui/x-data-grid@^5.17.26 @mui/x-date-pickers@^6.18.1 axios@^0.27.2 dayjs@^1.11.10 react@^18.2.0 react-dom@^18.2.0 react-hook-form@^7.41.3 react-number-format@^5.3.2 string-mask@^0.3.0 yup@^0.32.11
4. Install drf-react-by-schema:
`
yarn add drf-react-by-schema
5. Wrap your app with DRFReactBySchema Provider, adding your custom themes and the Django endpoints. For example, in App.js:`
export default function App() {
return (
url: 'http://localhost:8000',
apiTokenUrl: 'http://localhost:8000/api-auth/token',
signUp: 'http://localhost:8000/api-auth/signup/',
}}
theme={yourWonderfulTheme}>
);
}
`
export default function App() {
// Import all exported schemas as a single object:
import * as schemas from './drfReactBySchema';
return (
url: 'http://localhost:8000',
apiTokenUrl: 'http://localhost:8000/api-auth/token',
signUp: 'http://localhost:8000/api-auth/signup/',
}}
// Pass the schemas to the provider to avoid OPTIONS requests:
schemas={schemas}
theme={yourWonderfulTheme}>
);
}
`
To keep your React app in sync with your Django models, you can use the sync_react command provided by drf-react-by-schema-django.
It is recommended to add a script to your package.json to easily run this command. Note that you must ensure you are using the python executable from your virtual environment:
`json`
"scripts": {
"sync-react": "cd ../ && ./venv/bin/python manage.py sync_react"
}
Or if you always run it with your venv activated:
`json`
"scripts": {
"sync-react": "cd ../backend && python manage.py sync_react"
}
This will generate the drfReactBySchema folder in your src directory (or wherever you point it to) containing:schemas
- : The schemas for your models.types
- : TypeScript interfaces for your models.index.ts
- : Exports for easy import.
You can then import types from drfReactBySchema/types` to type your components and data.
6. Now you have the full power of the integration of React and Django! Explore the components to build your app seamlessly, with all validation, form widgets and functionalities built-in.