Bagaimana membuat Django dan ReactJS bekerja bersama?

Baru di Django dan bahkan lebih baru di ReactJS. Saya telah melihat AngularJS dan ReactJS, tetapi memutuskan ReactJS. Sepertinya AngularJS mengalahkan popularitasnya meskipun AngularJS memiliki lebih banyak pangsa pasar, dan ReactJS dikatakan lebih cepat untuk diambil.

Mengesampingkan semua sampah itu, saya mulai mengambil kursus tentang Udemy dan setelah beberapa video tampaknya penting untuk melihat seberapa baik itu terintegrasi dengan Django. Saat itulah saya secara tak terelakkan menabrak dinding baru saja menjalankannya, dokumentasi macam apa yang ada di luar sana sehingga saya tidak memutar roda saya selama beberapa jam dan malam.

Sebenarnya tidak ada tutorial komprehensif, atau pippaket, yang saya temukan. Beberapa yang saya temukan tidak bekerja atau berkencan, pyreactmisalnya.

Satu pemikiran yang saya miliki hanyalah untuk memperlakukan ReactJS sepenuhnya terpisah, tetapi dengan mempertimbangkan kelas dan ID yang saya ingin komponen ReactJS untuk dirender. Setelah komponen ReactJS yang terpisah dikompilasi menjadi satu file ES5, cukup impor file tunggal itu ke Django template.

Saya pikir itu akan cepat rusak ketika saya sampai ke rendering dari model Django meskipun Kerangka Rest Django terdengar seperti itu terlibat. Bahkan tidak cukup jauh untuk melihat bagaimana Redux memengaruhi semua ini.

Bagaimanapun, ada yang punya cara jelas mereka menggunakan Django dan ReactJS yang ingin mereka bagikan?

Bagaimanapun juga, dokumentasi dan tutorial berlimpah untuk AngularJS dan Django, jadi sangat menggoda untuk pergi ke rute itu untuk memulai dengan kerangka front-end apapun ... Bukan alasan terbaik.

Saya tidak memiliki pengalaman dengan Django tetapi konsep dari front-end ke back-end dan kerangka front-end ke kerangka adalah sama.

1. React akan menggunakan Django REST API Anda . Ujung depan dan belakang tidak terhubung dengan cara apa pun. React akan membuat permintaan HTTP ke REST API Anda untuk mengambil dan mengatur data.
2. React, dengan bantuan Webpack (module bundler) & Babel (transpiler) , akan memaketkan dan mentranspilasi Javascript Anda menjadi satu atau beberapa file yang akan ditempatkan di halaman entri HTML. Pelajari Webpack, Babel, Javascript dan React and Redux (wadah negara bagian) . Saya yakin Anda tidak akan menggunakan template Django tetapi sebaliknya mengizinkan React untuk membuat front-end.
3. Saat halaman ini di-render, React akan menggunakan API untuk mengambil data sehingga React dapat membuatnya. Pemahaman Anda tentang permintaan HTTP, Javascript (ES6), Promises, Middleware, dan React sangat penting di sini.

Berikut ini beberapa hal yang saya temukan di web yang semestinya membantu (berdasarkan pencarian Google cepat):

• Tutorial Youtube Django dan React API
• Menyiapkan Django dengan React (mengganti tautan rusak dengan tautan archive.org)
• Cari sumber daya lain menggunakan istilah yang dicetak tebal di atas. Cobalah "Django React Webpack" dulu.

Semoga ini mengarahkan Anda ke arah yang benar! Semoga berhasil! Semoga orang lain yang ahli di Django dapat menambah tanggapan saya.

Saya merasakan sakit Anda saat saya, juga, mulai membuat Django dan React.js bekerja bersama. Melakukan beberapa proyek Django, dan saya pikir, React.js sangat cocok untuk Django. Namun, memulainya bisa jadi menakutkan. Kami berdiri di pundak raksasa di sini;)

Begini cara saya berpikir, semuanya bekerja bersama (gambaran besar, tolong seseorang mengoreksi saya jika saya salah).

• Django dan database-nya (saya lebih suka Postgres) di satu sisi (backend)
• Django Rest-framework menyediakan antarmuka ke dunia luar (yaitu Aplikasi Seluler dan React dan semacamnya)
• Reactjs, Nodejs, Webpack, Redux (atau mungkin MobX?) Di sisi lain (frontend)

Komunikasi antara Django dan 'ujung depan' dilakukan melalui kerangka Istirahat. Pastikan Anda mendapatkan otorisasi dan izin untuk kerangka Istirahat di tempat.

Saya menemukan template boiler yang bagus untuk skenario ini dan berhasil di luar kotak. Cukup ikuti readme https://github.com/scottwoodall/django-react-template dan setelah Anda selesai, Anda memiliki proyek Django Reactjs yang cukup bagus sedang berjalan. Tidak berarti ini dimaksudkan untuk produksi, melainkan sebagai cara bagi Anda untuk menggali dan melihat bagaimana berbagai hal terhubung dan bekerja!

