С помощью WebStorm на языке программирования JavaScript Meteor я создала приложение ToDoList. Сначала скачаем саму программу WebStorm.
Потом получаем доступ командной строке Windows с помощью команды cmd. Там устанавливаем сначала Chokolatey, а потом Meteor.
Потом создадим новый проект, выбрав формат Meteor App.
Затем мы создаем фундамент приложения. Мы делаем это с помощью изменения файлов imports/ui/App.js ; imports/ui/Task.js , client/main.js . Именно main.js отвечает за работу приложения и его внешний вид, а task.js и app.js — за его отдельные функции. Но сначала запустим приложение:
Итак, сначала мы запустим наше приложение. Вот так оно будет выглядеть пока в браузере:
Пока выглядит не слишком красиво. Чтобы начать работать с React в качестве библиотеки представлений, сначала нужно добавить соответствующие пакеты npm. Для этого откроем новый терминал в том же каталоге, что и запущенное приложение, введем «meteor npm install —save react react-dom» и получаем:
Чтобы остановить обработку файлов .html, как шаблонов Blaze, удалим пакет blaze-html-templates:
Чтобы гарантировать, что файлы .html обрабатываются, как статический HTML, добавим пакет static-html:
Теперь необходимо заменить стартовый код (то, о чем я говорила ранее). Начнем с файла client/main.html. Теперь его код будет выглядеть так:
Теперь перейдем к файлу client/main.js . Теперь его код выглядит так:
Теперь создадим новую папку imports, внутри которой создадим папку ui. Создадим файл imports/ui/App.js. Теперь код этого файла выглядит так:
Настала очередь файлаimports/ui/Task.js. Создадим его и введем следующий код:
Итак, мы создали фундамент приложения с помощью изменения файлов imports/ui/App.js ; imports/ui/Task.js , client/main.js . Теперь приложение в браузере выглядит вот так, значительно лучше, но все еще не слишком красиво:
Теперь сделаем наш Список Задач более привлекательным. Для этого в client / main.css введем новый код:
Теперь наш Список Задач стал смотреться визуально более эстетично:
Теперь пойдем к созданию Коллекции. Чтобы создать коллекцию, определим новый модуль import / api / tasks.js, который создает коллекцию Mongo и экспортирует ее. Для нам потребуется вставить код в файл imports/api/tasks.js, предварительно создав и сам файл, и папку для него:
Теперь импортируем модуль import / api / tasks.js в server / main.js. При импорте import / api / tasks.js на сервере создается коллекция MongoDB и настраивается система передачи данных клиенту.
Чтобы использовать данные из коллекции Meteor внутри компонента React, воспользуемся response-meteor-data:
Предметы внутри коллекций называются документами. Воспользуемся консолью базы данных сервера, чтобы вставить некоторые документы в коллекцию. Пока приложение работает, на новой вкладке терминала перейдем в каталог приложения и введем meteor mongo:
Теперь введем в открывшейся командной строке следующий код:
Теперь добавим поле ввода для пользователей, чтобы добавить задачи в список. После этого наше приложение будет иметь следующий итоговый вид:
С помощью созданного приложения можно вносить задачи, отмечать их как завершенные, а также удалять.
TheMoonDoll357 