Теги: React.js

MobX — управление состоянием приложения

MobX — это проверенная в боевых условиях библиотека, которая делает управление состоянием простым и масштабируемым за счет прозрачного применения функционального реактивного программирования (TFRP). Философия MobX проста — все, что может быть получено из состояния приложения, должно быть получено автоматически.

Магазин на JavaScript, часть 10 из 19. Маршруты, панель навигации, контекст приложения

В React имеется своя система маршрутизации, которая позволяет сопоставлять запросы к приложению с определенными компонентами. Ключевым звеном в работе маршрутизации является модуль react-router, который состоит из react-router-dom и react-router-native. Для браузерных приложений предназначен модуль react-router-dom.
Теги: BackendExpress.jsFrontendJavaScriptNode.jsORMReact.js

Магазин на JavaScript, часть 9 из 19. Рейтинг товара, приложение клиента, структура проекта

Теперь разберемся с рейтингами товаров. Голосовать за товары могут только зарегистрированные пользователи. Пользователь может проголосовать за товар только один раз. Рейтинг товара вычисляется как сумма оценок, поделенная на количество голосований. Как обычно, создаем новые маршруты, контроллер и модель.
Теги: BackendExpress.jsFrontendJavaScriptNode.jsORMReact.js

Магазин на JavaScript, часть 8 из 19. Работа со свойствами товара и корзиной покупателя

Сейчас работать со свойствами товара не слишком удобно. Если нам надо добавить новое свойство, отредактировать или удалить существующее, надо обновить товар целиком. Тогда все старые свойства товара будут удалены, а новые добавлены. Давайте это исправим, чтобы со свойствами товаров можно было работать точечно…
Теги: BackendExpress.jsFrontendJavaScriptNode.jsORMReact.js

Магазин на JavaScript, часть 7 из 19. Регистрация и авторизация, права пользователей, тесты

Для работы с JWT-токенами нам потребуется пакет jsonwebtoken, чтобы создавать и проверять токены. Чтобы хэшировать пароли пользователей, а не хранить их в базе данных в открытом виде, нужно установить пакет bcrypt. Реализуем методы контроллера, которые отвечают за регистрацию и авторизацию пользователя.
Теги: BackendExpress.jsFrontendJavaScriptNode.jsORMReact.js

Магазин на JavaScript, часть 6 из 19. Пагинация, свойства товара, JWT (JSON Web Token)

Товаров в каталоге может быть много и показывать их все на одной странице — плохая идея. Так что давайте заложим возможность запрашивать только часть товаров. Клиент может добавить GET-параметры limit (количество товаров на странице) и page (товары какой страницы возвращать). Sequelize предоставляет в наше распоряжение…
Теги: BackendExpress.jsFrontendJavaScriptNode.jsORMReact.js

Магазин на JavaScript, часть 5 из 19. Создание моделей, фильтрация по категрии и бренду

Сейчас получилось так, что контроллер выполняет работу модели шаблоне MVC (Model-View-Controller), а моделей у нас и вовсе нет. Давайте исправим это упущение и создадим в директории models файлы моделей Product.js, Category.js, Brand.js и User.js. Модели реализуют бизнес-логику приложения и взаимодействуют с базой данных.
Теги: BackendExpress.jsFrontendJavaScriptNode.jsORMReact.js

Магазин на JavaScript, часть 4 из 19. CRUD для категорий и товаров, загрузка изображений

Хорошо, теперь нам нужно реализовать все методы всех контроллеров, чтобы можно было создавать, обновлять, удалять и получать товары, категории, бренды и пользователей. Здесь нам поможет документация ORM-библиотеки Sequelize и ее методы create, update, save, destroy, reload, findOne, findByPk, findAll.
Теги: BackendExpress.jsFrontendJavaScriptNode.jsORMReact.js

Магазин на JavaScript, часть 3 из 19. Добавляем классы контроллеров, обработка ошибок

Сейчас функции, которые обрабатывают HTTP-запросы от клиента, расположены прямо в роутере. Но это задача контроллера, которых у нас будет несколько — для товаров, категорий, брендов и пользователей. Создаем директорию controllers и внутри нее — файлы Product.js, Category.js, Brand.js и User.js.
Теги: BackendExpress.jsFrontendJavaScriptNode.jsORMReact.js

Магазин на JavaScript, часть 2 из 19. Обрабатываем HTTP запросы, добавляем маршруты

Сервер работает, но если мы попробуем открыть в браузере страницу localhost:7000, то получим ошибку «Cannot GET /». Нужно указать серверу, какие endpoint обрабатывать и что делать при поступлении GET, POST, PUT и DELETE запросов. Так что открываем на редактирование файл index.js…
Теги: BackendExpress.jsFrontendJavaScriptNode.jsORMReact.js
Каталог оборудования
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Производители
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Функциональные группы
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.