Làm thế nào để Django và ReactJS hoạt động cùng nhau?

Mới đối với Django và thậm chí mới hơn đối với ReactJS. Tôi đã xem xét AngularJS và ReactJS, nhưng đã quyết định về ReactJS. Có vẻ như nó đã vượt qua AngularJS về mức độ phổ biến mặc dù AngularJS có nhiều thị phần hơn, và ReactJS được cho là nhanh hơn để đón.

Bỏ tất cả những thứ linh tinh đó sang một bên, tôi bắt đầu tham gia một khóa học trên Udemy và sau một vài video, điều quan trọng là phải xem nó tích hợp tốt như thế nào với Django. Đó là khi tôi chắc chắn va vào một bức tường chỉ cần đứng dậy và chạy, loại tài liệu nào ở ngoài đó để tôi không quay bánh xe trong vài giờ và đêm.

Tôi thực sự không có bất kỳ hướng dẫn toàn diện, hoặc pipgói, tôi đã đi qua. Một số ít tôi đi qua đã không làm việc hoặc đã hẹn hò, pyreactví dụ.

Tôi nghĩ rằng tôi chỉ xử lý ReactJS hoàn toàn riêng biệt, nhưng xem xét các lớp và ID tôi muốn các thành phần ReactJS kết xuất. Sau khi các thành phần ReactJS riêng biệt được biên dịch thành một tệp ES5, chỉ cần nhập tệp duy nhất đó vào Django bản mẫu.

Tôi nghĩ rằng điều đó sẽ nhanh chóng bị hỏng khi tôi kết xuất từ ​​các mô hình Django mặc dù Django Rest Framework có vẻ như có liên quan. Thậm chí không đủ xa để xem Redux ảnh hưởng đến tất cả những điều này như thế nào.

Dù sao, bất cứ ai cũng có một cách rõ ràng họ đang sử dụng Django và ReactJS mà họ quan tâm để chia sẻ?

Ở mức độ nào, tài liệu và hướng dẫn rất phong phú cho AngularJS và Django, vì vậy thật hấp dẫn khi chỉ đi theo con đường đó để bắt đầu với bất kỳ khuôn khổ front-end nào ... Không phải là lý do tốt nhất.

Tôi không có kinh nghiệm với Django nhưng các khái niệm từ khung đầu đến đầu cuối và khung đầu cuối đến khung đều giống nhau.

1. React sẽ tiêu thụ API Django REST của bạn . Front-end và back-end không được kết nối theo bất kỳ cách nào. React sẽ thực hiện các yêu cầu HTTP đến API REST của bạn để tìm nạp và thiết lập dữ liệu.
2. React, với sự trợ giúp của Webpack (bộ đóng gói mô-đun) & Babel (bộ chuyển mã) , sẽ gói và chuyển mã Javascript của bạn thành một hoặc nhiều tệp sẽ được đặt trong trang HTML nhập. Tìm hiểu Webpack, Babel, Javascript và React và Redux (một thùng chứa trạng thái) . Tôi tin rằng bạn sẽ không sử dụng Django templating mà thay vào đó cho phép React kết xuất giao diện người dùng.
3. Khi trang này được hiển thị, React sẽ sử dụng API để tìm nạp dữ liệu để React có thể kết xuất nó. Sự hiểu biết của bạn về các yêu cầu HTTP, Javascript (ES6), Promise, Middleware và React là rất cần thiết ở đây.

Dưới đây là một số điều tôi đã tìm thấy trên web sẽ trợ giúp (dựa trên tìm kiếm nhanh trên Google):

• Hướng dẫn Youtube của Django và React API
• Thiết lập Django bằng React (thay thế liên kết bị hỏng bằng liên kết archive.org)
• Tìm kiếm các tài nguyên khác bằng cách sử dụng các thuật ngữ in đậm ở trên. Trước tiên hãy thử "Django React Webpack".

Hy vọng điều này chỉ đạo bạn đi đúng hướng! Chúc may mắn! Hy vọng rằng những người khác chuyên về Django có thể thêm vào phản ứng của tôi.

