Статьи

Как создать приложение CRUD, используя React и Django

В этом уроке мы собираемся создать приложение CRUD для хранения книг с помощью React и Django . CRUD расшифровывается как Create, Read, Update и Delete, поэтому в основном это приложение будет работать как библиотечная полка, где мы можем взглянуть на данные каждой книги, которые можно изменять по своему усмотрению или необходимости.

Используемые технологии

Для этого приложения мы будем использовать два очень популярных решения для создания пользовательских интерфейсов и API. Пользовательский интерфейс приложения будет построен с использованием React — для этого урока не требуется предварительное знание React.

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

Мы будем строить приложение в три этапа:

1. Создание внешнего интерфейса в React

2. Создание API в Django 

3. Соединение внешнего интерфейса с API

Начало работы: настройка среды разработки

Для этого урока мы будем использовать Eclipse IDE с установленным плагином CodeMix  . Тем не менее, не стесняйтесь следовать в любой IDE, которая поддерживает разработку как React, так и Python.

  • Загрузите Eclipse IDE здесь
  • CodeMix можно установить с торговой площадки Eclipse или через genuitec.com .
  • Если пакет React еще не установлен, установите его с помощью браузера расширений CodeMix (Справка> Расширения CodeMix). Его также можно установить прямо с торговой площадки Eclipse.

Если вы ищете IDE для разработки с такими фреймворками, как Angular, React и Vue.js, или с такими языками, как Python и Rust, CodeMix поможет вам. Codemix совместим со всеми IDE и инструментами на основе Eclipse, такими как MyEclipse , Spring Tools Suite и JBoss Tools.

Кроме того, нам нужно установить Python в нашей системе, поэтому давайте удостоверимся, что он установлен правильно. Его можно скачать здесь .

Создание внешнего интерфейса в React

Мы создадим наше приложение React с помощью мастера CodeMix.

Чтобы создать приложение, выберите « Файл»> «Создать»> «Проект»> «CodeMix»> «Реактировать проект».

В появившемся диалоговом окне введите response-book-app  в качестве имени приложения, затем нажмите «Готово».

Создать приложение React

Структура папок для вашего нового приложения реакции, созданного CodeMix, будет выглядеть следующим образом:

Структура папок

Дополнительные пакеты

Как видно из структуры папок, папка node_modules отсутствует. Следовательно, нам нужно установить пакеты узлов. Используя Terminal + , запустите:

npm install

Мы будем использовать bootstrap и fontawesome для некоторых дополнительных стилей и для некоторых иконок.

Добавьте следующее в раздел <head> в src / index.js :


HTML