Intégrez React dans Django de manière transparente avec la CLI réactify-django

L'ajout de React à un projet Django peut améliorer votre expérience de développement, vous permettant d'exploiter la puissance du rendu et de la sécurité côté serveur de Django avec les capacités dynamiques côté client de React. Avec la CLI réactify-django, cette intégration devient simple, vous permettant de tirer parti du backend robuste de Django tout en créant des interfaces utilisateur hautement interactives avec React. De plus, vous avez la possibilité de configurer TypeScript pour le typage statique et Tailwind CSS pour un style axé sur les utilitaires, permettant ainsi une configuration de développement rationalisée et moderne dès le début.

Dans ce guide, nous explorerons pourquoi la combinaison de Django et React est bénéfique, puis nous expliquerons comment utiliser Reactify-Django pour configurer React dans les projets Django nouveaux et existants.

Pourquoi choisir une configuration Django-React monolithique ?

Une architecture Django-React monolithique vous offre le meilleur des deux mondes.
Voici pourquoi cette approche est avantageuse :

• Rendu côté serveur (SSR) : le moteur de création de modèles de Django et ses puissantes capacités backend offrent un rendu côté serveur prêt à l'emploi, améliorant le référencement et la vitesse de chargement initiale des pages.
• Routage et sécurité améliorés : le routage intégré de Django et les fonctionnalités de sécurité robustes (telles que la protection CSRF et la gestion des sessions) simplifient la gestion du backend, rendant plus sûre et plus facile la gestion du routage complexe.
• Déploiement unifié : avec React et Django sous un même toit, vous pouvez déployer comme une seule application, réduisant ainsi la complexité de la gestion de services frontend et backend séparés. Cela supprime également le besoin d'en-têtes et de configuration CORS puisque Django et React partagent la même origine.

Utiliser Reactify-Django pour configurer React dans Django signifie une initialisation plus rapide du projet et moins de code passe-partout, vous permettant de commencer à créer des fonctionnalités immédiatement.

1. Pour commencer :

Installer Reactify-Django
Pour utiliser Reactify-Django, vous aurez besoin de Node.js installé sur votre machine. Une fois que vous avez Node, vous pouvez exécuter Reactify-Django directement avec npx :
npx réagit-django

Aperçu des commandes
La CLI a deux commandes principales :

• init Configure un nouveau projet Django avec React inclus.
• add Ajoute React à un projet Django existant.

2. Configurer un nouveau projet Django avec React

Pour repartir de zéro, utilisez la commande init pour créer un nouveau projet Django configuré avec React.

1. Exécutez la commande :

npx réactify-django init

2. Répondez aux invites de configuration :
Il vous sera demandé de fournir :

• Nom du projet : Nom de votre projet Django.
• Nom de l'application : Nom de l'application Django où React sera intégré.
• Configuration facultative : Choisissez d'utiliser TypeScript et/ou Tailwind CSS dans le projet pour des outils et des capacités de style supplémentaires.

3. Génération et configuration de fichiers :

La CLI configurera les fichiers de projet Django, configurera Webpack pour le regroupement React et ajoutera les dépendances nécessaires pour TypeScript et/ou Tailwind si sélectionné. Il génère automatiquement un fichier templates/your_app_name/index.html comme point de départ pour React, mappé à l'URL racine avec vues.index.

Exemple d'utilisation :

npx réactify-django init -c ./my-new-project

L'indicateur -c (ou --cwd) vous permet de spécifier le répertoire cible si vous ne l'exécutez pas dans le dossier de projet souhaité.

Remarque sur la configuration de l'URL :
Par défaut, la commande init dans Reactify-Django mappe votre application Django à l'URL racine (""). Cette configuration diffère légèrement de la recommandation typique de Django, qui suggère d'utiliser un préfixe spécifique à l'application pour les URL, tel que :

from django.urls import include, path

urlpatterns = [
    path("your_app_name/", include("your_app_name.urls")),
    path("admin/", admin.site.urls),
]

Cependant, par souci de simplicité, la configuration générée inclut les URL de votre application directement au niveau racine :

from django.urls import include, path

urlpatterns = [
    path("", include("your_app_name.urls")),
    path("admin/", admin.site.urls),
]

Cette approche fournit un point d'entrée propre et de base pour les applications d'une seule page. Il peut être modifié pour inclure le préfixe du nom de l'application si vous préférez suivre la convention de Django ou si vous prévoyez d'avoir plusieurs applications Django.

3. Intégrer React dans un projet Django existant

Si vous avez déjà un projet Django, vous pouvez utiliser la commande add pour configurer React dans une application Django existante.

1. Accédez à votre répertoire d'applications :

chemin cd/vers/votre-application-django

2. Exécutez la commande :

npx réactify-django ajouter

3. Choisissez des options supplémentaires :

Vous serez invité à configurer TypeScript et Tailwind, vous permettant d'adapter votre configuration React à vos besoins.
Cette commande génère un webpack.config.js dans le répertoire de votre application et place le bundle JavaScript dans static/your_app_name/js/ en tant que bundle.js. Pour inclure React dans vos modèles, vous pouvez charger ce bundle comme suit :

{% charge statique %}
<div>



<p><strong>Exemple d'utilisation :</strong></p>

<p>npx réactify-django add -c ./path/to/app</p>

<h2>
  
  
  4. Exécuter et construire le projet
</h2>

<p>Une fois la configuration terminée, vous pouvez commencer à développer immédiatement :</p>

• Mode Développement

1. Démarrez le serveur de développement Webpack :
Dans le répertoire de votre application Django (où se trouve package.json), exécutez :

démarrage npm

Cela lancera le serveur de développement Webpack, qui regroupe votre code React à chaque sauvegarde et l'exporte dans le dossier statique de Django.

2. Exécutez le serveur de développement Django :
Dans une session de terminal distincte, démarrez le serveur Django avec :

python manage.py runserver

Vous pouvez désormais accéder à l'application React depuis le serveur de développement Django, permettant un développement simultané côté serveur et côté client.

• Construction de production

Lorsque vous êtes prêt à déployer, cd dans le répertoire de l'application Django et exécutez :

npm run build

Cela regroupera l'application React pour la production, en plaçant du JavaScript optimisé dans le répertoire static/ pour que Django puisse le servir.

5. Personnalisation de votre configuration

Après avoir exécuté Reactify-Django, les fichiers de configuration (par exemple, webpack.config.js et les paramètres Django) sont disponibles pour un réglage précis. Cette flexibilité vous permet d'ajuster les paramètres pour mieux répondre aux exigences de votre projet.

Conclusion

La CLI réactify-django simplifie le processus d'ajout de React aux projets Django, qu'il s'agisse d'un nouveau départ ou de l'ajout de React à une application existante. En fusionnant la puissance du backend de Django avec la flexibilité du frontend de React, vous pouvez créer une application monolithique robuste et riche en fonctionnalités.
Pour l'essayer, installez la CLI à l'aide de npxreactify-django et découvrez comment elle peut rationaliser votre processus de développement. Profitez du codage avec le meilleur de Django et de React !

J'espère que cet outil vous sera utile pour votre projet. Vous pouvez trouver ce projet sur GitHub. N'hésitez pas à contribuer ou à signaler tout problème !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!