Разработка проекта на Django с React

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Введение в Django и React

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

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

Кинга Идем в IT: пошаговый план для смены профессии

Настройка окружения и установка необходимых инструментов

Перед началом работы необходимо настроить окружение и установить все необходимые инструменты. Вот что вам понадобится:

Python: Убедитесь, что у вас установлена последняя версия Python. Вы можете скачать её с официального сайта python.org. Python является основным языком программирования для Django, поэтому его установка является первым шагом.
Django: Установите Django с помощью pip, который является менеджером пакетов для Python. Это можно сделать с помощью следующей команды: bash pip install django Django предоставляет множество встроенных функций, таких как ORM (Object-Relational Mapping), система шаблонов и админ-панель, что делает его мощным инструментом для веб-разработки.
Node.js и npm: React требует Node.js и npm (Node Package Manager). Вы можете скачать их с официального сайта Node.js. Node.js позволяет запускать JavaScript на сервере, а npm используется для управления пакетами и библиотеками, необходимыми для разработки на React.
Create React App: Установите Create React App для создания нового проекта React. Это удобный инструмент, который автоматически настраивает все необходимые зависимости и конфигурации для начала работы с React: bash npx create-react-app my-react-app

Создание базового проекта на Django

Теперь, когда все инструменты установлены, создадим базовый проект на Django. Это включает в себя создание проекта, приложения, настройку базы данных и создание модели данных.

Создание проекта: Сначала создадим новый проект Django с помощью команды django-admin startproject: bash django-admin startproject myproject cd myproject Эта команда создаст структуру директорий и файлов, необходимых для работы проекта Django.
Создание приложения: Внутри проекта создадим новое приложение с помощью команды python manage.py startapp: bash python manage.py startapp tasks Приложения в Django представляют собой модули, которые могут быть повторно использованы в разных проектах. В нашем случае приложение tasks будет отвечать за управление задачами.
Настройка базы данных: В файле settings.py настройте базу данных. Для простоты используем SQLite, которая является встроенной базой данных в Django и не требует дополнительной настройки: python DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', 'NAME': BASE_DIR / "db.sqlite3", } } Эта конфигурация указывает Django использовать SQLite и хранить базу данных в файле db.sqlite3 в корневой директории проекта.
Создание модели задачи: В файле models.py приложения tasks создайте модель задачи. Модель представляет собой таблицу в базе данных и определяет структуру данных, которые будут храниться:
Python
Скопировать код
```
 from django.db import models

 class Task(models.Model):
     title = models.CharField(max_length=100)
     completed = models.BooleanField(default=False)

     def __str__(self):
         return self.title
```
Модель `Task` имеет два поля: `title` для хранения названия задачи и `completed` для указания, выполнена ли задача.
Миграции: Примените миграции для создания таблиц в базе данных. Миграции — это способ управления изменениями в структуре базы данных:
Bash
Скопировать код
```
 python manage.py makemigrations
 python manage.py migrate
```
Команда `makemigrations` создаёт файлы миграций на основе изменений в моделях, а команда `migrate` применяет эти миграции к базе данных, создавая или изменяя таблицы.

Интеграция React в проект Django

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

Создание фронтенд-приложения: В корневой директории проекта создайте папку frontend и инициализируйте новое приложение React с помощью Create React App: bash npx create-react-app frontend Это создаст структуру директорий и файлов, необходимых для работы приложения React.
Настройка Webpack и Babel: В папке frontend настройте Webpack и Babel для сборки вашего React-приложения. Webpack — это инструмент для сборки модулей, а Babel — транспайлер, который позволяет использовать современные возможности JavaScript:
JS
Скопировать код
```
 const path = require('path');

 module.exports = {
     entry: './src/index.js',
     output: {
         path: path.resolve(__dirname, 'static/frontend'),
         filename: 'main.js',
     },
     module: {
         rules: [
             {
                 test: /\.(js|jsx)$/,
                 exclude: /node_modules/,
                 use: {
                     loader: 'babel-loader',
                 },
             },
         ],
     },
     resolve: {
         extensions: ['.js', '.jsx'],
     },
 };
```
Этот файл конфигурации указывает Webpack, где находится входной файл (`entry`), куда сохранять собранные файлы (`output`) и как обрабатывать файлы JavaScript и JSX с помощью Babel.
Настройка Babel: Создайте файл .babelrc в корневой директории frontend и добавьте следующие настройки: json { "presets": ["@babel/preset-env", "@babel/preset-react"] } Эти пресеты позволяют Babel транспилировать современный JavaScript и JSX в код, совместимый с более старыми браузерами.

