Cómo crear una aplicación sencilla con Django y React

Cómo crear una aplicación sencilla con Django y React

¿Quieres crear una aplicación web con un backend sólido y un frontend dinámico? Combinar Django, un marco de trabajo de Python, con React, una biblioteca de JavaScript, es una forma estupenda de conseguirlo. Django se encarga de tareas de backend como la gestión de bases de datos y la creación de API, mientras que React crea una interfaz de usuario interactiva y adaptativa.

Pasos clave:

1. Configura tu entorno:
   • Instala Python 3.x para Django y Node.js para React.
   • Utiliza entornos virtuales para gestionar las dependencias de Python.
   • Comprueba las instalaciones con python --version, node --version, y npm --version.
2. Organiza tu proyecto:
   • Crea carpetas independientes para el backend de Django y el frontend de React.
   • Utiliza django-admin startproject para la configuración del backend y npx create-react-app para la inicialización del frontend.
3. Compila el backend:
   • Crea aplicaciones de Django, define modelos y genera migraciones.
   • Utiliza Django REST Framework para crear puntos finales de la API.
   • Configurar django-cors-headers para habilitar la comunicación entre el frontend y el backend.
4. Desarrollar el frontend:
   • Utiliza componentes de React para gestionar tareas e interacciones con el usuario.
   • Instala Axios para las solicitudes a la API e intégralo con los puntos finales de Django.
   • Diseña la aplicación con CSS para conseguir una interfaz de usuario limpia.
5. Conectar y probar:
   • Ejecuta Django en localhost:8000 y React en localhost:3000.
   • Probar los puntos finales de la API con herramientas como Postman o directamente en el navegador.
   • Asegúrate de que la configuración de CORS sea la adecuada para garantizar una comunicación fluida.

Esta configuración te permite desarrollar de forma eficiente una aplicación full-stack con una clara separación entre el backend y el frontend. Sigue estos pasos para crear una aplicación web escalable e interactiva.

Proyecto de Django y React para principiantes: crea una aplicación de notas FullStack

Requisitos de configuración e instalación

Antes de empezar a desarrollar tu aplicación con Django y React, es fundamental configurar tu entorno de desarrollo con las herramientas y dependencias necesarias. Esta base te ayudará a crear, integrar y probar tus componentes de Django y React sin problemas a medida que avances.

Requisitos del sistema y herramientas

Para empezar, tu equipo de desarrollo necesitará Python 3.x para Django y Node.js para React. Concretamente, Django 5.0 requiere Python 3.x, mientras que React funciona con Node.js versión 12 o superior.

Instalación de Python: Puedes descargar Python directamente desde su página web oficial o utilizar el gestor de paquetes de tu sistema. Para los usuarios de macOS, Homebrew simplifica el proceso con brew install python. Los usuarios de Windows deben descargar el instalador desde python.org, mientras que los de Linux pueden instalarlo con comandos como apt install python3 en Ubuntu o comandos similares para otras distribuciones.

Configuración de Node.js y npm: Node.js viene incluido con npm (Node Package Manager). Necesitarás la versión 6 o superior de npm; la versión 7.5.4 es una opción fiable. Descarga Node.js desde nodejs.org, que incluirá automáticamente npm.

Entornos virtuales de Python: El uso de entornos virtuales es fundamental para gestionar las dependencias específicas de cada proyecto sin que se produzcan conflictos. Puedes utilizar el módulo integrado venv o herramientas como pipenv o virtualenvwrapper para disponer de más funciones. Si utilizas Windows, el virtualenvwrapper-win paquete ofrece una funcionalidad similar.

Para comprobar que todo está instalado, ejecuta estos comandos en tu terminal:

python --version
node --version
npm --version

Creación de la estructura del proyecto

Una estructura de proyecto bien organizada es esencial para mantener el código del backend y del frontend separados y fáciles de gestionar. Empieza creando un directorio principal para tu proyecto:

mkdir django-react-app
cd django-react-app

Dentro de este directorio, crea dos carpetas: una para el backend de Django y otra para el frontend de React. Esta separación te permite mantener e implementar cada parte de forma independiente.

Configura tu entorno virtual de Python dentro del directorio del proyecto:

python -m venv venv

Activa el entorno virtual:

• En macOS/Linux: source venv/bin/activate
• En Windows: venv\Scripts\activate

Este paso garantiza que todas las dependencias de Python de tu proyecto estén aisladas.

Instalación de los paquetes necesarios

Una vez que el entorno esté listo, es el momento de instalar los paquetes necesarios tanto para Django como para React.

Paquetes del backend de Django: Mientras tu entorno virtual esté activo, instala Django y sus bibliotecas de apoyo utilizando pip:

pip install django
pip install djangorestframework
pip install django-cors-headers

• Django se encarga de la lógica del lado del servidor, la gestión de bases de datos y el enrutamiento de URL.
• Django REST Framework simplifica el proceso de creación de API RESTful, lo que facilita la creación de puntos finales para tu frontend de React.
• Django-cors-headers habilita el intercambio de recursos entre orígenes (CORS), algo esencial para la comunicación entre tu frontend de React (que se ejecuta en el puerto 3000) y el backend de Django (que se ejecuta en el puerto 8000).

Configuración del frontend de React: Para configurar tu entorno de React, utiliza la create-react-app herramienta. Este comando inicializa un proyecto de React e instala todas las dependencias necesarias:

npx create-react-app frontend

Esto creará un nuevo proyecto de React en un frontend directorio, con todos los paquetes esenciales, herramientas de desarrollo y scripts de compilación.

Paquete adicional para el frontend: Tras configurar tu proyecto de React, navega hasta el frontend directorio e instala Axios, una biblioteca para realizar peticiones HTTP a tu API de Django:

cd frontend
npm install axios

En este punto, tu entorno de desarrollo está totalmente equipado con Python 3.x, Django, Node.js, React y todas las herramientas necesarias. El entorno virtual de Python garantiza que tus dependencias de backend estén aisladas, mientras que npm gestiona tus paquetes de JavaScript por separado. ¡Ya estás listo para empezar a desarrollar tu aplicación full-stack!

Creación del backend con Django

Configurar un backend de Django con modelos de base de datos, puntos finales de API e integración para un frontend de React.

Creación de un proyecto y una aplicación de Django

Empieza creando un proyecto de Django, que incluye ajustes, configuraciones de base de datos y opciones específicas de la aplicación. Dentro de este proyecto, crearás una aplicación de Django: un paquete de Python diseñado para tareas específicas, como la gestión de datos de usuarios o de contenidos.

Accede al directorio raíz de tu proyecto (donde tienes configurado tu entorno virtual) y crea el proyecto de Django:

django-admin startproject backend .

Este comando genera los archivos del proyecto directamente en el directorio actual, evitando tener que crear una carpeta adicional. Verás nuevos archivos como manage.py (para ejecutar comandos de Django) y un backend directorio que contiene archivos como settings.py, urls.py, asgi.py, y wsgi.py.

A continuación, crea una aplicación para gestionar una funcionalidad específica. Por ejemplo, un sistema de gestión de tareas:

python manage.py startapp tasks

Esto crea un tasks directorio con archivos esenciales como models.py, views.py, admin.py, y una migrations carpeta. Asegúrate de evitar conflictos de nombres con nombres integrados como «django» o «test».

Registra la aplicación en la configuración de tu proyecto añadiéndola a la INSTALLED_APPS lista de backend/settings.py:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'corsheaders',
    'tasks',  # Register your app
]

Configuración de modelos y serializadores

Define tu estructura de datos con los modelos de Django. Por ejemplo, se puede añadir un Task modelo para la aplicación de gestión de tareas se puede añadir en tasks/models.py:

from django.db import models

class Task(models.Model):
    title = models.CharField(max_length=200)
    description = models.TextField(blank=True)
    completed = models.BooleanField(default=False)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    class Meta:
        ordering = ['-created_at']

    def __str__(self):
        return self.title

Este modelo incluye campos como CharField para texto breve, TextField para contenido más extenso, BooleanField para valores verdadero/falso, y DateTimeField para marcas de tiempo. La Meta clase especifica opciones como el orden predeterminado.

Aplica el modelo a tu base de datos ejecutando las migraciones:

