https://github.com/react-declarative/list-app-mobx

The List Component advanced example with Mobx state management
https://github.com/react-declarative/list-app-mobx

mobx mobx-react react react-declarative

Last synced: 25 days ago
JSON representation

The List Component advanced example with Mobx state management

• Host: GitHub
• URL: https://github.com/react-declarative/list-app-mobx
• Owner: react-declarative
• Created: 2021-09-04T14:14:19.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-12-24T14:29:51.000Z (almost 3 years ago)
• Last Synced: 2024-05-04T00:17:51.405Z (8 months ago)
• Topics: mobx, mobx-react, react, react-declarative
• Language: TypeScript
• Homepage:
• Size: 1.46 MB
• Stars: 6
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-declarative

> Пример архитектуры React + Mobx приложения

## Поддержать проект

> [!IMPORTANT]

> Сделано с использованием [react-declarative](https://github.com/react-declarative/react-declarative), чтобы решить ваши проблемы. **⭐Star** and **💻Fork** будет крайне полезен

# Описание

В комплекте система сервисов, взаимодействующих через композицию. Она позволяет переслать пользователя на отдельную страницу нехватке прав доступа или ошибке. Также реализована инъекция токена в заголовки запросов после авторизации. Блокировка роутинга при несохраненных изменениях. Пагинация, сортировка, фильтры. Отображение списочной формы и формы элемента списка. Прочее.

# Запуск

```

npm install

npm start

npx open-cli http://localhost:3000/

```

# Скриншоты

## Списочная форма

> Форма элемента списка наглядно демонстрирует вывод элементов из CRUD c передачей параметров в GET запросе для сортировки, фильтрации, пагинации

![list](./docs/list.png)

## Форма элемента списка

> Форма элемента списка открывается по клику на элемент списка или кнопке "+" в правом верхнем углу. При несохраненных данных роутинг блокируется

![one](./docs/one.png)