[django] Django와 ReactJS를 함께 사용하는 방법?

Program / 글쓴이

Django를 처음 사용하고 ReactJS를 처음 사용하십시오. AngularJS와 ReactJS를 살펴 보았지만 ReactJS를 결정했습니다. AngularJS가 시장 점유율을 더 많이 가지고 있음에도 불구하고 AngularJS가 인기를 끌고있는 것처럼 보였으며 ReactJS는 더 빨리 픽업됩니다.

그 쓰레기를 제쳐두고, 나는 Udemy에 대한 코스를 시작했고 몇 개의 비디오 후에 그것이 Django와 얼마나 잘 통합되는지 보는 것이 중요해 보였습니다. 그것은 필연적으로 벽에 부딪쳐서 달려가는 것입니다. 몇 시간과 밤 동안 바퀴를 돌리지 않도록 어떤 종류의 문서가 있습니까?

pip나는 포괄적 인 튜토리얼이나 패키지 가 실제로 없다 . pyreact예를 들어 내가 겪은 몇 가지가 작동하지 않거나 데이트를 했습니다.

한 가지 생각은 ReactJS를 완전히 별개로 취급하는 것이지만 ReactJS 구성 요소를 렌더링하려는 클래스와 ID를 고려하여 별도의 ReactJS 구성 요소를 단일 ES5 파일로 컴파일 한 후 해당 단일 파일을 Django로 가져 오기만하면됩니다. 주형.

Django Rest Framework가 관련이있는 것처럼 들리지만 Django 모델에서 렌더링 할 때 빠르게 고장날 것이라고 생각합니다. Redux 가이 모든 것에 어떻게 영향을 미치는지 알기에는 충분하지 않습니다.

어쨌든 누구나 장고와 ReactJS를 사용하여 공유하는 명확한 방법이 있습니까?

어쨌든 AngularJS와 Django에는 문서와 튜토리얼이 풍부하므로 프론트 엔드 프레임 워크를 시작하기 위해 그 길을 가고 싶어합니다 … 최고의 이유는 아닙니다.

답변

Django에 대한 경험이 없지만 프론트 엔드에서 백 엔드 및 프론트 엔드 프레임 워크에서 프레임 워크까지의 개념은 동일합니다.

  1. React는 Django REST API를 소비합니다 . 프런트 엔드와 백엔드는 연결되어 있지 않습니다. React는 데이터를 가져오고 설정하기 위해 REST API에 HTTP 요청을합니다.
  2. Webpack (module bundler) & Babel (transpiler) 의 도움으로 Javascript를 단일 또는 여러 파일로 묶어 입력 HTML 페이지에 배치합니다. Webpack, Babel, Javascript 및 React and Redux (상태 컨테이너)를 배우십시오 . 나는 생각 프런트 엔드 렌더링에 반응을 허용하는 대신 장고 템플릿을 사용하지만하지 않습니다.
  3. 이 페이지가 렌더링 될 때 React는 API를 사용하여 데이터를 가져 오므로 React가이를 렌더링 할 수 있습니다. 여기서 HTTP 요청, Javascript (ES6), 약속, 미들웨어 및 반응에 대한 이해 가 필수적입니다.

여기에 웹에서 발견 한 몇 가지 있습니다 한다 (빠른 구글 검색 기준) 도움말 :

이것이 올바른 방향으로 인도되기를 바랍니다! 행운을 빕니다! Django를 전문으로하는 다른 사람들이 내 답변에 추가 할 수 있기를 바랍니다.

답변

Django와 React.js가 함께 작동하기 시작하면서 나는 당신의 고통을 느낍니다. Django 프로젝트를 두 번 수행했는데 React.js는 Django와 잘 어울립니다. 그러나 시작하는 것은 위협적 일 수 있습니다. 우리는 여기 거인의 어깨에 서 있습니다.)

여기에 내가 생각하는 방식이 있습니다. 모두 함께 작동합니다 (큰 그림, 내가 틀렸다면 누군가 나를 수정하십시오).

  • Django와 그 데이터베이스 (Postgres를 선호합니다) 한쪽 (백엔드)
  • Django Rest-framework는 외부 세계에 인터페이스를 제공합니다 (예 : 모바일 앱 및 반응 등).
  • 반대쪽에있는 Reactjs, Nodejs, Webpack, Redux (또는 아마도 MobX?) (프런트 엔드)

