Package: drf-react-by-schema
This package, with the corresponding npm package with the same name, enables a django headless infrastructure for running with react very easily, directly from your models.About: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 ofviewsets(analogous toviews) andserializers(analogous toforms).Building systems with a large number of forms for managing different processes is Django’s power, but its approach to the interface, based onviews,forms, and especiallytemplates,templatetags, andinclusiontags, 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., withoutviews,forms, ortemplates, 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 aProductCategoryand aProductmodels, 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 whereDRF 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 whereDRF and React By Schema - React(drf-react-by-schema-react) comes in, which consumes the schemas generated bydrf-react-by-schema-djangoand 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-djangoautomatically 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 ofserializersandviewsets. The Django package simplifies this entire process for the developer while maintaining performance.On the React side,drf-react-by-schema-reactoffers 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.TheDRF and React By SchemaSuite is available for React athttps://www.npmjs.com/package/drf-react-by-schemaand for Django athttps://pypi.org/project/drf-react-by-schema/.Pre-requisites:django-rest-frameworkdrf-nested-routersdjango-cors-headersdjangorestframework-simplejwtdjango-filterQuick start:Add and configure the pre-requisite appsAdd “drf-react-by-schema” to your INSTALLED_APPS setting like this:INSTALLED_APPS = [
    ...
    'drf_react_by_schema',
]Configure Django Rest Framework in settings, adding the drf-react-by-schema rederer, metadata and filter backend, as in the example below:REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': (
        'rest_framework.permissions.IsAuthenticated',
    ),
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework_simplejwt.authentication.JWTAuthentication',
        'rest_framework.authentication.SessionAuthentication',
    ),
    "DEFAULT_RENDERER_CLASSES": [
        "rest_framework.renderers.JSONRenderer",
        "drf_react_by_schema.renderers.CustomBrowsableAPIRenderer",
    ],
    'DEFAULT_METADATA_CLASS': 'drf_react_by_schema.metadata.Metadata',
    'DEFAULT_FILTER_BACKENDS': [
        'rest_framework.filters.SearchFilter',
        'drf_react_by_schema.filters.DRFReactBySchemaOrderingFilter',
    ],
}Configure drf-react-by-schema, for example adding the apps that should be condered for building the API endpoints. If not added to settings, the default will be [‘main’]. Example:DRF_REACT_BY_SCHEMA = {
    'APPS': [
        'main',
    ],
    'PAGINATION_MODE': 'server',
}Include the URL configuration in your project urls.py like this:urlpatterns = [
    ...
    path('', include('drf_react_by_schema.urls')),
]Start the development server and visithttp://127.0.0.1:8000/api/endpointsand you will see all endpoints available.Create or include your React app, for example in afrontendfolder. You can find a quick guide on how to install theDRF And React By Schema - Reactpackage in your React app athttps://www.npmjs.com/package/drf-react-by-schema.You can customizeviewsetsandserializersto annotate other attributes.This package offers special fields for added control over metadata directly from model.For any questions, please add issues in the gitlab repository.