Django ve ReactJS'nin birlikte çalışması nasıl sağlanır?

Django için yeni ve hatta ReactJS için daha yeni. AngularJS ve ReactJS'yi araştırdım, ancak ReactJS'ye karar verdim. AngularJS'nin pazar payından daha fazlasına sahip olmasına rağmen AngularJS'yi popülerlik kadar sınırlandırdığı görülüyordu ve ReactJS'nin alımdan daha hızlı olduğu söyleniyor.

Tüm bu önemsiz bir yana, Udemy üzerine bir ders almaya başladım ve birkaç videodan sonra Django ile ne kadar iyi entegre olduğunu görmek önemli görünüyordu. Kaçınılmaz olarak bir duvara çarpıp çalıştığımda, ne tür belgeler var, böylece tekerleklerimi birkaç saat ve gece boyunca döndürmüyorum.

Karşılaştığım gerçekten herhangi bir kapsamlı öğretici veya pippaket yok. Karşılaştığım birkaç kişi işe yaramadı ya da tarih atılmıştı pyreact.

Ben bir düşünce sadece ReactJS tamamen ayrı tedavi etmek, ama ReactJS bileşenleri render istiyorum sınıfları ve kimlikleri göz önünde bulundurarak oldu. Ayrı ReactJS bileşenleri tek bir ES5 dosyasına derlendikten sonra, bu tek dosyayı Django içine almak şablonu.

Ben Django Rest Framework dahil gibi görünse de Django modellerinden render almak için bu hızla çökecek düşünüyorum. Redux'un tüm bunları nasıl etkilediğini görmek için yeterince uzak değil.

Her neyse, herkesin paylaşmak istedikleri Django ve ReactJS kullandıkları net bir yolu var mı?

Her halükarda, belgeler ve öğreticiler AngularJS ve Django için bol miktardadır, bu yüzden herhangi bir ön uç çerçeveye başlamak için bu rotaya gitmek caziptir ... En iyi neden değil.

Django ile deneyimim yok ama ön uçtan arka uca ve ön uç çerçeveden çerçeveye kadar olan kavramlar aynı.

1. React, Django REST API'nizi tüketecektir . Ön uçlar ve arka uçlar hiçbir şekilde bağlı değildir. React, verileri almak ve ayarlamak için REST API'nize HTTP istekleri yapar.
2. React, Webpack (modül paketleyici) ve Babel (aktarıcı) yardımıyla Javascript'inizi giriş HTML sayfasına yerleştirilecek tek veya birden fazla dosyaya paketleyip aktarır. Webpack, Babel, Javascript ve React ve Redux (durum konteyneri) hakkında bilgi edinin . Ben inanıyorum Ön uç işlemek için tepki izin yerine Django şablon oluşturmayı kullanın ama olmaz.
3. Bu sayfa oluşturuldukça React, React'in oluşturabilmesi için verileri almak üzere API'yı kullanır. HTTP istekleri, Javascript (ES6), Promises, Middleware ve React hakkındaki anlayışınız burada çok önemlidir.

Web'de yardımcı olması gereken (hızlı bir Google aramasına dayalı olarak) bulduğum birkaç şey :

• Django ve React API Youtube eğitimi
• Django'yu React ile kurma (bozuk bağlantı archive.org bağlantısıyla değiştirildi)
• Yukarıdaki kalın harflerle yazılmış terimleri kullanarak diğer kaynakları arayın. Önce "Django React Webpack" i deneyin.

Umarım bu sizi doğru yöne yönlendirir! İyi şanslar! Umarım Django'da uzman olan diğerleri cevabımı ekleyebilir.

Ben de senin acını hissediyorum, ben de Django ve React.js birlikte çalışmak için başlıyorum. Birkaç Django projesi yaptı ve bence React.js Django için harika bir eşleşme. Ancak, başlamak korkutucu olabilir. Burada devlerin omuzlarında duruyoruz;)