python manage.py makemigrations tasks
python manage.py migrate

Para convertir los datos del modelo a JSON, utiliza los serializadores de Django REST Framework. En tasks/serializers.py, define un serializador para el Task modelo:

from rest_framework import serializers
from .models import Task

class TaskSerializer(serializers.ModelSerializer):
    class Meta:
        model = Task
        fields = ['id', 'title', 'description', 'completed', 'created_at', 'updated_at']
        read_only_fields = ['created_at', 'updated_at']

El ModelSerializer genera automáticamente campos y métodos basados en el modelo. Enumerar los campos de forma explícita garantiza que no se expongan datos confidenciales de forma involuntaria.

Creación de puntos finales de la API

Django REST Framework simplifica la creación de API. Para las operaciones CRUD estándar, utiliza ViewSets con enrutadores para obtener una estructura limpia y RESTful.

En tasks/views.py, crea vistas de API:

from rest_framework import viewsets
from rest_framework.permissions import AllowAny
from .models import Task
from .serializers import TaskSerializer

class TaskViewSet(viewsets.ModelViewSet):
    queryset = Task.objects.all()
    serializer_class = TaskSerializer
    permission_classes = [AllowAny]  # For development only

El ModelViewSet se encarga automáticamente de listar, crear, recuperar, actualizar y eliminar tareas.

Configura el enrutamiento de URL en tasks/urls.py:

from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import TaskViewSet

router = DefaultRouter()
router.register(r'tasks', TaskViewSet)

urlpatterns = [
    path('api/', include(router.urls)),
]

Incluye estas URL en el archivo principal backend/urls.py :

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('tasks.urls')),
]

Configuración de los encabezados CORS

Para permitir que tu frontend de React (que se ejecuta en el puerto 3000) se comunique con el backend de Django (en el puerto 8000), configura el Cross-Origin Resource Sharing (CORS). Sin ello, los navegadores bloquean las solicitudes de origen cruzado por motivos de seguridad.

Actualiza backend/settings.py para incluir la configuración de CORS:

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',  # Add this at the top
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

# CORS settings for development
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",  # React development server
    "http://127.0.0.1:3000",
]

CORS_ALLOW_CREDENTIALS = True

Para realizar pruebas rápidas, puedes utilizar CORS_ALLOW_ALL_ORIGINS = True, aunque especificar los orígenes permitidos es más seguro.

Prueba de los puntos finales de la API

Antes de integrar el frontend de React, prueba los puntos finales de la API para asegurarte de que funcionan según lo esperado. Inicia el servidor de desarrollo de Django:

python manage.py runserver

Accede a la API en http://127.0.0.1:8000/api/tasks/. Utiliza la API navegable para probar operaciones como las solicitudes GET y POST.

Como alternativa, prueba con cURL o Postman:

# Test GET request to list tasks
curl -X GET http://127.0.0.1:8000/api/tasks/

# Test POST request to create a task
curl -X POST http://127.0.0.1:8000/api/tasks/ \
  -H "Content-Type: application/json" \
  -d '{"title": "Test Task", "description": "This is a test task"}'

Para realizar pruebas automatizadas, añade casos de prueba en tasks/tests.py:

from rest_framework.test import APITestCase
from rest_framework import status
from .models import Task

class TaskAPITestCase(APITestCase):
    def test_create_task(self):
        # Add your assertions and test logic here
        pass

Una vez que tengas el backend listo, ya puedes conectarlo al frontend de React.

Creación del frontend con React

Para crear una interfaz atractiva para tu backend de Django, utilizarás React para gestionar las interacciones de los usuarios: desde ver tareas hasta añadir otras nuevas.

Configuración de un proyecto de React

Empieza por configurar tu frontend de React utilizando Create React App. Ve al directorio raíz de tu proyecto (donde se encuentra tu backend de Django) y ejecuta:

npx create-react-app frontend
cd frontend

Este comando configura una aplicación de React con archivos esenciales como package.json, src/App.js, y public/index.html. También incluye herramientas como webpack para el empaquetado, Babel para la compilación de JavaScript y un servidor de desarrollo para realizar pruebas.

