Django और ReactJS को एक साथ काम करने के लिए कैसे प्राप्त करें?

138

Django के लिए नया और यहां तक कि ReactJS के लिए नया। मैं AngularJS और ReactJS में देख रहा हूं, लेकिन ReactJS पर फैसला किया। ऐसा लग रहा था कि एंगुलरजेएस के बाजार में हिस्सेदारी के बावजूद लोकप्रियता बढ़ने के कारण एंगुलरजेएस से बाहर निकल रहा है, और रिएक्टजेएस को पिकअप के लिए तेज कहा जाता है।

वह सब एक तरफ कबाड़ हो गया, मैंने उडेमी पर एक कोर्स करना शुरू कर दिया और कुछ वीडियो के बाद यह देखना महत्वपूर्ण हो गया कि यह Django के साथ कितना अच्छा है। यही कारण है कि जब मैं अनिवार्य रूप से एक दीवार से टकरा रहा था, तो यह उठ रहा था और चल रहा था कि किस तरह का दस्तावेज़ीकरण हो रहा है ताकि मैं अपने पहियों को कई घंटों और रातों के लिए स्पिन नहीं कर रहा हूं।

वास्तव में कोई व्यापक ट्यूटोरियल या pipपैकेज नहीं है, मैं भर आया। pyreactउदाहरण के लिए मेरे पास आए कुछ काम नहीं हुए या दिनांकित नहीं थे ।

मुझे लगा कि मैं सिर्फ रिएक्टजेएस को पूरी तरह से अलग करने के लिए इलाज कर रहा हूं, लेकिन कक्षाओं और आईडी को ध्यान में रखते हुए मैं चाहता हूं कि रिएक्टजेएस घटकों को रेंडर किया जाए। अलग-अलग रिएक्टजेएस घटकों को एक ईएस 5 फाइल में संकलित किए जाने के बाद, केवल एक फ़ाइल को Django में आयात करें। टेम्पलेट।

मुझे लगता है कि जब मैं Django मॉडल से प्रतिपादन करने के लिए मिलता है तो यह जल्दी से टूट जाएगा, हालांकि Django बाकी फ्रेमवर्क लगता है जैसे यह शामिल है। यह देखने के लिए भी पर्याप्त नहीं है कि Redux इस सब को कैसे प्रभावित करता है।

वैसे भी, किसी के पास एक स्पष्ट तरीका है कि वे Django और ReactJS का उपयोग कर रहे हैं जिसे वे साझा करना चाहते हैं?

किसी भी दर पर, प्रलेखन और ट्यूटोरियल AngularJS और Django के लिए भरपूर हैं, इसलिए यह किसी भी फ्रंट-एंड फ्रेमवर्क के साथ आरंभ करने के लिए बस उस मार्ग पर जाने के लिए आकर्षक है ... सबसे अच्छा कारण नहीं।

django reactjs

— eox.dev
स्रोत

2

मेरे पास इसी तरह की जिज्ञासाएं थीं, और प्रतिक्रिया के लिए एक उदाहरण ऐप सेटअप करें + webpack + django - रेपो कुछ संबंधित उपकरणों और लेखों से भी लिंक करता है जो उपयोगी हो सकते हैं।

— danwild

142

मुझे Django के साथ अनुभव नहीं है, लेकिन फ्रंट-एंड से बैक-एंड और फ्रंट-एंड फ्रेमवर्क से फ्रेमवर्क तक की अवधारणाएं समान हैं।