Tôi cũng cảm thấy nỗi đau của bạn khi tôi cũng bắt đầu để Django và React.js hoạt động cùng nhau. Đã làm một vài dự án Django và tôi nghĩ, React.js là một kết hợp tuyệt vời cho Django. Tuy nhiên, nó có thể đáng sợ để bắt đầu. Chúng tôi đang đứng trên vai những người khổng lồ ở đây;)

Đây là cách tôi nghĩ, tất cả đều hoạt động cùng nhau (bức tranh lớn, xin vui lòng ai đó sửa tôi nếu tôi sai).

• Django và cơ sở dữ liệu của nó (tôi thích Postgres) ở một bên (phụ trợ)
• Django Rest-framework cung cấp giao diện cho thế giới bên ngoài (ví dụ: Ứng dụng và Phản ứng trên thiết bị di động)
• Reactjs, Nodejs, Webpack, Redux (hoặc có thể là MobX?) Ở phía bên kia (frontend)

Giao tiếp giữa Django và 'frontend' được thực hiện thông qua khung Rest. Đảm bảo bạn nhận được ủy quyền và quyền của mình cho khung Rest tại chỗ.

Tôi tìm thấy một mẫu nồi hơi tốt cho chính xác kịch bản này và nó hoạt động tốt. Chỉ cần làm theo readme https://github.com/scottwoodall/django-react-template và một khi bạn đã hoàn thành, bạn có một dự án Django Reactjs khá đẹp đang chạy. Không có nghĩa là điều này có nghĩa là để sản xuất, mà là một cách để bạn tìm hiểu và xem mọi thứ được kết nối và hoạt động như thế nào!