Satu perubahan kecil yang ingin saya sarankan adalah ini: Ikuti petunjuk penyetelan TETAPI sebelum Anda mencapai langkah ke-2 untuk menyiapkan backend (Django di sini https://github.com/scottwoodall/django-react-template/blob/master /backend/README.md ), ubah file persyaratan untuk penyiapan.

Anda akan menemukan file dalam proyek Anda di /backend/requirements/common.pip Ganti isinya dengan ini

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

ini memberi Anda versi stabil terbaru untuk Django dan kerangka Istirahatnya.

Saya harap itu membantu.

Seperti yang dijawab orang lain, jika Anda membuat proyek baru, Anda dapat memisahkan frontend dan backend dan menggunakan plugin django rest untuk membuat api rest untuk aplikasi frontend Anda. Ini adalah dunia yang ideal.

Jika Anda memiliki sebuah proyek dengan django templating sudah ada, maka Anda harus memuat react dom render Anda di halaman yang Anda inginkan untuk memuat aplikasi. Dalam kasus saya, saya sudah memiliki django-pipeline dan saya baru saja menambahkan ekstensi browserify. ( https://github.com/j0hnsmith/django-pipeline-browserify )

Seperti pada contoh, saya memuat aplikasi menggunakan django-pipeline:

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

" Entry-point.browserify.js " Anda bisa menjadi file ES6 yang memuat aplikasi react Anda di template:

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')
);

Dalam template django Anda, sekarang Anda dapat memuat aplikasi Anda dengan mudah:

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

Keuntungan menggunakan django-pipeline adalah bahwa statika diproses selama collectstatic.

Pendekatan pertama adalah membangun aplikasi Django dan React terpisah. Django akan bertanggung jawab untuk melayani API yang dibangun menggunakan kerangka kerja REST Django dan React akan menggunakan API ini menggunakan klien Axios atau API pengambilan browser. Anda harus memiliki dua server, baik dalam pengembangan dan produksi, satu untuk Django (REST API) dan yang lainnya untuk React (untuk melayani berkas statis) .

Pendekatan kedua berbeda, aplikasi frontend dan backend akan digabungkan . Pada dasarnya Anda akan menggunakan Django untuk melayani frontend React dan untuk mengekspos REST API. Jadi Anda perlu mengintegrasikan React dan Webpack dengan Django, ini adalah langkah-langkah yang dapat Anda ikuti untuk melakukan itu

Pertama buat proyek Django anda kemudian di dalam direktori proyek ini buat aplikasi React anda menggunakan CLI React

Untuk proyek Django instal django-webpack-loader dengan pip:

pip install django-webpack-loader

Selanjutnya tambahkan aplikasi ke aplikasi yang diinstal dan konfigurasikan settings.pydengan menambahkan objek berikut

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

Kemudian tambahkan templat Django yang akan digunakan untuk memasang aplikasi React dan akan dilayani oleh 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>

Kemudian tambahkan URL urls.pyuntuk menyajikan template ini

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

]

Jika Anda memulai kedua server Django dan React pada titik ini Anda akan mendapatkan kesalahan Django yang mengatakan webpack-stats.jsontidak ada. Jadi selanjutnya Anda perlu membuat aplikasi React Anda dapat menghasilkan file statistik.

Lanjutkan dan navigasikan ke dalam aplikasi React Anda lalu instal webpack-bundle-tracker

npm install webpack-bundle-tracker --save

Kemudian keluarkan konfigurasi Webpack Anda dan lanjutkan ke config/webpack.config.dev.jstambahkan

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

module.exports = {

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

Ini menambahkan plugin BundleTracker ke Webpack dan menginstruksikannya untuk menghasilkan webpack-stats.jsondi folder induk.

Pastikan juga untuk melakukan hal yang sama config/webpack.config.prod.jsuntuk produksi.

Sekarang jika Anda menjalankan ulang server React Anda, webpack-stats.jsonmaka akan dibuat dan Django akan dapat menggunakannya untuk mencari informasi tentang bundel Webpack yang dibuat oleh server dev React.

Ada beberapa hal lain yang perlu diperhatikan. Anda dapat menemukan lebih banyak informasi dari tutorial ini .

Catatan untuk siapa saja yang datang dari backend atau peran berbasis Django dan mencoba untuk bekerja dengan ReactJS: Tidak ada yang berhasil mengatur lingkungan ReactJS dengan sukses pada percobaan pertama :)

Ada sebuah blog dari Owais Lone yang tersedia dari http://owaislone.org/blog/webpack-plus-reactjs-and-django/ ; namun sintaks pada konfigurasi Webpack sudah ketinggalan zaman.

Saya sarankan Anda mengikuti langkah-langkah yang disebutkan di blog dan mengganti file konfigurasi webpack dengan konten di bawah ini. Namun jika Anda baru mengenal Django dan React, kunyah satu per satu karena kurva pembelajaran Anda mungkin akan frustrasi.

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

Jawaban yang diterima menuntun saya untuk percaya bahwa memisahkan backend Django dan React Frontend adalah cara yang benar untuk pergi apa pun yang terjadi. Nyatanya ada pendekatan dimana React dan Django digabungkan, yang mungkin lebih cocok dalam situasi tertentu.

Tutorial ini menjelaskan hal ini dengan baik. Khususnya:

Saya melihat pola berikut (yang umum untuk hampir setiap kerangka web):

-React dalam aplikasi Django “frontend” -nya sendiri: memuat satu templat HTML dan biarkan React mengatur frontend (kesulitan: medium)

-Django REST sebagai API mandiri + Bereaksi sebagai SPA mandiri (kesulitan: sulit, ini melibatkan JWT untuk otentikasi)

-Mix dan cocokkan: aplikasi React mini di dalam templat Django (kesulitan: sederhana)

Saya tahu ini terlambat beberapa tahun, tapi saya akan menaruhnya di sana untuk orang berikutnya dalam perjalanan ini.

GraphQL telah membantu dan jauh lebih mudah dibandingkan dengan DjangoRESTFramework. Ini juga lebih fleksibel dalam hal tanggapan yang Anda dapatkan. Anda mendapatkan apa yang Anda minta dan tidak perlu memfilter tanggapan untuk mendapatkan apa yang Anda inginkan.

Anda dapat menggunakan Graphene Django di sisi server dan React + Apollo / Relay ... Anda dapat melihatnya karena itu bukan pertanyaan Anda.

Anda dapat mencoba tutorial berikut, ini dapat membantu Anda untuk maju:

Melayani React dan Django bersama