Como fazer com que o Django e o ReactJS trabalhem juntos?

Novo no Django e ainda mais novo no ReactJS. Estive pesquisando no AngularJS e ReactJS, mas decidi pelo ReactJS. Parecia que estava superando o AngularJS em termos de popularidade, apesar de o AngularJS ter mais participação de mercado, e o ReactJS é mais rápido na coleta.

Com todo esse lixo, comecei a fazer um curso sobre a Udemy e, depois de alguns vídeos, parecia importante ver como ele se integra ao Django. É quando eu, inevitavelmente, bato em uma parede, colocando-a em funcionamento, que tipo de documentação existe para que eu não fique girando minhas rodas por várias horas e noites.

Realmente não há tutoriais ou pippacotes abrangentes , me deparei. Os poucos que me deparei não funcionavam ou eram antigos, pyreactpor exemplo.

Um pensamento que eu tinha era apenas tratar o ReactJS completamente separado, mas levando em consideração as classes e os IDs que eu quero que os componentes ReactJS renderizem. Após os componentes ReactJS separados serem compilados em um único arquivo ES5, basta importar esse arquivo para o Django modelo.

Eu acho que isso será rapidamente interrompido quando eu for renderizado a partir de modelos do Django, embora o Django Rest Framework pareça estar envolvido. Nem o suficiente para ver como o Redux afeta tudo isso.

Enfim, alguém tem uma maneira clara de usar o Django e o ReactJS que gostaria de compartilhar?

De qualquer forma, a documentação e os tutoriais são abundantes para o AngularJS e o Django, por isso é tentador seguir esse caminho para começar com qualquer estrutura de front-end ... Não é o melhor motivo.

Não tenho experiência com o Django, mas os conceitos de front-end para back-end e framework de front-end para framework são os mesmos.

1. O React consumirá sua API REST do Django . Os front-ends e back-ends não estão conectados de forma alguma. O React fará solicitações HTTP para sua API REST para buscar e definir dados.
2. O React, com a ajuda do Webpack (empacotador de módulo) e Babel (transpiler) , agrupará e transpilará o seu Javascript em arquivos únicos ou múltiplos que serão colocados na página HTML da entrada. Aprenda Webpack, Babel, Javascript e React and Redux (um contêiner de estado) . Eu acredito que você não usará o modelo do Django, mas permitirá que o React processe o front-end.
3. Como essa página é renderizada, o React consumirá a API para buscar dados, para que o React possa renderizá-lo. Sua compreensão das solicitações HTTP, Javascript (ES6), Promessas, Middleware e React é essencial aqui.

Aqui estão algumas coisas que encontrei na Web que devem ajudar (com base em uma rápida pesquisa no Google):

• Tutorial do Django e do React API no Youtube
• Configurando o Django com React (substituído link quebrado pelo link archive.org)
• Pesquise outros recursos usando os termos em negrito acima. Tente "Django React Webpack" primeiro.

Espero que isso o leve na direção certa! Boa sorte! Espero que outras pessoas especializadas em Django possam adicionar à minha resposta.

Sinto sua dor quando eu também estou começando a fazer o Django e o React.js trabalharem juntos. Fiz alguns projetos no Django, e eu acho que o React.js é uma ótima combinação para o Django. No entanto, pode ser intimidador começar. Estamos nos ombros de gigantes aqui;)

Eis como eu acho que tudo funciona em conjunto (imagem geral, por favor, alguém me corrija se eu estiver errado).

• Django e seu banco de dados (eu prefiro o Postgres) de um lado (back-end)
• Django Rest-framework fornecendo a interface para o mundo exterior (por exemplo, Aplicativos Móveis e React e outros)
• Reactjs, Nodejs, Webpack, Redux (ou talvez MobX?) Do outro lado (front-end)

A comunicação entre o Django e o 'frontend' é feita através da estrutura Rest. Certifique-se de obter sua autorização e permissões para a estrutura Rest.

Encontrei um bom modelo de caldeira para exatamente esse cenário e ele funciona imediatamente. Basta seguir o leia-me https://github.com/scottwoodall/django-react-template e quando terminar, você terá um bom projeto do Django Reactjs em execução. De maneira alguma isso é destinado à produção, mas como uma maneira de você descobrir e ver como as coisas estão conectadas e funcionando!

