Як змусити Django та ReactJS працювати разом?

Новий для Django і ще новіший для ReactJS. Я розглядав AngularJS та ReactJS, але зважився на ReactJS. Здавалося, що це заважає AngularJS настільки популярно, незважаючи на те, що AngularJS має більшу частку ринку, і, як кажуть, ReactJS швидше підбирається.

Увесь цей мотлох вбік я почав проходити курс на Удемі, і після кількох відео здавалося важливим побачити, наскільки добре він інтегрується з Джанго. Тобто, коли я неминуче вдаряюсь об стіну, просто встаючи і бігаючи, яка там документація, щоб я не крутив колеса кілька годин і ночей.

Насправді немає жодних вичерпних навчальних посібників чи pipпакетів, я натрапив на це. Мало я натрапила не зробила роботу або була датована, pyreactнаприклад.

Мені здавалося, що я маю на меті просто розглядати ReactJS повністю окремо, але, враховуючи класи та ідентифікатори, я хочу, щоб компоненти ReactJS відображалися. Після того, як окремі компоненти ReactJS будуть зібрані в один файл ES5, просто імпортуйте цей єдиний файл у Django шаблон.

Я думаю, що це швидко вийде з ладу, коли я перейду до візуалізації моделей Django, хоча Django Rest Framework звучить так, як це стосується. Навіть недостатньо далеко, щоб побачити, як Redux впливає на все це.

У будь-якому разі, хтось має чіткий спосіб, яким вони користуються Django та ReactJS, якими вони хочуть поділитися?

У будь-якому випадку, документації та навчальних посібників достатньо для AngularJS та Django, тому спокусити просто піти цим маршрутом, щоб розпочати роботу з будь-якими фронтальними рамками ... Не найкраща причина.

Я не маю досвіду роботи з Джанго, але концепції від переднього до бек-енд-фронта та фронтальної рамки до рамки однакові.

1. React споживає ваш Django REST API . Лицьові і задні торці жодним чином не з'єднані. React подасть HTTP-запити до вашого REST API, щоб отримати та встановити дані.
2. Реагуйте, за допомогою Webpack (пакет модулів) та Babel (транспілер), з’єднайте та перекладіть ваш Javascript у один або декілька файлів, які будуть розміщені на вхідній HTML-сторінці. Дізнайтеся Webpack, Babel, Javascript та React та Redux (контейнер стану) . Я вважаю, що ви не будете використовувати шаблони Django, але натомість дозволите React рендерінгу.
3. Коли ця сторінка надається, React споживає API для отримання даних, щоб React міг її надати. Тут важливо ваше розуміння HTTP-запитів, Javascript (ES6), обіцянок, проміжного програмного забезпечення та React .

Ось кілька речей , які я знайшов в Інтернеті , що має допомогти (на основі швидкого пошуку Google):

• Підручник Youtube Django та React API
• Налаштування Django за допомогою React (замінено розірвану посилання на посилання archive.org)
• Шукайте інші ресурси за допомогою жирних термінів, зазначених вище. Спробуйте спочатку "Django React Webpack".

Сподіваюся, це спрямовує вас у правильному напрямку! Удачі! Сподіваюсь, мої відповіді можуть додати інші, які спеціалізуються на Django.

Я відчуваю твій біль, коли я теж починаю спільно працювати Django та React.js. Зробив пару проектів Django, і я думаю, React.js - це чудовий матч для Django. Однак розпочати роботу можна залякуючи. Ми тут стоїмо на плечах гігантів;)

Ось як я думаю, це все працює разом (велика картина, будь ласка, хтось виправить мене, якщо я помиляюся).

• Django та його база даних (я віддаю перевагу Postgres) з одного боку (бекенд)
• Django Rest-Framework, що забезпечує інтерфейс для зовнішнього світу (тобто мобільних додатків та React тощо)
• Reactjs, Nodejs, Webpack, Redux (або, можливо, MobX?) З іншого боку (frontend)

Комунікація між Джанго та "кордоном" здійснюється через систему відпочинку. Переконайтеся, що ви отримали авторизацію та дозволи для рамки відпочинку.

Я знайшов хороший шаблон котла саме для цього сценарію, і він працює поза коробкою. Просто слідкуйте за https://github.com/scottwoodall/django-react-template, і як тільки ви закінчите, у вас запустився гарний хороший проект Django Reactjs. Це аж ніяк не для виробництва, а скоріше, як для вас, щоб копатись та бачити, як все пов’язано та працює!

Я хочу запропонувати одну крихітну зміну: Дотримуйтесь інструкцій із налаштування, АМО, перш ніж дійти до другого кроку, щоб налаштувати запуск (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 для створення api-відпочинку для вашої програми фронтенд. Це в ідеальному світі.

Якщо у вас вже є проект із шаблоном джанго, тоді ви повинні завантажити свій реактивний рендер на сторінку, на яку потрібно завантажити додаток. У моєму випадку я вже працював над джанго -конвеєром, і я просто додав розширення для перегляду. ( https://github.com/j0hnsmith/django-pipeline-browserify )

Як у прикладі, я завантажив додаток, використовуючи django-трубопровід:

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

Тепер у вашому шаблоні джанго ви можете легко завантажити додаток:

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

Перший підхід - це створення окремих програм Django та React. Django несе відповідальність за обслуговування API, побудованого за допомогою рамки Django REST, і React буде споживати ці API за допомогою клієнта Axios або API для отримання браузера. Вам потрібно мати два сервери, як в розробці, так і в виробництві, один для Django (REST API), а другий для React (для обслуговування статичних файлів) .

Другий підхід відрізняється тим, що додатки для інтерфейсу та додатка будуть поєднані . В основному ви будете використовувати Django як для обслуговування фронту React, так і для викриття API REST. Тому вам потрібно буде інтегрувати 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.

Є ще деякі речі. Ви можете знайти більше інформації з цього підручника .

Примітка для всіх, хто надходить із бекенда або на базі Джанго та намагається співпрацювати з ReactJS: Ніхто не вдається успішно налаштувати навколишнє середовище ReactJS :)

Є блог від Owais Lone, який доступний на веб-сайті http://owaislone.org/blog/webpack-plus-reactjs-and-django/ ; однак синтаксис у конфігурації 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']
    }
};

Прийнята відповідь наштовхує мене на думку, що роз'єднання "Джанго" та "Реакт Frontend" - це правильний шлях, незважаючи ні на що. Насправді є підходи, в яких React і Django поєднуються, що може бути краще підходить для конкретних ситуацій.

Цей підручник добре пояснює це. Зокрема:

Я бачу такі зразки (які є загальними для майже всіх веб-рамок):

-Реагуйте у власному додатку Django "frontend": завантажте єдиний HTML-шаблон і дозвольте React керувати фронтендом (складність: середній)

-Django REST як окремий API + Реагувати як окремий SPA (складність: важкий, він включає JWT для аутентифікації)

-Мікс та відповідність: міні-додатки реагують у шаблонах Django (складність: просте)

Ви можете спробувати наступний підручник, це може допомогти вам рухатися вперед:

Обслуговуємо Реакт та Джанго разом

Я знаю, що це запізнилося на пару років, але я викладаю його для наступної людини в цій подорожі.

GraphQL був корисним і простіше порівняно з DjangoRESTFramework. Це також більш гнучко в плані відповідей, які ви отримуєте. Ви отримуєте те, що просите, і не потрібно фільтрувати відповідь, щоб отримати те, що ви хочете.

Ви можете використовувати Graphene Django на стороні сервера та React + Apollo / Relay ... Ви можете розглянути, як це не ваше питання.