Header Ads Widget

Ticker

6/recent/ticker-posts

Creación de aplicaciones web con Django, Webpack y React

 A lo largo de este tutorial, aprenderemos cómo usar la biblioteca React JavaScript y Webpack con Django para crear aplicaciones web modernas.

Webpack es un paquete de módulos y una herramienta de compilación que agrupa JavaScript y otros activos para un mejor consumo por parte de los navegadores web.

El objetivo de este tutorial es mostrarle los pasos para usar React con Webpack como la interfaz de sus aplicaciones web Django.

Entonces empecemos !

Crea un entorno virtual

Comencemos creando un entorno virtual usando virtualenv, así que abra su terminal y luego ejecute:

virtualenv myenv 

A continuación, active el entorno con:

source myenv/bin/activate 

A continuación, instale Django usando pip:

pip install django 

Luego crea un proyecto de django:

django-admin.py startproject django-react-demo 

Para poder instalar módulos npm, necesitamos crear un módulo npm. Esto se puede hacer agregando un package.json con alguna información a una carpeta que marca la carpeta como un módulo npm.

Agregar package.json

Genere un package.json dentro de la carpeta raíz de su proyecto usando:

npm init

npm le pedirá algunos datos, ingréselos y presione Enter.

Ahora instalemos las dependencias npm que necesitamos en nuestro proyecto

Instalación y configuración de Webpack

npm install webpack webpack-bundle-tracker babel babel-loader babel-core babel-preset-es2015  babel-preset-react --save-dev  

Así que hemos instalado webpack y webpack-bundle-tracker que rastrea los paquetes y guarda información en el archivo json (webpack-stats.json)

Después de instalar las dependencias requeridas, necesitamos un archivo de configuración para que Webpack le diga qué hacer.

Navegue dentro de la carpeta raíz de su proyecto y luego ejecute:

touch webpack.config.js

Luego agrega esto:

var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')

module.exports = {
context: __dirname,

entry: './assets/js/index.js', 

output: {
    path: path.resolve('./assets/bundles/'),
    filename: "[name]-[hash].js",
},

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

module: {
    loaders: [
    { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
    { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }

    ],
},

}

entrada: el archivo de entrada de los archivos a empaquetar.

salida: la ubicación del archivo empaquetado que se guardará.

loaders: complementos para llamar para cada archivo .js y jsx, en nuestro caso es babel-loader.

Excluimos archivos en node_modules.

complementos: contienen complementos de Webpack. En nuestro caso, agregamos el rastreador de paquetes que instalamos anteriormente.

Asegúrese de crear las carpetas assets y js para nuestros assets:

mkdir -p assets/js 

Instalación y configuración de babel

Babel es un compilador / transpilador de Javascript que compila ES6 a ES5 para que podamos usar el siguiente JavaScript en navegadores reales sin preocuparnos por la compatibilidad del navegador actual.

label-loader se utiliza para integrar babel en Webpack workfow.

Los cargadores son complementos utilizados por Webpack para agregar funcionalidad.

npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev

Instalamos babel, babel-core, babel-loader, babel-preset-es2015 y babel-preset-react

babel-preset-es2015 y babel-preset-react son ajustes preestablecidos o complementos de babel para agregar soporte de compilación para las funciones de ES6 y React.

Ahora creemos un archivo de configuración de babel:

Navegue a la carpeta raíz de su proyecto y luego ejecute

touch .babelrc 

Luego ábrelo y agrega:

/* 
    ./.babelrc
*/  
{
    "presets":[
        "es2015", "react"
    ]
}        

Esto permitirá a Babel compilar ES6 y reaccionar

Aquí está nuestra estructura de carpetas de proyectos

PROJECT_ROOT/
├── manage.py
├── package.json
│── webpack.config.js
│── .babelrc.js
│── webpack-stats.json 
├── node_modules/ 
├── assets/ 
│   └── js/ 
│   └── bundles/ 

Instale React y cree nuestra aplicación React

El siguiente paso es instalar React y otras dependencias:

npm install --save-dev react react-dom 

Ahora creemos una aplicación React simple para integrarla con Django como interfaz.

en assets / js / crear index.js

cd ./assets/js 
touch index.js 

Luego añade :

import React, { Component } from 'react';

import ReactDOM from 'react-dom';



class App extends React.Component {
render() {
    return (
    <div style=>
        <h1>Helle Django + React = Awesomeness </h1>
    </div>);
}
}


ReactDOM.render(<App />, document.getElementById('react-app'));

Ahora puede probar su configuración para ver si hay un error al ejecutar el paquete web.

En la raíz de su proyecto, ejecute:

./node_modules/.bin/webpack --config webpack.config.js --watch

Esto ejecutará webpack en modo reloj, por lo que siempre que haya cambios, webpack empaquetará y compilará (con babel) los archivos nuevamente.

Integración con Django

Si no tiene ningún problema para ejecutar el paquete web y obtener el paquete de su aplicación de reacción simple (en activos / paquetes /), el siguiente paso sería integrar el paquete con Django.

Webpack con Babel se encarga de compilar y empaquetar nuestra aplicación de reacción frontal, por lo que Django solo tiene que incluir el paquete de resultados y entregar la primera página.

Vamos a utilizar un paquete de Django para integrar Webpack sin problemas con Django

pip install django-webpack-loader

El cargador de paquetes web de Django consume la salida generada por webpack-bundle-tracker y le permite usar los paquetes generados en django.

Ahora configuremos django-webpack-loader en settings.py

Primero agréguelo a las aplicaciones instaladas:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'webpack_loader'
]

Luego agregue un objeto de configuración para el cargador de paquetes web para indicarle dónde encontrar paquetes y dónde encontrar el archivo de estadísticas generado por webpack-bundle-tracker

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

También necesitamos agregar nuestra carpeta de activos a staticfiles_dirs:

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'assets'), 
)

Entonces podemos acceder al paquete sin ejecutar collectstatic en modo de desarrollo.

Lo siguiente es crear una vista de Django para servir la primera página.

Crea una aplicación Django

Primero cree una aplicación Django llamada inventario, por ejemplo

python manage.py startapp inventory 

Agréguelo a las aplicaciones instaladas en settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'webpack_loader',
    'inventory'
]

A continuación, cree una función de vista en Inventory / views.py:

from django.shortcuts import render

def index(request):
    return render(request, 'inventory/index.html', {})

Luego cree una plantilla en inventario / templates / inventario / carpeta:

{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>React with Django </title>
</head>

<body>
    <div id="react-app"></div>
    {% render_bundle 'main' %}
</body>
</html>

render_bundle renderizará el apropiado


Publicar un comentario

0 Comentarios