Django와 ‘프런트 엔드’간의 통신은 Rest 프레임 워크를 통해 이루어집니다. Rest 프레임 워크에 대한 권한 및 권한이 있는지 확인하십시오.

정확히이 시나리오에 적합한 보일러 템플릿을 찾았으며 즉시 사용할 수 있습니다. readme https://github.com/scottwoodall/django-react-template을 따르고 완료되면 Django Reactjs 프로젝트가 실행됩니다. 결코 이것은 생산을위한 것이 아니라, 사물이 어떻게 연결되고 작동 하는지를 파고 볼 수있는 방법입니다!

내가 제안하고 싶은 작은 변경 사항은 다음과 같습니다 .2 단계로 이동하기 전에 설정 지침을 따르십시오 (Django here 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 및 Rest 프레임 워크의 최신 안정 버전이 제공됩니다.

도움이 되길 바랍니다.

답변

다른 사람들이 대답했듯이 새 프로젝트를 만드는 경우 프런트 엔드와 백엔드를 분리하고 django rest 플러그인을 사용하여 프론트 엔드 응용 프로그램의 나머지 API를 만들 수 있습니다. 이것은 이상적인 세상에 있습니다.

django 템플릿이 이미있는 프로젝트가있는 경우 응용 프로그램을로드하려는 페이지에 반응 돔 렌더링을로드해야합니다. 필자의 경우 이미 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는 Django REST 프레임 워크를 사용하여 빌드 된 API를 제공하고 React는 Axios 클라이언트 또는 브라우저의 페치 API를 사용하여 이러한 API를 사용합니다. 개발 및 프로덕션에 Django (REST API) 용 서버와 React (정적 파일 서비스 용) 서버 두 대가 필요합니다 .

두 번째 접근 방식은 프론트 엔드 및 백엔드 앱 이 서로 다른 방식입니다. . 기본적으로 Django를 사용하여 React 프론트 엔드를 제공하고 REST API를 노출합니다. 따라서 React와 Webpack을 Django와 통합해야합니다.이를 수행하기 위해 수행 할 수있는 단계는 다음과 같습니다.

먼저 Django 프로젝트를 생성 한 다음이 프로젝트 디렉토리 안에 React CLI를 사용하여 React 응용 프로그램을 생성하십시오

Django 프로젝트의 경우 pip로 django-webpack-loader 를 설치하십시오 .

pip install django-webpack-loader

그런 다음 설치된 앱에 앱 settings.py을 추가하고 다음 객체를 추가하여 구성하십시오.

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

그런 다음 React 응용 프로그램을 마운트하는 데 사용되며 Django에서 제공하는 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>

그런 다음 urls.py이 템플릿을 제공하기 위해 URL을 추가하십시오.

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 서버를 모두 시작하면 webpack-stats.json존재하지 않는다는 Django 오류가 발생 합니다. 따라서 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'}),
    ]
}

이것은 Webpack 에 BundleTracker 플러그인을 추가 하고 생성하도록 지시합니다.webpack-stats.json 되고 상위 폴더 .

config/webpack.config.prod.js프로덕션 에서도 동일한 작업을 수행해야합니다 .

이제 React 서버를 다시 실행하면 React 서버 webpack-stats.json가 생성되고 Django는 React dev 서버가 생성 한 Webpack 번들에 대한 정보를 찾기 위해 서버를 사용할 수 있습니다.

다른 것들이 있습니다. 이 자습서 에서 자세한 정보를 찾을 수 있습니다 .

답변

백엔드 또는 Django 기반 역할에서오고 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']
    }
};

답변

받아 들여진 대답은 Django 백엔드와 React Frontend를 분리하는 것이 무엇이든간에 올바른 방법이라고 믿게합니다. 실제로 React와 Django가 결합 된 접근 방식이 있으며 이는 특정 상황에 더 적합 할 수 있습니다.

이 튜토리얼은 이것을 잘 설명합니다. 특히:

다음 패턴이 보입니다 (거의 모든 웹 프레임 워크에 공통 임).

자체 “프론트 엔드”Django 앱에서 반응 : 단일 HTML 템플릿을로드하고 React가 프론트 엔드를 관리하게 함 (어려움 : 중간)

-독립형 API 인 Django REST + 독립형 SPA로서 반응 (난이도 : 인증을 위해 JWT가 포함됨)

-Mix and match : Django 템플릿 내의 미니 React 앱 (난이도 : 단순)

답변

다음 튜토리얼을 시도해 볼 수 있습니다.

React와 Django를 함께 제공