रिएक्ट आपके Django REST API का उपभोग करेगा । फ्रंट-एंड और बैक-एंड किसी भी तरह से जुड़े हुए नहीं हैं। प्रतिक्रिया डेटा प्राप्त करने और सेट करने के लिए आपके REST API में HTTP अनुरोध करेगी।
प्रतिक्रिया की मदद से, Webpack (मॉड्यूल बंडलर) और कोलाहल (transpiler) , बंडल और एक या कई फ़ाइलों को प्रवेश HTML पृष्ठ में रखा जाएगा में अपने जावास्क्रिप्ट transpile होगा। वेबपैक, बैबेल, जावास्क्रिप्ट और रिएक्ट और रेडक्स (एक राज्य कंटेनर) सीखें । मेरा मानना है कि आप Django टेम्प्लेटिंग का उपयोग नहीं करेंगे, लेकिन इसके बजाय प्रतिक्रिया को फ्रंट-एंड रेंडर करने की अनुमति दें।
जैसा कि यह पृष्ठ प्रदान किया गया है, प्रतिक्रिया डेटा प्राप्त करने के लिए एपीआई का उपभोग करेगी ताकि रिएक्ट इसे प्रस्तुत कर सके। HTTP रिक्वेस्ट, जावास्क्रिप्ट (ES6), प्रॉमिस, मिडलवेयर और रिएक्ट की आपकी समझ यहां जरूरी है।

यहाँ मैं वेब पर पाई जाने वाली कुछ चीजें हैं जो मदद करनी चाहिए (त्वरित Google खोज पर आधारित):

Django और रिएक्ट एपीआई यूट्यूब ट्यूटोरियल
Django को रिएक्ट के साथ स्थापित करना ( आर्काइव.ऑर्ग लिंक के साथ टूटी हुई लिंक को बदल दिया गया)
ऊपर दिए गए बोल्ड शब्दों का उपयोग करके अन्य संसाधनों की खोज करें। पहले "Django रिएक्ट वेबपैक" आज़माएं।

आशा है कि यह आपको सही दिशा में आगे बढ़ाएगा! सौभाग्य! उम्मीद है कि जो लोग Django के विशेषज्ञ हैं वे मेरी प्रतिक्रिया में जोड़ सकते हैं।

— KA01
स्रोत

मैं YouTube ट्यूटोरियल देखूंगा। मैं पहले उन दोनों ट्यूटोरियल से गुजरा था। अनुच्छेद 1 ने काम नहीं किया, हालांकि मैंने इसका बारीकी से पालन किया। (अधिकांश कोड को कॉपी और पेस्ट किया गया)। यह एक मौजूदा परियोजना पर है, लेकिन मैं एक नया प्रयास करूँगा। अनुच्छेद 2 में इस्तेमाल किए गए पैकेजों का उपयोग किया गया था और उन्हें हाल ही में अपडेट नहीं किया गया था। वैसे भी, AngularJS और Django के बारे में अधिक पढ़ना ऐसा लगता है जैसे Django REST API का अभी भी उपयोग किया जाता है। मुझे लगता है कि मैं उस आयाम को जोड़े बिना एक समाधान की तलाश कर रहा था, लेकिन ऐसा लगता है कि यह अपरिहार्य है।

— eox.dev

ठीक है, मैंने पुराने लेख को निकालकर अपने उत्तर को थोड़ा अद्यतन किया। यह 2 साल से अधिक पुराना है इसलिए इसे हटाने की जरूरत है। क्या गिरी हुई गोलियों से मदद मिलती है? आपको समझने में क्या परेशानी हो रही है?

— KA01

1

मौजूदा परियोजनाओं और ब्रांड नई परियोजनाओं पर कई बार दूसरी कड़ी की कोशिश करने के बाद, मैंने उनसे कम से कम बात की। लाइन {% render_bundle 'main' %}गलत है और होनी चाहिए {% render_bundle "main" %}।

— eox.dev

1

दूसरा लिंक काम नहीं कर रहा है। कृपया लिंक को अपडेट करें।

— आदित्य मिश्रा

1

मैं उस मृत 2 लिंक w / इस लेख को प्रतिस्थापित करूंगा, मैंने इसका अनुसरण किया और यह ज्यादातर काम करता है .. मध्यम

— डग एफ

36

मुझे आपका दर्द महसूस हो रहा है क्योंकि मैं भी Django और React.js को एक साथ काम करने के लिए शुरू कर रहा हूं। क्या कुछ Django परियोजनाओं, और मुझे लगता है, React.js Django के लिए एक महान मैच है। हालांकि, इसे शुरू करने के लिए डराया जा सकता है। हम यहाँ दिग्गजों के कंधों पर खड़े हैं;)