Создание компонента React: В папке src создайте файл App.js и добавьте следующий код. Этот компонент будет отвечать за отображение списка задач:

Скопировать код

 import React, { useState, useEffect } from 'react';

 function App() {
     const [tasks, setTasks] = useState([]);

     useEffect(() => {
         fetch('/api/tasks/')
             .then(response => response.json())
             .then(data => setTasks(data));
     }, []);

     return (
         <div>
             <h1>Task List</h1>
             <ul>
                 {tasks.map(task => (
                     <li key={task.id}>{task.title}</li>
                 ))}
             </ul>
         </div>
     );
 }

 export default App;

Компонент `App` использует хуки `useState` и `useEffect` для управления состоянием и выполнения побочных эффектов, таких как загрузка данных с сервера.

Настройка Django для обслуживания статических файлов: В файле settings.py добавьте следующие строки, чтобы Django мог обслуживать статические файлы, созданные Webpack:
Python
Скопировать код
```
 STATICFILES_DIRS = [
     BASE_DIR / "frontend/static",
 ]
```
Эта настройка указывает Django искать статические файлы в директории `frontend/static`.

Пример приложения: Создание и отображение списка задач

Теперь создадим простое приложение для создания и отображения списка задач. Это включает в себя создание API на стороне Django и подключение фронтенда к этому API.

Создание API для задач: В файле views.py приложения tasks создайте представление для получения списка задач. Это представление будет возвращать данные в формате JSON:
Python
Скопировать код
```
 from django.http import JsonResponse
 from .models import Task

 def task_list(request):
     tasks = Task.objects.all()
     tasks_list = [{"id": task.id, "title": task.title, "completed": task.completed} for task in tasks]
     return JsonResponse(tasks_list, safe=False)
```
Представление `task_list` извлекает все задачи из базы данных и возвращает их в виде списка словарей.
Настройка URL-адресов: В файле urls.py приложения tasks добавьте маршрут для API. Это позволит клиентским приложениям делать запросы к этому API:
Python
Скопировать код
```
 from django.urls import path
 from .views import task_list

 urlpatterns = [
     path('api/tasks/', task_list, name='task_list'),
 ]
```
Этот маршрут связывает URL `/api/tasks/` с представлением `task_list`.
Подключение фронтенда к Django: В файле urls.py проекта добавьте маршрут для обслуживания React-приложения. Это позволит Django обслуживать статические файлы, созданные Webpack:
Python
Скопировать код
```
 from django.urls import path, include
 from django.views.generic import TemplateView

 urlpatterns = [
     path('tasks/', TemplateView.as_view(template_name='index.html')),
     path('', include('tasks.urls')),
 ]
```
Этот маршрут связывает URL `/tasks/` с шаблоном `index.html`, который будет содержать корневой элемент для React-приложения.
Создание шаблона для React: В папке templates создайте файл index.html, который будет использоваться для отображения React-приложения:
HTML
Скопировать код
```
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Task List</title>
 </head>
 <body>
     <div id="root"></div>
     <script src="{% static 'frontend/main.js' %}"></script>
 </body>
 </html>
```
Этот шаблон содержит корневой элемент `div` с идентификатором `root`, в который React будет монтировать своё приложение, и скрипт для загрузки собранного файла `main.js`.

Теперь у вас есть базовое приложение на Django с интеграцией React, которое позволяет создавать и отображать список задач. Вы можете расширять его, добавляя новые функции и улучшая интерфейс. Удачи в разработке! 🚀