İşte böyle düşünüyorum, hepsi birlikte çalışıyor (büyük resim, lütfen yanılıyorsam biri beni düzeltir).

• Bir tarafta Django ve veritabanı (Postgres'i tercih ederim) (arka uç)
• Dış dünyaya arayüz sağlayan Django Rest-framework (Mobil Uygulamalar ve React ve benzeri)
• Reactjs, Nodejs, Webpack, Redux (veya belki de MobX?) Diğer tarafta (ön uç)

Django ve 'ön uç' arasındaki iletişim Dinlenme çerçevesi aracılığıyla yapılır. Geri Kalanı çerçevesi için yetkilendirmenizi ve izinlerinizi aldığınızdan emin olun.

Tam olarak bu senaryo için iyi bir kazan şablonu buldum ve kutunun dışında çalışıyor. Benioku https://github.com/scottwoodall/django-react-template'i takip edin ve işiniz bittiğinde, oldukça güzel bir Django Reactjs projeniz var. Hiçbir şekilde bu üretim için değildir, daha çok işinizi kazmanın ve işlerin nasıl bağlandığını ve çalıştığını görmenin bir yolu olarak!

Önermek istediğim küçük bir değişiklik şudur: Arka ucu ayarlamak için 2. adıma geçmeden önce kurulum talimatlarını uygulayın (ancak burada Django https://github.com/scottwoodall/django-react-template/blob/master /backend/README.md ) kurulum için gereksinimler dosyasını değiştirin.

Dosyayı projenizde /backend/requirements/common.pip adresinde bulabilirsiniz. İçeriğini bununla değiştir

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

Bu size Django ve onun Rest framework için en son kararlı sürümünü sağlar.

Umarım bu yardımcı olur.

Diğerlerinin size cevap verdiği gibi, yeni bir proje oluşturuyorsanız, ön ve arka uçları ayırabilir ve ön uç uygulamanız için dinlenme API'si oluşturmak için herhangi bir django dinlenme eklentisini kullanabilirsiniz. Bu ideal dünyada.

Zaten django şablonunun ayarlanmış olduğu bir projeniz varsa, tepki yüklemek için uygulamayı yüklemek istediğiniz sayfaya yüklemeniz gerekir. Benim durumumda zaten django-pipeline vardı ve sadece browserify uzantısını ekledim. ( https://github.com/j0hnsmith/django-pipeline-browserify )

Örnekte olduğu gibi, django-pipeline kullanarak uygulamayı yükledim:

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

" Entry-point.browserify.js ", reaksiyon uygulamanızı şablona yükleyen bir ES6 dosyası olabilir:

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 şablonunuzda artık uygulamanızı kolayca yükleyebilirsiniz:

{% 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-boru hattı kullanmanın avantajı, sırasında statiklerin işlenmesi collectstatic.

İlk yaklaşım, ayrı Django ve React uygulamaları oluşturmaktır. Django, Django REST çerçevesi kullanılarak oluşturulan API'yi sunmaktan sorumlu olacak ve React bu API'ları Axios istemcisi veya tarayıcının getirme API'sını kullanarak tüketecektir. Biri Django (REST API) ve diğeri React (statik dosyaları sunmak için) için geliştirme ve üretimde iki sunucunuz olması gerekir .

İkinci yaklaşım, ön uç ve arka uç uygulamalarının birleştirileceğinden farklıdır . Temel olarak Django'yu hem React ön ucuna hizmet vermek hem de REST API'sini göstermek için kullanırsınız. Dolayısıyla React ve Webpack'i Django ile entegre etmeniz gerekecek, bunu yapmak için izleyebileceğiniz adımlar

Önce Django projenizi oluşturun, sonra bu proje dizininin içinde React CLI kullanarak React uygulamanızı oluşturun

Django projesi için django-webpack-loader'ı pip ile yükleyin :

pip install django-webpack-loader

Sonra uygulamayı yüklü uygulamalara ekleyin settings.pyve aşağıdaki nesneyi ekleyerek yapılandırın

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

Ardından React uygulamasını bağlamak için kullanılacak ve Django tarafından sunulacak bir Django şablonu ekleyin

{ % 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>

Ardından urls.pybu şablonu sunmak için bir URL ekleyin

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")),

]

Bu noktada hem Django hem de React sunucularını başlatırsanız, webpack-stats.jsonvar olmadığını söyleyen bir Django hatası alırsınız . Bundan sonra React uygulamanızı istatistik dosyasını oluşturabilmeniz gerekir.

Devam edin ve React uygulamanızın içinde gezinin ve ardından yükleyin webpack-bundle-tracker

npm install webpack-bundle-tracker --save

Ardından Webpack yapılandırmanızı çıkarın ve config/webpack.config.dev.jsardından

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

module.exports = {

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

Bu, BundleTracker eklentisini Webpack'e ekler ve webpack-stats.jsonüst klasörde oluşturmasını söyler .

config/webpack.config.prod.jsÜretim için de aynısını yaptığınızdan emin olun .

Şimdi React sunucunuzu yeniden çalıştırırsanız, webpack-stats.jsonüretilen oluşturulur ve Django, React dev sunucusu tarafından oluşturulan Webpack paketleri hakkında bilgi bulmak için onu tüketebilir.

Başka şeyler de var. Bu eğiticiden daha fazla bilgi bulabilirsiniz .

Bir arka uç veya Django tabanlı bir rolden gelen ve ReactJS ile çalışmaya çalışan herkes için bir not: Kimse ilk denemede ReactJS ortamını başarıyla kurmayı başaramaz :)

Http://owaislone.org/blog/webpack-plus-reactjs-and-django/ adresinden erişilebilen Owais Lone'dan bir blog var ; ancak Webpack yapılandırmasındaki sözdizimi güncelliğini yitirmiştir.

Blogda belirtilen adımları izlemenizi ve web paketi yapılandırma dosyasını aşağıdaki içerikle değiştirmenizi öneririz. Ancak hem Django hem de React için yeniyseniz, öğrenme eğrisi nedeniyle her seferinde bir tane çiğneyin, muhtemelen hayal kırıklığına uğrayacaksınız.

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']
    }
};

Kabul edilen cevap beni Django arka ucunu ve React Frontend'i ayırmanın ne olursa olsun gitmenin doğru yolu olduğuna inanmamı sağlıyor. Aslında, React ve Django'nun birleştirildiği, belirli durumlarda daha uygun olabilecek yaklaşımlar vardır.

Bu öğretici bunu iyi açıklıyor. Özellikle:

Aşağıdaki kalıpları görüyorum (neredeyse her web çerçevesi için ortaktır):

-Kendi "frontend" Django uygulamasında yanıt verin: tek bir HTML şablonu yükleyin ve React'ın ön ucu yönetmesine izin verin (zorluk: orta)

Bağımsız bir API olarak Django REST + Bağımsız bir SPA olarak tepki verin (zorluk: zor, kimlik doğrulama için JWT içerir)

-Karıştır ve eşleştir: Django şablonları içindeki mini React uygulamaları (zorluk: basit)

Aşağıdaki öğreticiyi deneyebilirsiniz, ilerlemenize yardımcı olabilir:

React ve Django'ya birlikte hizmet etmek

Bunun birkaç yıl geç olduğunu biliyorum, ama bu yolculukta bir sonraki kişi için buraya koyuyorum.

GraphQL, DjangoRESTFramework ile karşılaştırıldığında faydalı ve çok daha kolay oldu. Aldığınız yanıtlar açısından da daha esnektir. İstediğinizi alırsınız ve istediğinizi elde etmek için yanıtı filtrelemeniz gerekmez.

Graphene Django'yu sunucu tarafında ve React + Apollo / Relay kullanabilirsiniz ... Sorunun bu olmadığı gibi içine bakabilirsiniz.