Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lukasandreano/vkma-boilerplate
Стартовый кит (шаблон) для создания сервиса на платформе VK Mini Apps.
https://github.com/lukasandreano/vkma-boilerplate
react react-router recoil swipeback vite vkma vkminiapps vkui
Last synced: about 1 month ago
JSON representation
Стартовый кит (шаблон) для создания сервиса на платформе VK Mini Apps.
- Host: GitHub
- URL: https://github.com/lukasandreano/vkma-boilerplate
- Owner: LukasAndreano
- License: mit
- Created: 2022-04-27T16:40:44.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-10-21T06:24:47.000Z (2 months ago)
- Last Synced: 2024-10-21T09:17:39.188Z (2 months ago)
- Topics: react, react-router, recoil, swipeback, vite, vkma, vkminiapps, vkui
- Language: JavaScript
- Homepage: https://lukasandreano.github.io/vkma-boilerplate/
- Size: 667 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Шаблон для создания сервиса на платформе VK Mini Apps
### Краткое описание
Это стартовый кит (шаблон) для создания сервиса на платформе [VK Mini Apps](https://vk.com/services).
Цель этого кита - ускорить создание сервисов, которые не требуют отдельных UI-компонентов.
Используемые в технологии / библиотеки / фреймворки:
- [React](https://reactjs.org/)
- [Recoil](https://recoiljs.org/)
- [VKMA Router](https://github.com/reyzitwo/react-router-vkminiapps)
### ⚙️ Начало работы
Склонируйте репозиторий в нужную вам директорию:
```bash
git clone https://github.com/LukasAndreano/vkma-boilerplate.git
```
Установите зависимости и запустите приложение:
```bash
cd
yarn
yarn dev
```
Далее перейдите в **настройки** сервиса и в адресе разработки (web & mvk) укажите:
```
http://localhost:3000
```
### 💡 Принцип работы со стейтом (Recoil)
Каждая группа должна содержать свой атом _(storage/atoms/.js)_, который не будет выходить за рамки этой группы или, в крайнем случае, только для модалок.
Пример атома в _(storage/atoms/main.js)_
### 📚 Как работать с группами (панелями/экранами)
У каждой группы есть своя директория в _panels_, например: _panels/home_.
В группах присутствует главный экран - _{panelName}.js_ и другие дополнительные: _anyScreenName.js_.
В каждом компоненте могут присутствовать блоки, которые необходимо вынести в отдельный компонент, чтобы сохранить нормальную логическую структуру и не перегрузить этот самый компонент.
Названия таких компонентов должно начинаться с маленькой буквы. Например: usersStatistic.js.
Также присутствуют общие группы _(в components)_ со следующими названиями:
- \_\_global
- \_\_navigation
Модалки не привязаны к общим группам и имеют свою собственную директорию в _modals_.
Все эти разделы содержат в себе основные для работы приложения компоненты: навигация, а также **глобальные компоненты** (компоненты, которые могут быть переиспользованы n-ное количество раз в абсолютно разных частях приложения без привязки к группе компонентов).
### 📺 Модалки
Для создания модальных страниц _(ModalPage)_ используется специальный конструктор: **ModalConstructor**, а для модальных карточек _(ModalCard)_: **CardConstructor**.
Применение ModalConstructor:
```javascript
Любой children
```
Применение CardConstructor:
```javascript
}
>
Любой children
```