DJANGO И REACT

Django и React - это два мощных инструмента, которые можно использовать вместе для создания веб-приложений с высокой производительностью и удобством использования. С Django вы можете создавать серверную часть приложения с легкостью, в то время как React обеспечивает мощный клиентский интерфейс.

Вот пример использования Django и React вместе. Сначала установите django-webpack-loader:

pip install django-webpack-loader
npm install [email protected] --save-dev
npm install webpack-cli --save-dev
npm install webpack-dev-server --save-dev

После установки этих пакетов создайте файл webpack.config.js:

const path = require('path');
const BundleTracker = require('webpack-bundle-tracker');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve('./assets/bundles/'),
filename: '[name]-[hash].js',
},
plugins: [
new BundleTracker({filename: './webpack-stats.json'}),
],
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react'],
},
},
],
},
};

Это конфигурационный файл webpack, который сообщает загрузчику, как бандлировать наш React-код. В Django вам также нужно будет создать представление для этого:

from django.shortcuts import render
from django.views.generic.base import TemplateView
class ReactView(TemplateView):
template_name = 'react.html'
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context['bundle'] = 'http://localhost:8080/bundles/bundle.js'
return context

Это представление отображает шаблон Django, который включает код React:

{% load render_bundle from webpack_loader %}
{% render_bundle 'main' %}

Код React должен быть написан в файле src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
function App() {
return (
<div>
<h1>Hello, World!</h1>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('app'));

Это простой пример React-приложения, который можно использовать вместе с Django.