จะทำให้ Django และ ReactJS ทำงานร่วมกันได้อย่างไร?

ใหม่สำหรับ Django และใหม่กว่าสำหรับ ReactJS ฉันมองหา AngularJS และ ReactJS แต่ตัดสินใจเลือก ReactJS ดูเหมือนว่ามันจะทำให้ AngularJS ได้รับความนิยมมากขึ้นแม้ว่า AngularJS จะมีส่วนแบ่งการตลาดมากกว่าก็ตามและ ReactJS ได้รับการกล่าวขานว่าเร็วกว่าในการรับ

ทิ้งขยะทั้งหมดนั้นไว้ฉันเริ่มเรียนหลักสูตรเกี่ยวกับ Udemy และหลังจากผ่านไปสองสามวิดีโอดูเหมือนว่าสำคัญที่จะต้องดูว่ามันทำงานร่วมกับ Django ได้ดีเพียงใด นั่นคือเมื่อฉันชนกำแพงอย่างหลีกเลี่ยงไม่ได้เพียงแค่ลุกขึ้นและทำงานเอกสารประเภทใดที่มีอยู่เพื่อที่ฉันจะได้ไม่หมุนวงล้อเป็นเวลาหลายชั่วโมงหลายคืน

ไม่มีบทช่วยสอนหรือpipแพ็คเกจที่ครอบคลุมจริงๆฉันเจอ pyreactตัวอย่างเช่นฉันพบไม่กี่คนที่ไม่ได้ทำงานหรือไม่ได้ลงวันที่

ความคิดหนึ่งที่ฉันมีคือเพียงแค่จัดการ ReactJS แยกกันโดยสิ้นเชิง แต่โดยคำนึงถึงคลาสและ ID ที่ฉันต้องการให้คอมโพเนนต์ ReactJS แสดงผลหลังจากคอมโพเนนต์ ReactJS แยกเป็นไฟล์ ES5 ไฟล์เดียวเพียงแค่นำเข้าไฟล์เดียวนั้นไปยัง Django แม่แบบ

ฉันคิดว่ามันจะพังลงอย่างรวดเร็วเมื่อฉันได้รับการเรนเดอร์จากโมเดล Django แม้ว่า Django Rest Framework จะฟังดูเหมือนมีส่วนเกี่ยวข้อง ยังไม่ไกลพอที่จะดูว่า Redux มีผลต่อสิ่งเหล่านี้อย่างไร

อย่างไรก็ตามใครมีวิธีที่ชัดเจนในการใช้ Django และ ReactJS ที่พวกเขาสนใจที่จะแบ่งปัน?

ไม่ว่าในกรณีใดเอกสารและแบบฝึกหัดมีมากมายสำหรับ AngularJS และ Django ดังนั้นจึงเป็นเรื่องที่น่าสนใจที่จะไปเส้นทางนั้นเพื่อเริ่มต้นกับเฟรมเวิร์กส่วนหน้า ... ไม่ใช่เหตุผลที่ดีที่สุด

ฉันไม่มีประสบการณ์กับ Django แต่แนวคิดจาก front-end ไป back-end และ front-end framework ไปสู่ ​​framework นั้นเหมือนกัน

1. React จะใช้Django REST API ของคุณ ส่วนหน้าและส่วนหลังไม่ได้เชื่อมต่อกัน แต่อย่างใด React จะส่งคำขอ HTTP ไปยัง REST API ของคุณเพื่อดึงข้อมูลและตั้งค่าข้อมูล
2. ตอบสนองด้วยความช่วยเหลือของWebpack (โมดูล Bundler) และบาเบล (transpiler)จะมัดและ transpile Javascript ของคุณเป็นไฟล์เดียวหรือหลายที่จะถูกวางในหน้าเว็บ HTML รายการ เรียนรู้ Webpack, Babel, Javascript และตอบสนองและ Redux (ภาชนะรัฐ) ผมเชื่อว่าคุณจะไม่ใช้ Django templating แต่แทนที่จะช่วยให้การตอบสนองที่จะทำให้ front-end
3. เมื่อมีการแสดงหน้านี้ React จะใช้ API เพื่อดึงข้อมูลเพื่อให้ React แสดงผลได้ ความเข้าใจของคุณเกี่ยวกับคำขอ HTTP, Javascript (ES6), Promises, Middleware และ Reactเป็นสิ่งสำคัญที่นี่

นี่คือบางสิ่งที่ฉันพบบนเว็บที่น่าจะช่วยได้ (อ้างอิงจากการค้นหาโดย Google อย่างรวดเร็ว):

• สอน Django และ React API Youtube
• การตั้งค่า Django ด้วย React (แทนที่ลิงก์เสียด้วยลิงก์ archive.org)
• ค้นหาแหล่งข้อมูลอื่น ๆ โดยใช้คำที่เป็นตัวหนาด้านบน ลอง "Django React Webpack" ก่อน