यहां मैं समझता हूं कि यह सब एक साथ काम करता है (बड़ी तस्वीर, कृपया किसी ने मुझे सही किया तो मैं गलत हूं)।

Django और उसके डेटाबेस (मैं पोस्टग्रैड्स को पसंद करता हूं) एक तरफ (बैकेंड)
Django रेस्ट-फ्रेमवर्क बाहरी दुनिया को इंटरफ़ेस प्रदान करता है (यानी मोबाइल ऐप्स और रिएक्ट और इस तरह)
दूसरी तरफ रिएक्टज, नोडज, वेबपैक, रेडक्स (या शायद मोबक्स?)

रेनांगो के माध्यम से Django और 'फ्रंटएंड' के बीच संचार किया जाता है। सुनिश्चित करें कि आप अपने प्राधिकरण और जगह में बाकी ढांचे के लिए अनुमति प्राप्त करें।

मुझे इस परिदृश्य के लिए एक अच्छा बॉयलर टेम्पलेट मिला और यह बॉक्स से बाहर काम करता है। बस रीडमी https://github.com/scottwoodall/django-react-template को फॉलो करें और एक बार जब आप कर लें, तो आपके पास एक बहुत अच्छा Django Reactjs प्रोजेक्ट चल रहा है। किसी भी तरह से यह उत्पादन के लिए नहीं है, बल्कि आपके लिए एक तरीका है कि आप इसमें खुदाई करें और देखें कि चीजें कैसे जुड़ी हैं और काम कर रही हैं!