A continuación, instala Axios para gestionar las solicitudes HTTP a tu API de Django:

npm install axios

Axios simplifica las llamadas a la API al gestionar el análisis de JSON y ofrecer una gestión de errores mejor que la de la función fetch() . Además, admite funciones como los interceptores de peticiones y respuestas.

Tu estructura de carpetas debería tener ahora este aspecto:

project-root/
├── backend/
│   ├── manage.py
│   ├── backend/
│   └── tasks/
└── frontend/
    ├── package.json
    ├── public/
    └── src/

Para comprobar que todo funciona, inicia el servidor de desarrollo de React:

npm start

Esto inicia la aplicación en http://localhost:3000, mostrando la página de bienvenida predeterminada de React. Mantén este servidor en funcionamiento durante el desarrollo: se recarga automáticamente cuando realices cambios.

Creación de componentes de React

Creemos un TaskList componente para mostrar las tareas obtenidas de tu API de Django. Añade lo siguiente a src/components/TaskList.js:

import React from 'react';

const TaskList = ({ tasks, onToggleComplete, onDeleteTask }) => {
  return (
    <div className="task-list">
      <h2>Your Tasks</h2>
      {tasks.length === 0 ? (
        <p>No tasks available. Create your first task!</p>
      ) : (
        <ul>
          {tasks.map((task) => (
            <li key={task.id} className={`task-item ${task.completed ? 'completed' : ''}`}>
              <div className="task-content">
                <h3>{task.title}</h3>
                <p>{task.description}</p>
                <small>Created: {new Date(task.created_at).toLocaleDateString()}</small>
              </div>
              <div className="task-actions">
                <button 
                  onClick={() => onToggleComplete(task.id, !task.completed)}
                  className={task.completed ? 'btn-undo' : 'btn-complete'}
                >
                  {task.completed ? 'Undo' : 'Complete'}
                </button>
                <button 
                  onClick={() => onDeleteTask(task.id)}
                  className="btn-delete"
                >
                  Delete
                </button>
              </div>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default TaskList;

A continuación, crea un TaskForm componente para añadir nuevas tareas. Añade esto a src/components/TaskForm.js:

import React, { useState } from 'react';

const TaskForm = ({ onAddTask }) => {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!title.trim()) return;

    setIsSubmitting(true);
    try {
      await onAddTask({ title: title.trim(), description: description.trim() });
      setTitle('');
      setDescription('');
    } catch (error) {
      console.error('Error adding task:', error);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="task-form">
      <h2>Add New Task</h2>
      <div className="form-group">
        <input
          type="text"
          placeholder="Task title"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          disabled={isSubmitting}
          required
        />
      </div>
      <div className="form-group">
        <textarea
          placeholder="Task description (optional)"
          value={description}
          onChange={(e) => setDescription(e.target.value)}
          disabled={isSubmitting}
          rows="3"
        />
      </div>
      <button type="submit" disabled={isSubmitting || !title.trim()}>
        {isSubmitting ? 'Adding...' : 'Add Task'}
      </button>
    </form>
  );
};

export default TaskForm;

Para aplicar un estilo básico, crea un src/App.css archivo y añade:

.task-list {
  margin: 20px 0;
}

.task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border: 1px solid #ddd;
  margin-bottom: 10px;
  border-radius: 5px;
}

.task-item.completed {
  background-color: #f0f8f0;
  text-decoration: line-through;
  opacity: 0.7;
}

.task-form {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group input, .form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

.btn-complete, .btn-undo, .btn-delete {
  margin-left: 10px;
  padding: 5px 10px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.btn-complete { background: #28a745; color: white; }
.btn-undo { background: #ffc107; color: black; }
.btn-delete { background: #dc3545; color: white; }

Gestión del estado e integración con la API

Los hooks de React como useState y useEffect facilitan la gestión del estado y la interacción con tu backend de Django. Para centralizar las llamadas a la API, crea un archivo de servicio src/services/api.js:

import axios from 'axios';

const API_BASE_URL = 'http://127.0.0.1:8000/api';

const api = axios.create({
  baseURL: API_BASE_URL,
  headers: {
    'Content-Type': 'application/json',
  },
});

export const taskAPI = {
  getTasks: () => api.get('/tasks/'),
  createTask: (taskData) => api.post('/tasks/', taskData),
  updateTask: (taskId, taskData) => api.put(`/tasks/${taskId}/`, taskData),
  deleteTask: (taskId) => api.delete(`/tasks/${taskId}/`),
};

export default api;

Por último, integra todo en src/App.js:

import React, { useState, useEffect } from 'react';
import TaskList from './components/TaskList';
import TaskForm from './components/TaskForm';
import { taskAPI } from './services/api';
import './App.css';

function App() {
  const [tasks, setTasks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchTasks();
  }, []);

  const fetchTasks = async () => {
    try {
      setLoading(true);
      const response = await taskAPI.getTasks();
      setTasks(response.data);
    } catch (err) {
      setError(err);
    } finally {
      setLoading(false);
    }
  };

  // Additional methods for adding, updating, and deleting tasks would go here
}

Con esta configuración, tu frontend de React estará listo para gestionar tareas de forma interactiva mientras se comunica a la perfección con tu backend de Django.

Conectar Django y React

Ahora que el backend y el frontend están en funcionamiento, el siguiente paso es garantizar una comunicación fluida entre ambos. Esto implica configurar puntos finales de API, gestionar las solicitudes y resolver cualquier contratiempo de integración.

Configuración de las URL de la API en React

Tu aplicación de React necesita saber dónde se encuentran los puntos finales de la API de Django. Para ello, actualiza el src/services/api.js archivo con configuraciones específicas del entorno:

import axios from 'axios';

// Determine API base URL based on environment
const getApiBaseUrl = () => {
  if (process.env.NODE_ENV === 'production') {
    return process.env.REACT_APP_API_URL || 'https://your-production-domain.com/api';
  }
  return 'http://127.0.0.1:8000/api';
};

const API_BASE_URL = getApiBaseUrl();

const api = axios.create({
  baseURL: API_BASE_URL,
  headers: {
    'Content-Type': 'application/json',
  },
  timeout: 10000, // 10 second timeout
});

export const taskAPI = {
  getTasks: () => api.get('/tasks/'),
  createTask: (taskData) => api.post('/tasks/', taskData),
  updateTask: (taskId, taskData) => api.put(`/tasks/${taskId}/`, taskData),
  deleteTask: (taskId) => api.delete(`/tasks/${taskId}/`),
};

export default api;

Para el entorno de producción, añade un .env archivo en la raíz de tu proyecto de React con el siguiente contenido:

REACT_APP_API_URL=https://your-production-domain.com/api

Esta configuración garantiza que tu aplicación React pueda interactuar a la perfección con tu backend de Django, tanto si te encuentras en un entorno de desarrollo local como si estás realizando una implementación en producción. Una vez configurados los puntos finales de la API, ya estás listo para recuperar y manipular datos del backend.

Recuperación de datos del backend

Una vez configurada la API, puedes realizar operaciones CRUD para gestionar los datos entre React y Django. Actualiza src/App.js para gestionar estas operaciones:

import React, { useState, useEffect } from 'react';
import TaskList from './components/TaskList';
import TaskForm from './components/TaskForm';
import { taskAPI } from './services/api';
import './App.css';

function App() {
  const [tasks, setTasks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchTasks();
  }, []);

  const fetchTasks = async () => {
    try {
      setLoading(true);
      setError(null);
      const response = await taskAPI.getTasks();
      setTasks(response.data);
    } catch (err) {
      setError('Failed to fetch tasks. Please check your connection.');
      console.error('Error fetching tasks:', err);
    } finally {
      setLoading(false);
    }
  };

  const handleAddTask = async (taskData) => {
    try {
      const response = await taskAPI.createTask(taskData);
      setTasks(prevTasks => [...prevTasks, response.data]);
    } catch (err) {
      console.error('Error adding task:', err);
      throw err; // Re-throw to let TaskForm handle the error
    }
  };

  const handleToggleComplete = async (taskId, completed) => {
    try {
      const taskToUpdate = tasks.find(task => task.id === taskId);
      const updatedTaskData = { ...taskToUpdate, completed };

      const response = await taskAPI.updateTask(taskId, updatedTaskData);
      setTasks(prevTasks =>
        prevTasks.map(task =>
          task.id === taskId ? response.data : task
        )
      );
    } catch (err) {
      console.error('Error updating task:', err);
    }
  };

  const handleDeleteTask = async (taskId) => {
    if (!window.confirm('Are you sure you want to delete this task?')) {
      return;
    }

    try {
      await taskAPI.deleteTask(taskId);
      setTasks(prevTasks => prevTasks.filter(task => task.id !== taskId));
    } catch (err) {
      console.error('Error deleting task:', err);
    }
  };

  if (loading) {
    return <div className="loading">Loading tasks...</div>;
  }

  return (
    <div className="App">
      <header className="App-header">
        <h1>Task Manager</h1>
      </header>
      <main className="container">
        {error && <div className="error-message">{error}</div>}
        <TaskForm onAddTask={handleAddTask} />
        <TaskList 
          tasks={tasks}
          onToggleComplete={handleToggleComplete}
          onDeleteTask={handleDeleteTask}
        />
      </main>
    </div>
  );
}

export default App;

Este código se encarga de la creación, actualización y eliminación de tareas, así como de la gestión de errores. La interfaz de usuario se actualiza al instante para ofrecer una experiencia fluida, y los errores se gestionan de forma elegante, ya sea revirtiendo los cambios o mostrando los mensajes adecuados.

Pruebas y depuración de la conexión

Uno de los obstáculos más comunes a la hora de vincular Django y React es lidiar con los errores CORS (Cross-Origin Resource Sharing). Estos surgen porque los navegadores bloquean las solicitudes entre diferentes orígenes por motivos de seguridad. Durante el desarrollo, React suele ejecutarse en localhost:3000, mientras que Django funciona en localhost:8000, lo que da lugar a una situación de origen cruzado.

Para resolver los problemas de CORS, asegúrate de haber configurado los encabezados CORS en la configuración de Django tal y como se describe en la sección «Configuración de los encabezados CORS». Tras realizar los cambios, reinicia el servidor de Django para que se apliquen.

A continuación se indican algunos errores comunes en las solicitudes de API y sus soluciones:

• HTTP 400 (Solicitud incorrecta): esto suele significar que faltan algunos datos obligatorios o que están mal formados en la carga útil de la solicitud. Por ejemplo, en noviembre de 2023, FintanMi se encontró con un error 400 al crear una comunidad en un proyecto de Django REST Framework y React porque faltaba el owner faltaba un campo en la solicitud. Comprueba siempre que tu frontend envíe todos los campos obligatorios que esperan los modelos de Django.
• HTTP 405 (Método no permitido): esto ocurre cuando el punto final de la API no admite el método HTTP utilizado. Por ejemplo, FintanMi notificó un error 405 al intentar eliminar una publicación, lo cual se resolvió actualizando la vista de Django de generics.RetrieveUpdateAPIView a generics.RetrieveUpdateDestroyAPIView para incluir compatibilidad con DELETE las solicitudes.

Ejecución y pruebas de la aplicación

Una vez conectados el backend de Django y el frontend de React, es el momento de iniciar ambos servidores de desarrollo y probar la aplicación. Esto implica ejecutar dos servidores simultáneamente y asegurarse de que todo funciona a la perfección en conjunto.

Inicio de los servidores de desarrollo

Para ejecutar tu aplicación Django-React, necesitarás dos ventanas de terminal: una para cada servidor. Esta configuración permite que el backend y el frontend funcionen de forma independiente mientras se comunican a través de llamadas a la API.

Iniciar el servidor backend de Django:

1. Abre la primera ventana de terminal y navega hasta el directorio raíz de tu proyecto de Django.

2. Activa tu entorno virtual de Python:

   source venv/bin/activate
   

3. Inicia el servidor de desarrollo de Django:

   python manage.py runserver
   

   El servidor estará disponible en http://127.0.0.1:8000/.

Iniciar el servidor frontend de React:

1. Abre una segunda ventana de terminal y navega hasta el directorio de tu proyecto de React:

   cd frontend
   

2. Inicia el servidor de desarrollo de React:

   npm start
   

   Esto abrirá automáticamente una ventana del navegador en http://localhost:3000/.

Una vez que ambos servidores estén en funcionamiento, podrás empezar a probar la funcionalidad de tu aplicación.

Comprobación de la funcionalidad completa de la aplicación

Con los servidores en funcionamiento y CORS y los puntos finales de la API correctamente configurados, es el momento de validar el flujo de datos entre el frontend y el backend.

Verificación de la API del backend:

• Prueba directamente los puntos finales de la API de Django accediendo a:

  http://localhost:8000/api/tasks
  

  Debería aparecer la interfaz de la API navegable de Django REST Framework, donde podrás realizar operaciones CREATE y READ.

• Accede a la interfaz de administración de Django en:

  http://localhost:8000/admin
  

  Inicia sesión con tus credenciales de superusuario para crear, editar o eliminar tareas. También puedes probar las operaciones UPDATE y DELETE accediendo a:

  http://localhost:8000/api/tasks/{id}
  

Pruebas de integración entre frontend y backend:

• Abre tu aplicación React en http://localhost:3000 y comprueba que se carga correctamente, mostrando las tareas del backend de Django.
• Prueba cada operación CRUD a través de la interfaz de React:
  • Añade una nueva tarea y comprueba que aparece tanto en la interfaz de usuario de React como en el backend.
  • Edita una tarea existente y asegúrate de que se guarden los cambios.
  • Elimina una tarea y comprueba que se ha eliminado tanto de la interfaz de usuario como de la base de datos.

Si tu aplicación incluye filtros u otras funciones, pruébalas a fondo para confirmar que las tareas se muestran según lo esperado.

Solución de problemas comunes

Si te encuentras con algún problema durante las pruebas, aquí tienes algunas soluciones habituales que puedes probar.

Errores de conexión a la API:

• Asegúrate de que ambos servidores estén ejecutándose en sus respectivos puertos: Django en http://localhost:8000 y React en http://localhost:3000.
• Utiliza las herramientas de desarrollo del navegador (pestaña «Red») para identificar códigos de estado HTTP como 404 o 500.

• Comprueba la proxy configuración en el archivo package.json :

  "proxy": "http://localhost:8000"
  

  Si realizas cambios, reinicia el servidor de React.

Problemas al iniciar el servidor:

• Si el servidor de Django no se inicia, comprueba si faltan migraciones:

  python manage.py makemigrations
  python manage.py migrate
  

• Para problemas con el servidor de React, prueba a reinstalar las dependencias:

  npm install
  

Problemas de flujo de datos:

• Utiliza las herramientas de desarrollo del navegador para inspeccionar las solicitudes de red y los errores de la consola.
• Añade sentencias de depuración, como console.log() en React o print en las vistas de Django, para rastrear el flujo de datos.
• Comprueba que las URL de la API de tu aplicación React coincidan exactamente con los patrones de URL de Django, incluidas las barras finales (p. ej., /api/tasks/).

Resumen y próximos pasos

Has creado una aplicación web que combina Django y React, lo que te ha proporcionado una sólida introducción al desarrollo full-stack. Este proyecto destaca conceptos esenciales como la separación del backend del frontend, la realización de operaciones CRUD y la gestión de solicitudes de origen cruzado mediante la configuración de CORS. A lo largo del proceso, has trabajado con Django REST Framework para crear API y has utilizado los hooks de React para la gestión del estado, habilidades que permiten una integración fluida entre estas dos potentes herramientas.

Llevar tu aplicación al siguiente nivel

Hay mucho margen para ampliar la funcionalidad de tu aplicación. Por ejemplo, puedes añadir autenticación JWT mediante Django REST Framework para proteger los datos de los usuarios y el acceso a la API. Esto te permitiría ofrecer funciones específicas para cada usuario y experiencias personalizadas.

Si tu aplicación necesita actualizaciones en tiempo real, plantéate utilizar Django Channels para habilitar la compatibilidad con WebSocket. Esto resulta perfecto para funciones como paneles de control en directo, sistemas de chat o notificaciones, lo que convertirá tu aplicación en una plataforma más dinámica e interactiva.

A medida que tu aplicación crezca, la visualización avanzada de datos cobrará importancia. Al combinar las capacidades de renderizado de React con una recuperación eficiente de datos del backend, podrás gestionar y mostrar conjuntos de datos complejos de forma eficaz.

Preparación para la producción

A la hora de preparar tu aplicación para la producción, céntrate en la implementación, la seguridad y el rendimiento. Aunque la configuración actual es ideal para el desarrollo local, los entornos de producción requieren pasos adicionales. Entre ellos se incluyen la configuración de variables de entorno, la optimización de tu base de datos y la implementación de sólidos mecanismos de gestión de errores.

Estas mejoras se basan en las habilidades que ya has desarrollado, como el diseño de API, la arquitectura basada en componentes y la integración full-stack. Al dominar estas técnicas avanzadas, estarás perfectamente preparado para abordar proyectos de nivel empresarial y seguir creciendo como desarrollador web.

Preguntas frecuentes

¿Cuáles son las ventajas de utilizar Django para el backend y React para el frontend a la hora de desarrollar una aplicación web?

Utilizar Django para el backend y React para el frontend crea una combinación sólida para desarrollar aplicaciones web modernas. Django ofrece un marco sólido repleto de herramientas que agilizan el desarrollo del backend, mientras que React destaca en la creación de interfaces de usuario dinámicas e interactivas.

Esta combinación favorece una clara separación de responsabilidades, lo que ayuda a mantener el código organizado y facilita su ampliación con el tiempo. La estructura basada en componentes de React fomenta la reutilización de elementos de la interfaz de usuario, y el REST Framework de Django simplifica el proceso de creación de API, garantizando una comunicación fluida entre el frontend y el backend. Juntos, ofrecen un enfoque rápido, eficiente y centrado en el usuario para el desarrollo de aplicaciones.

¿Cómo se resuelven los problemas de CORS al conectar un frontend de React a un backend de Django?

Para resolver los problemas de CORS entre un frontend de React y un backend de Django, el django-cors-headers paquete es una solución muy útil. En primer lugar, instálalo mediante pip. A continuación, en tu settings.py archivo, añade 'corsheaders' a la INSTALLED_APPS lista. A continuación, incluye 'corsheaders.middleware.CorsMiddleware' al principio de la MIDDLEWARE lista para garantizar el orden correcto de ejecución del middleware.

Durante el desarrollo, puedes simplificar las cosas configurando CORS_ORIGIN_ALLOW_ALL = True en tu settings.py. Esto permite solicitudes procedentes de cualquier origen. Sin embargo, en un entorno de producción, es mucho más seguro definir dominios de confianza específicos mediante la CORS_ALLOWED_ORIGINS configuración. Este enfoque ayuda a mantener una seguridad más estricta.

Con esta configuración, tu aplicación React puede interactuar sin problemas con tus API de Django, al tiempo que cumple con los requisitos de CORS.

¿Cómo puedo preparar mis aplicaciones de Django y React para su implementación en producción?

Para preparar tus aplicaciones de Django y React para producción, empieza por ajustar la configuración de Django para garantizar una instalación segura. Esto incluye establecer DEBUG a False y especificar el ALLOWED_HOSTS para controlar qué dominios pueden acceder a tu aplicación. Estos cambios son esenciales para proteger tu aplicación en un entorno de producción.

A continuación, elige una plataforma de alojamiento fiable para tu backend de Django y tus archivos estáticos. Asegúrate de que tu infraestructura esté preparada para gestionar el tráfico y las exigencias propias de un entorno de producción. Para el frontend de React, utiliza las herramientas de compilación adecuadas para generar una versión de producción optimizada.

Una vez que tu aplicación React esté lista, configura un servidor web como Nginx para servir tanto el frontend de React como el backend de Django. Una configuración adecuada del servidor garantiza que tu aplicación funcione de manera eficiente y ofrezca una experiencia fluida a los usuarios.

Antes de ponerla en producción, prueba a fondo tu aplicación en el entorno de producción. Este paso ayuda a identificar y resolver cualquier problema, garantizando que tu aplicación funcione de forma fiable una vez lanzada.