หวังว่านี่จะนำพาคุณไปในทิศทางที่ถูกต้อง! โชคดี! หวังว่าคนอื่น ๆ ที่เชี่ยวชาญด้าน Django จะสามารถตอบกลับของฉันได้

ฉันรู้สึกถึงความเจ็บปวดของคุณขณะที่ฉันก็เริ่มให้ Django และ React.js ทำงานร่วมกัน มีโปรเจ็กต์ Django สองสามโปรเจ็กต์และฉันคิดว่า React.js เหมาะกับ Django อย่างไรก็ตามการเริ่มต้นใช้งานอาจเป็นเรื่องยาก เรากำลังยืนอยู่บนไหล่ของยักษ์ที่นี่;)

นี่เป็นวิธีที่ฉันคิดว่ามันทำงานร่วมกันได้ทั้งหมด (ภาพรวมโปรดมีคนแก้ไขฉันถ้าฉันผิด)

• Django และฐานข้อมูล (ฉันชอบ Postgres) ด้านหนึ่ง (แบ็กเอนด์)
• Django Rest-framework ให้อินเทอร์เฟซกับโลกภายนอก (เช่น Mobile Apps และ React เป็นต้น)
• Reactjs, Nodejs, Webpack, Redux (หรืออาจจะเป็น MobX?) ที่ด้านอื่น ๆ (ส่วนหน้า)

การสื่อสารระหว่าง Django และ 'หน้า' จะทำผ่านกรอบส่วนที่เหลือ ตรวจสอบให้แน่ใจว่าคุณได้รับการอนุญาตและสิทธิ์สำหรับเฟรมเวิร์ก Rest

ฉันพบเทมเพลตหม้อไอน้ำที่ดีสำหรับสถานการณ์นี้และใช้งานได้ทันที เพียงทำตาม readme 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 และเฟรมเวิร์กส่วนที่เหลือ

ฉันหวังว่าจะช่วยได้

ตามที่คนอื่นตอบคุณหากคุณกำลังสร้างโปรเจ็กต์ใหม่คุณสามารถแยกส่วนหน้าและแบ็กเอนด์และใช้ปลั๊กอิน django rest เพื่อสร้าง API ที่เหลือสำหรับแอปพลิเคชันส่วนหน้าของคุณ นี่คือในโลกแห่งอุดมคติ