एक छोटा सा बदलाव जो मैं सुझाना चाहता हूं वह यह है: बैकएंड सेटअप करने के लिए 2 स्टेप पर पहुंचने से पहले सेटअप निर्देशों का पालन करें लेकिन (Django यहां https://github.com/scottwoodall/django-react-template/blob-master) /backend/README.md ), सेटअप के लिए आवश्यकताएँ फ़ाइल बदलें।

आप अपने प्रोजेक्ट में फ़ाइल को /backend/requirements/common.pip पर पाएँगे। इसकी सामग्री को इसके साथ बदलें

appdirs==1.4.0
Django==1.10.5
django-autofixture==0.12.0
django-extensions==1.6.1
django-filter==1.0.1
djangorestframework==3.5.3
psycopg2==2.6.1

यह आपको Django और इसके रेस्ट फ्रेमवर्क के लिए नवीनतम स्थिर संस्करण प्राप्त करता है।

मुझे आशा है कि वह मदद करेंगे।

— imolitor
स्रोत

4

एक साल बाद, मैंने VUE.js ( vuejs.org ) पर स्विच किया । मैंने इसे Django टेम्प्लेट के साथ काम किया और यह Django रेस्ट फ्रेमवर्क के माध्यम से डेटाबेस से संवाद करेगा। यह तेज़ और हल्का है (~ 20kb)

— imolitor

17

जैसा कि दूसरों ने आपको उत्तर दिया है, यदि आप एक नई परियोजना बना रहे हैं, तो आप फ्रंटएंड और बैकएंड को अलग कर सकते हैं और अपने फ्रंटएंड एप्लिकेशन के लिए बाकी एपीआई बनाने के लिए किसी भी django बाकी प्लगइन का उपयोग कर सकते हैं। यह आदर्श दुनिया में है।

यदि आपके पास पहले से ही मौजूद django templating के साथ एक परियोजना है, तो आपको उस पृष्ठ पर अपनी प्रतिक्रिया डोम रेंडर को लोड करना होगा जिसे आप एप्लिकेशन लोड करना चाहते हैं। मेरे मामले में मेरे पास पहले से ही django-पाइपलाइन था और मैंने अभी ब्राउज़राइज़ एक्सटेंशन को जोड़ा था। ( https://github.com/j0hnsmith/django-pipeline-browserify )

उदाहरण के लिए, मैंने django- पाइपलाइन का उपयोग करके ऐप लोड किया:

PIPELINE = {
    # ...
    'javascript':{
        'browserify': {
            'source_filenames' : (
                'js/entry-point.browserify.js',
            ),
            'output_filename': 'js/entry-point.js',
        },
    }
}

आपकी " प्रविष्टि-point.browserify.js " ES6 फ़ाइल हो सकती है जो टेम्पलेट में आपकी प्रतिक्रिया ऐप लोड करती है:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app.js';
import "babel-polyfill";

import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import promise from 'redux-promise';
import reducers from './reducers/index.js';

const createStoreWithMiddleware = applyMiddleware(
  promise
)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App/>
  </Provider>
  , document.getElementById('my-react-app')
);

अपने django टेम्पलेट में, अब आप अपने ऐप को आसानी से लोड कर सकते हैं:

{% load pipeline %}

{% comment %} 
`browserify` is a PIPELINE key setup in the settings for django 
 pipeline. See the example above
{% endcomment %}

{% javascript 'browserify' %}

{% comment %} 
the app will be loaded here thanks to the entry point you created 
in PIPELINE settings. The key is the `entry-point.browserify.js` 
responsable to inject with ReactDOM.render() you react app in the div 
below
{% endcomment %}
<div id="my-react-app"></div>

Django- पाइपलाइन का उपयोग करने का लाभ यह है कि स्टैटिक्स के दौरान संसाधित होते हैं collectstatic।

— करीम एन गोरजक्स
स्रोत

10

पहला दृष्टिकोण अलग Django और प्रतिक्रिया क्षुधा का निर्माण कर रहा है। Django, Django REST फ्रेमवर्क का उपयोग करके बनाए गए API की सेवा के लिए जिम्मेदार होगा और React इन APIs का उपयोग Axios क्लाइंट या ब्राउज़र के एपीआई API का उपयोग करके करेगा। आपको दो सर्वरों की आवश्यकता होगी, दोनों विकास और उत्पादन में, एक Django (REST API) के लिए और दूसरा प्रतिक्रिया के लिए (स्थैतिक फ़ाइलों की सेवा के लिए) ।

दूसरा तरीका अलग है फ्रंटएंड और बैकएंड एप्स को जोड़ दिया जाएगा । मूल रूप से आप Django का उपयोग रिएक्ट फ़्रंटेंड की सेवा करने और REST API को उजागर करने के लिए करेंगे। तो आपको Django के साथ रिएक्ट और वेबपैक को एकीकृत करने की आवश्यकता होगी, ये चरण हैं जो आप ऐसा करने के लिए अनुसरण कर सकते हैं

पहले अपने Django प्रोजेक्ट को उत्पन्न करें फिर इस प्रोजेक्ट डायरेक्टरी के अंदर React CLI का उपयोग करके अपने रिएक्ट एप्लिकेशन को जनरेट करें

Django परियोजना के लिए पाइप के साथ django-webpack-loader स्थापित करें :

pip install django-webpack-loader

अगले एप्लिकेशन को इंस्टॉल किए गए एप्लिकेशन में जोड़ें और settings.pyनिम्न ऑब्जेक्ट जोड़कर इसे कॉन्फ़िगर करें

WEBPACK_LOADER = {
    'DEFAULT': {
            'BUNDLE_DIR_NAME': '',
            'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
        }
}

फिर एक Django टेम्प्लेट जोड़ें जिसका उपयोग रिएक्ट एप्लिकेशन को माउंट करने के लिए किया जाएगा और इसे Django द्वारा परोसा जाएगा

{ % load render_bundle from webpack_loader % }

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Django + React </title>
  </head>
  <body>
    <div id="root">
     This is where React will be mounted
    </div>
    { % render_bundle 'main' % }
  </body>
</html>

फिर urls.pyइस टेम्पलेट की सेवा के लिए एक URL जोड़ें

from django.conf.urls import url
from django.contrib import admin
from django.views.generic import TemplateView

urlpatterns = [

    url(r'^', TemplateView.as_view(template_name="main.html")),

]

यदि आप इस बिंदु पर Django और React सर्वर दोनों शुरू करते हैं, तो आपको एक Django त्रुटि मिलेगी जिसमें webpack-stats.jsonयह मौजूद नहीं है। इसलिए अगली बार आपको अपने रिएक्ट एप्लिकेशन को स्टैटस फाइल जनरेट करने में सक्षम बनाना होगा।

आगे बढ़ें और अपने रिएक्ट ऐप के अंदर नेविगेट करें फिर इंस्टॉल करें webpack-bundle-tracker

npm install webpack-bundle-tracker --save

फिर अपने वेबपैक कॉन्फ़िगरेशन को बाहर निकालें और config/webpack.config.dev.jsफिर जोड़ें पर जाएँ

var BundleTracker  = require('webpack-bundle-tracker');
//...

module.exports = {

    plugins: [
          new BundleTracker({path: "../", filename: 'webpack-stats.json'}),
    ]
}

यह वेबपैक में बंडलट्रैकर प्लगइन जोड़ें और इसे webpack-stats.jsonमूल फ़ोल्डर में जनरेट करने का निर्देश दें ।

सुनिश्चित करें कि config/webpack.config.prod.jsउत्पादन के लिए भी ऐसा ही करें ।

अब यदि आप अपने रिएक्ट सर्वर को फिर से चलाते हैं तो जेनोवा जेनोवा सर्वर webpack-stats.jsonद्वारा उत्पन्न वेबपैक बंडलों के बारे में जानकारी प्राप्त करने के लिए Django इसका उपभोग करने में सक्षम होगा।

कुछ और बातें हैं। आप इस ट्यूटोरियल से अधिक जानकारी पा सकते हैं ।

— अहमद बूचेफ़रा
स्रोत

क्या आपको युग्मित दृष्टिकोण में चलने वाले वेबपैक-देव-सर्वर की आवश्यकता है? क्योंकि ट्यूटोरियल में वह इसे चला रहा है। मेरी समझ से इसे चलाने की आवश्यकता है क्योंकि इसका उपयोग django द्वारा बंडल को अद्यतन रखने के लिए किया जाता है। क्या यह सही है? यदि यह है कि यह उत्पादन में कैसे काम करेगा, तो क्या मुझे अभी भी दो सर्वरों की आवश्यकता होगी?

— पावले

1

विकास में आपको Django देव सर्वर और रिएक्ट / वेबपैक देव सर्वर दोनों की आवश्यकता होगी। उत्पादन में आपको बस एक सर्वर (Django) चलाने की जरूरत है क्योंकि Django द्वारा निर्मित फ़ाइलों की सेवा का ख्याल npm run build

— रखेगा

स्पष्टीकरण के लिए धन्यवाद।

— पावले

आप पहले दृष्टिकोण पर विस्तृत कर सकते हैं? जो मैं समझता हूं, उसमें एक expressसर्वर शामिल होगा जो कि रिएक्ट स्टैटिक जेएस फाइलों को सेवा देगा और जेएस फाइलें Django सर्वर से डेटा लाने के लिए एक अजाक्स अनुरोध करेगी। ब्राउज़र पहले expressसर्वर को हिट करता है, इसमें Django एक के बारे में कोई विचार नहीं है। क्या मैं सही हूँ? इस दृष्टिकोण के साथ सर्वर साइड रेंडरिंग जैसा कुछ है?

— yadav_vi

आप बस अपनी स्थैतिक फ़ाइलों के लिए एक स्थिर होस्ट और एक CDN का उपयोग कर सकते हैं। उदाहरण के लिए आप CDN के रूप में प्रतिक्रिया एप्लिकेशन और CloudFlare होस्ट करने के लिए GitHub पेज का उपयोग कर सकते हैं। सर्वर साइड रेंडरिंग के लिए आपको एक और सेटअप की आवश्यकता होती है जैसे एक्सप्रेस सर्वर का उपयोग करना लेकिन वहाँ भी स्थिर होस्टिंग सेवाएँ हैं जो नेटलाइज़ की तरह सर्वर साइड रेंडरिंग प्रदान करती हैं।

— अहमद बुचेफ़्रा

10

किसी के लिए एक नोट जो एक बैकएंड या Django आधारित भूमिका से आ रहा है और ReactJS के साथ काम करने की कोशिश कर रहा है: कोई भी पहली कोशिश में ReactJS पर्यावरण को सफलतापूर्वक सेटअप करने का प्रबंधन नहीं करता है :)