Uma pequena alteração que eu gostaria de sugerir é a seguinte: Siga as instruções de configuração, MAS antes de chegar ao segundo passo para configurar o back-end (Django aqui https://github.com/scottwoodall/django-react-template/blob/master /backend/README.md ), altere o arquivo de requisitos para a instalação.

Você encontrará o arquivo no seu projeto em /backend/requirements/common.pip Substitua o conteúdo por este

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

isso fornece a versão estável mais recente para o Django e sua estrutura Rest.

Espero que ajude.

Como outras pessoas responderam, se você estiver criando um novo projeto, é possível separar o front-end e o back-end e usar qualquer plug-in django rest para criar a API do resto para o seu aplicativo de front-end. Isso está no mundo ideal.

Se você tiver um projeto com o modelo de django já em vigor, deverá carregar sua renderização de reação na página em que deseja carregar o aplicativo. No meu caso, eu já tinha django-pipeline e acabei de adicionar a extensão browserify. ( https://github.com/j0hnsmith/django-pipeline-browserify )

Como no exemplo, carreguei o aplicativo usando o django-pipeline:

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

Seu " entry-point.browserify.js " pode ser um arquivo ES6 que carrega seu aplicativo de reação no modelo:

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

No seu modelo de django, agora você pode carregar seu aplicativo facilmente:

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

A vantagem de usar o django-pipeline é que a estática é processada durante o collectstatic.

A primeira abordagem é criar aplicativos Django e React separados. O Django será responsável por atender à API criada usando a estrutura REST do Django e o React consumirá essas APIs usando o cliente Axios ou a API de busca do navegador. Você precisará ter dois servidores, tanto em desenvolvimento quanto em produção, um para o Django (API REST) ​​e outro para o React (para servir arquivos estáticos) .

A segunda abordagem é diferente: os aplicativos front-end e back-end serão acoplados . Basicamente, você usará o Django para servir o front-end do React e expor a API REST. Portanto, você precisará integrar o React e o Webpack ao Django, estas são as etapas que você pode seguir para fazer isso

Primeiro gere seu projeto Django, em seguida, dentro deste diretório, gere seu aplicativo React usando a CLI do React

Para o projeto Django, instale o django-webpack-loader com o pip:

pip install django-webpack-loader

Em seguida, adicione o aplicativo aos aplicativos instalados e configure- settings.pyo adicionando o seguinte objeto

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

Em seguida, adicione um modelo do Django que será usado para montar o aplicativo React e será servido pelo 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>

Em seguida, adicione um URL urls.pypara veicular esse modelo

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

]

Se você iniciar os servidores Django e React neste momento, receberá um erro do Django dizendo webpack-stats.jsonque não existe. Então, em seguida, você precisa tornar seu aplicativo React capaz de gerar o arquivo de estatísticas.

Vá em frente e navegue dentro do aplicativo React e instale webpack-bundle-tracker

npm install webpack-bundle-tracker --save

Ejete sua configuração do Webpack e vá para config/webpack.config.dev.jsadicionar

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

module.exports = {

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

Isso adiciona o plug-in BundleTracker ao Webpack e instrui-o a gerarwebpack-stats.json na pasta pai.

Certifique-se também de fazer o mesmo na config/webpack.config.prod.jsprodução.

Agora, se você executar novamente o servidor React, webpack-stats.jsonele será gerado e o Django poderá consumi-lo para encontrar informações sobre os pacotes Webpack gerados pelo servidor de desenvolvimento React.

Existem algumas outras coisas para. Você pode encontrar mais informações neste tutorial .

Uma observação para quem vem de uma função de back-end ou baseada no Django e tenta trabalhar com o ReactJS: ninguém consegue configurar o ambiente do ReactJS com êxito na primeira tentativa :)

Existe um blog da Owais Lone que está disponível em http://owaislone.org/blog/webpack-plus-reactjs-and-django/ ; no entanto, a sintaxe na configuração do Webpack está desatualizada.

Sugiro que você siga as etapas mencionadas no blog e substitua o arquivo de configuração do webpack pelo conteúdo abaixo. No entanto, se você é novo no Django e no React, mastigue um de cada vez por causa da curva de aprendizado, provavelmente ficará frustrado.

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

A resposta aceita me levou a acreditar que desacoplar o back-end do Django e o React Frontend é o caminho certo a seguir, não importa o quê. De fato, existem abordagens nas quais o React e o Django são acoplados, que podem ser mais adequados em situações particulares.

Este tutorial explica bem isso. Em particular:

Vejo os seguintes padrões (comuns a quase todas as estruturas da Web):

- Reaja em seu próprio aplicativo Django “frontend”: carregue um único modelo HTML e deixe o React gerenciar o frontend (dificuldade: média)

-DJango REST como uma API autônoma + Reage como um SPA autônomo (dificuldade: difícil, envolve JWT para autenticação)

-Mix and match: mini React apps dentro dos templates do Django (dificuldade: simples)

Você pode tentar o seguinte tutorial, que pode ajudá-lo a seguir em frente:

Servindo React e Django juntos

Sei que isso está atrasado há alguns anos, mas estou divulgando para a próxima pessoa nessa jornada.

O GraphQL tem sido útil e muito mais fácil comparado ao DjangoRESTFramework. Também é mais flexível em termos das respostas que você recebe. Você recebe o que pede e não precisa filtrar a resposta para obter o que deseja.

Você pode usar o Graphene Django no lado do servidor e React + Apollo / Relay ... Você pode ver como isso não é sua pergunta.