หากคุณมีโปรเจ็กต์ที่มี django templating อยู่แล้วคุณต้องโหลดการเรนเดอร์ react dom ในหน้าที่คุณต้องการโหลดแอปพลิเคชัน ในกรณีของฉันฉันมีdjango-pipelineแล้วและฉันเพิ่งเพิ่มส่วนขยาย browserify ( https://github.com/j0hnsmith/django-pipeline-browserify )

ดังตัวอย่างฉันโหลดแอปโดยใช้ django-pipeline:

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

" entry-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-pipeline คือสถิตได้รับการประมวลผลในช่วงcollectstatic.

แนวทางแรกคือการสร้างแอป Django และ React แยกกัน Django จะรับผิดชอบในการให้บริการ API ที่สร้างขึ้นโดยใช้เฟรมเวิร์ก Django REST และ React จะใช้ API เหล่านี้โดยใช้ไคลเอนต์ Axios หรือ API การดึงข้อมูลของเบราว์เซอร์ คุณจะต้องมีสองเซิร์ฟเวอร์ทั้งในการพัฒนาและการผลิตหนึ่งสำหรับ Django (REST API) และอื่น ๆ สำหรับการตอบสนอง (ที่จะให้บริการไฟล์คงที่)

แนวทางที่สองแตกต่างกันคือแอปส่วนหน้าและส่วนหลังจะอยู่คู่กัน โดยทั่วไปคุณจะใช้ Django เพื่อให้บริการทั้งส่วนหน้าของปฏิกิริยาและเพื่อแสดง REST API ดังนั้นคุณจะต้องรวม React และ Webpack เข้ากับ Django ซึ่งเป็นขั้นตอนที่คุณสามารถทำตามได้

ขั้นแรกให้สร้างโครงการ Django ของคุณจากนั้นภายในไดเร็กทอรีโครงการนี้ให้สร้างแอปพลิเคชัน React ของคุณโดยใช้ React CLI

สำหรับโครงการ Django ให้ติดตั้ง django-webpack-loaderด้วย pip:

pip install django-webpack-loader

จากนั้นเพิ่มแอปลงในแอพที่ติดตั้งและกำหนดค่าsettings.pyโดยเพิ่มวัตถุต่อไปนี้

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

จากนั้นเพิ่มเทมเพลต Django ที่จะใช้ในการติดตั้งแอปพลิเคชัน React และจะให้บริการโดย 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>

จากนั้นเพิ่ม URL urls.pyเพื่อแสดงเทมเพลตนี้

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ไม่มีอยู่จริง ถัดไปคุณต้องทำให้แอปพลิเคชัน React ของคุณสามารถสร้างไฟล์สถิติได้

ไปข้างหน้าและนำทางภายในแอป React ของคุณจากนั้นติดตั้ง webpack-bundle-tracker

npm install webpack-bundle-tracker --save

จากนั้นนำการกำหนดค่า Webpack ของคุณออกและไปที่config/webpack.config.dev.jsจากนั้นเพิ่ม

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

module.exports = {

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

สิ่งนี้จะเพิ่มปลั๊กอินBundleTrackerไปยัง Webpack และสั่งให้สร้างwebpack-stats.jsonในโฟลเดอร์หลัก

ตรวจสอบให้แน่ใจว่าได้ทำเช่นเดียวกันconfig/webpack.config.prod.jsสำหรับการผลิต

ตอนนี้หากคุณรันเซิร์ฟเวอร์ React อีกครั้งระบบwebpack-stats.jsonจะสร้างและ Django จะสามารถใช้เพื่อค้นหาข้อมูลเกี่ยวกับบันเดิล Webpack ที่สร้างโดยเซิร์ฟเวอร์ React dev

มีบางสิ่งอื่น ๆ ที่จะ คุณสามารถค้นหาข้อมูลเพิ่มเติมได้จากบทช่วยสอนนี้

หมายเหตุสำหรับทุกคนที่มาจากแบ็กเอนด์หรือบทบาทตาม Django และพยายามทำงานกับ ReactJS: ไม่มีใครจัดการการตั้งค่าสภาพแวดล้อม ReactJS ได้สำเร็จในการลองครั้งแรก :)

มีบล็อกจาก Owais Lone ซึ่งหาได้จากhttp://owaislone.org/blog/webpack-plus-reactjs-and-django/ ; อย่างไรก็ตามไวยากรณ์ในการกำหนดค่า Webpack ล้าสมัย

ฉันขอแนะนำให้คุณทำตามขั้นตอนที่กล่าวถึงในบล็อกและแทนที่ไฟล์การกำหนดค่า webpack ด้วยเนื้อหาด้านล่าง อย่างไรก็ตามหากคุณยังใหม่กับ 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']
    }
};

คำตอบที่เป็นที่ยอมรับทำให้ฉันเชื่อว่าการแยกแบ็กเอนด์ Django และ React Frontend เป็นวิธีที่ถูกต้องไม่ว่าจะเกิดอะไรขึ้น ในความเป็นจริงมีวิธีการที่ React และ Django ควบคู่กันซึ่งอาจเหมาะกว่าในบางสถานการณ์

บทช่วยสอนนี้อธิบายเรื่องนี้ได้ดี โดยเฉพาะอย่างยิ่ง:

ฉันเห็นรูปแบบต่อไปนี้ (ซึ่งเป็นเรื่องปกติของเว็บเฟรมเวิร์กเกือบทุกแห่ง):

- ตอบสนองในแอป Django "frontend" ของตัวเอง: โหลดเทมเพลต HTML เดียวและปล่อยให้ React จัดการส่วนหน้า (ความยาก: ปานกลาง)

-Django REST เป็น API แบบสแตนด์อโลน + ตอบสนองเป็นสปาแบบสแตนด์อโลน (ความยาก: ยากเกี่ยวข้องกับ JWT สำหรับการตรวจสอบสิทธิ์)

- ผสมและจับคู่: แอปตอบสนองขนาดเล็กภายในเทมเพลต Django (ความยาก: ง่าย)

ฉันรู้ว่านี่ช้าไปสองสามปีแล้ว แต่ฉันจะพาคนต่อไปในการเดินทางครั้งนี้

GraphQL มีประโยชน์และง่ายกว่าเมื่อเทียบกับ DjangoRESTFramework นอกจากนี้ยังมีความยืดหยุ่นมากขึ้นในแง่ของการตอบสนองที่คุณได้รับ คุณจะได้รับสิ่งที่ต้องการและไม่ต้องกรองการตอบสนองเพื่อให้ได้สิ่งที่คุณต้องการ

คุณสามารถใช้ Graphene Django ที่ฝั่งเซิร์ฟเวอร์และ React + Apollo / Relay ... คุณสามารถตรวจสอบได้เพราะนั่นไม่ใช่คำถามของคุณ

คุณสามารถลองบทช่วยสอนต่อไปนี้ซึ่งอาจช่วยให้คุณก้าวไปข้างหน้า:

ให้บริการ React และ Django ด้วยกัน