ओवैस लोन का एक ब्लॉग है जो http://owaislone.org/blog/webpack-plus-reactjs-and-django/ से उपलब्ध है ; हालांकि वेबपैक विन्यास पर वाक्य रचना तारीख से बाहर है।

मेरा सुझाव है कि आप ब्लॉग में वर्णित चरणों का पालन करें और नीचे दी गई सामग्री से वेबपैक कॉन्फ़िगरेशन फ़ाइल को बदलें। हालाँकि यदि आप Django और React दोनों के लिए नए हैं, तो सीखने की अवस्था के कारण एक बार में एक चबाएं, आप शायद निराश हो जाएंगे।

var path = require('path');
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');

module.exports = {
    context: __dirname,
    entry: './static/assets/js/index',
    output: {
        path: path.resolve('./static/assets/bundles/'),
        filename: '[name]-[hash].js'
    },
    plugins: [
        new BundleTracker({filename: './webpack-stats.json'})
    ],

 module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },


  resolve: {
        modules: ['node_modules', 'bower_components'],
        extensions: ['.js', '.jsx']
    }
};

— IVI
स्रोत

शुरुआत में नोट वास्तव में उत्साहजनक है!

— मोहम्मद शरीफ C

7

स्वीकृत उत्तर मुझे यह विश्वास दिलाता है कि Django बैकएंड और रिएक्ट फ्रंटेंड को डिकॉउलिंग करना किसी भी मामले में जाने का सही तरीका है। वास्तव में ऐसे दृष्टिकोण हैं जिनमें रिएक्ट और Django युग्मित हैं, जो विशेष परिस्थितियों में बेहतर अनुकूल हो सकते हैं।