Một thay đổi nhỏ mà tôi muốn đề xuất là: Làm theo hướng dẫn thiết lập NHƯNG trước khi bạn đến bước thứ 2 để thiết lập phụ trợ (Django tại đây https://github.com/scottwoodall/django-react-template/blob/master /backend/README.md ), thay đổi tệp yêu cầu để thiết lập.

Bạn sẽ tìm thấy tệp trong dự án của bạn tại /backend/requirements/common.pip Thay thế nội dung của nó bằng cái này

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

đây là phiên bản ổn định mới nhất cho Django và khung Rest của nó.

Tôi hy vọng điều đó sẽ giúp.

Như những người khác đã trả lời bạn, nếu bạn đang tạo một dự án mới, bạn có thể tách riêng frontend và backend và sử dụng bất kỳ plugin django rest nào để tạo api nghỉ cho ứng dụng frontend của bạn. Đây là trong thế giới lý tưởng.

Nếu bạn đã có một dự án với khuôn mẫu django, thì bạn phải tải kết xuất dom phản ứng của bạn trong trang bạn muốn tải ứng dụng. Trong trường hợp của tôi, tôi đã có django-pipe và tôi chỉ cần thêm phần mở rộng browserify. ( https://github.com/j0hnsmith/django-pipeline-browserify )

Như trong ví dụ, tôi đã tải ứng dụng bằng django-pipe:

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

" Entry-point.browserify.js " của bạn có thể là tệp ES6 tải ứng dụng phản ứng của bạn trong mẫu:

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

Trong mẫu django của bạn, bây giờ bạn có thể tải ứng dụng của mình một cách dễ dàng:

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

Ưu điểm của việc sử dụng django-pipe là các số liệu thống kê được xử lý trong quá trình collectstatic.

Cách tiếp cận đầu tiên là xây dựng các ứng dụng Django và React riêng biệt. Django sẽ chịu trách nhiệm phục vụ API được xây dựng bằng khung Django REST và React sẽ tiêu thụ các API này bằng ứng dụng khách Axios hoặc API tìm nạp của trình duyệt. Bạn sẽ cần phải có hai máy chủ, cả trong quá trình phát triển và sản xuất, một cho Django (REST API) và một cho React (để phục vụ các tệp tĩnh) .

Cách tiếp cận thứ hai là khác nhau, các ứng dụng frontend và backend sẽ được ghép nối . Về cơ bản, bạn sẽ sử dụng Django để phục vụ giao diện React và để lộ API REST. Vì vậy, bạn sẽ cần tích hợp React và Webpack với Django, đây là những bước bạn có thể làm theo để làm điều đó

Đầu tiên tạo dự án Django của bạn sau đó bên trong thư mục dự án này tạo ứng dụng React của bạn bằng React CLI

Đối với dự án Django, cài đặt trình tải django-webpack với pip:

pip install django-webpack-loader

Tiếp theo thêm ứng dụng vào các ứng dụng đã cài đặt và cấu hình nó settings.pybằng cách thêm đối tượng sau

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

Sau đó, thêm một mẫu Django sẽ được sử dụng để gắn kết ứng dụng React và sẽ được Django phục vụ

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

Sau đó thêm URL vào urls.pyđể phục vụ mẫu này

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

]

Nếu bạn khởi động cả máy chủ Django và React vào thời điểm này, bạn sẽ gặp lỗi Django nói rằng webpack-stats.jsonnó không tồn tại. Vì vậy, tiếp theo bạn cần làm cho ứng dụng React của bạn có thể tạo tệp thống kê.

Đi trước và điều hướng trong ứng dụng React của bạn sau đó cài đặt webpack-bundle-tracker

npm install webpack-bundle-tracker --save

Sau đó đẩy cấu hình Webpack của bạn và đi đến config/webpack.config.dev.jssau đó thêm

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

module.exports = {

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

Điều này thêm plugin BundleTracker vào Webpack và hướng dẫn nó tạo webpack-stats.jsontrong thư mục mẹ.

Hãy chắc chắn cũng làm như vậy trong config/webpack.config.prod.jssản xuất.

Bây giờ nếu bạn chạy lại máy chủ React của mình, webpack-stats.jsonnó sẽ được tạo và Django sẽ có thể sử dụng nó để tìm thông tin về các gói Webpack được tạo bởi máy chủ React dev.

Có một số thứ khác để. Bạn có thể tìm thêm thông tin từ hướng dẫn này .

Một lưu ý cho bất kỳ ai đến từ vai trò phụ trợ hoặc dựa trên Django và cố gắng làm việc với ReactJS: Không ai quản lý để thiết lập môi trường ReactJS thành công trong lần thử đầu tiên :)

Có một blog từ Owais Lone có sẵn từ http://owaislone.org/blog/webpack-plus-reactjs-and-django/ ; tuy nhiên cú pháp trên cấu hình Webpack đã hết hạn.

Tôi khuyên bạn nên làm theo các bước được đề cập trong blog và thay thế tệp cấu hình webpack bằng nội dung bên dưới. Tuy nhiên, nếu bạn chưa quen với cả Django và React, hãy nhai từng cái một vì đường cong học tập có thể bạn sẽ cảm thấy thất vọng.

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

Câu trả lời được chấp nhận khiến tôi tin rằng việc tách rời phần phụ trợ Django và React Frontend là cách đúng đắn để đi bất kể điều gì. Trong thực tế, có những cách tiếp cận trong đó React và Django được ghép nối, có thể phù hợp hơn trong các tình huống cụ thể.

Hướng dẫn này cũng giải thích điều này. Đặc biệt:

Tôi thấy các mẫu sau (phổ biến cho hầu hết mọi khung web):

-React trong ứng dụng của riêng bạn trước đó là ứng dụng Dj Django: tải một mẫu HTML duy nhất và để React quản lý lối vào (độ khó: trung bình)

-Django REST dưới dạng API độc lập + Phản ứng như một SPA độc lập (độ khó: khó, liên quan đến JWT để xác thực)

-Mix và kết hợp: các ứng dụng React nhỏ trong các mẫu Django (độ khó: đơn giản)

Bạn có thể thử hướng dẫn sau, nó có thể giúp bạn tiến về phía trước:

Phục vụ React và Django cùng nhau

Tôi biết đây là một vài năm muộn màng, nhưng tôi sẽ đưa nó ra cho người tiếp theo trên hành trình này.

GraphQL rất hữu ích và dễ dàng hơn so với DjangoRESTFramework. Nó cũng linh hoạt hơn về các câu trả lời bạn nhận được. Bạn nhận được những gì bạn yêu cầu và không phải lọc qua phản hồi để có được những gì bạn muốn.

Bạn có thể sử dụng Graphene Django ở phía máy chủ và React + Apollo / Relay ... Bạn có thể xem xét nó vì đó không phải là câu hỏi của bạn.