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/.
-
Build the Django model (a guide is available at https://pypi.org/project/drf-react-by-schema/)
-
Create a
frontendfolder, where you will add your React project -
Install all peer-dependencies of drf-react-by-schema:
yarn add @hookform/resolvers@^2.9.10 @mui/icons-material@5.11.0 @mui/lab@^5.0.0-alpha.112 @mui/material@^5.11.0 @mui/x-data-grid@5.17.14 @mui/x-date-pickers@^5.0.11 axios@^0.27.2 moment@^2.29.4 react@^18.2.0 react-dom@^18.2.0 react-hook-form@^7.41.3 react-number-format@^5.1.2 string-mask@^0.3.0 yup@^0.32.11
- Install drf-react-by-schema:
yarn add drf-react-by-schema
- Wrap your app with DRFReactBySchema Provider, adding your custom themes and the Django endpoints. For example, in
App.js:
export default function App() {
return (
<DRFReactBySchemaProvider
serverEndPoint={{
url: 'http://localhost:8000',
apiTokenUrl: 'http://localhost:8000/api-auth/token',
signUp: 'http://localhost:8000/api-auth/signup/',
}}
theme={yourWonderfulTheme}>
<YourWonderfulApp />
</DRFReactBySchemaProvider>
);
}
- 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.
Components documentation is available and constantly updated at https://eita.gitlab.io/drf-react-by-schema/drf-react-by-schema-js/
We do welcome suggestions for examples and more details on the props and components.