इस ट्यूटोरियल यह अच्छी तरह से समझाता है। विशेष रूप से:

मैं निम्नलिखित पैटर्न देखता हूं (जो लगभग हर वेब फ्रेमवर्क के लिए सामान्य हैं):

अपने स्वयं के "फ्रंटेंड" Django ऐप में सक्रिय करें: एक ही HTML टेम्पलेट लोड करें और रिएक्ट को फ्रंटेंड को प्रबंधित करने दें (कठिनाई:

-जंगो रीस्ट एक स्वसंपूर्ण एपीआई के रूप में + एक स्वसंपूर्ण एसपीए के रूप में प्रतिक्रिया (कठिनाई: कठिन, इसमें प्रमाणीकरण के लिए जेडब्ल्यूटी शामिल है)

-मिक्स और मैच: Django टेम्प्लेट के अंदर मिनी रिएक्ट ऐप्स (कठिनाई: सरल)

— Rexcirus
स्रोत

1

आप निम्नलिखित ट्यूटोरियल की कोशिश कर सकते हैं, यह आपको आगे बढ़ने में मदद कर सकता है:

रिएक्ट और Django एक साथ सेवा

— तौहिदुल इस्लाम
स्रोत

1

मुझे पता है कि यह कुछ साल की देरी है, लेकिन मैं इसे इस यात्रा पर अगले व्यक्ति के लिए बाहर रख रहा हूं।

DjangoRESTFramework की तुलना में GraphQL सहायक और आसान हो गया है। आपको मिलने वाली प्रतिक्रियाओं के संदर्भ में यह अधिक लचीला भी है। आपको वही मिलता है जो आप मांगते हैं और जो आप चाहते हैं उसे प्राप्त करने के लिए प्रतिक्रिया के माध्यम से फ़िल्टर नहीं करना पड़ता है।

आप सर्वर साइड पर ग्राफीन Django और रिएक्ट + अपोलो / रिले का उपयोग कर सकते हैं ... आप इसे देख सकते हैं क्योंकि यह आपका प्रश्न नहीं है।

— K_Wainaina
स्रोत

ग्राफीन और रिएक्ट + अपोलो एक उत्कृष्ट स्टैक है! DRF से लिखने के लिए थोड़ा अधिक पायथन, लेकिन JS कोड में भारी कमी, खासकर जब से अपोलो रेडक्स की आवश्यकता को मारता है।

— जॉन ओटलेनिप्स