Как сделать простые типовые, часто встречающиеся задачи в web приложении на React JS
При написании web приложений, интерфейса часто приходится решать типовые задачи по управлению элементами на форме, скрывать, делать не доступными, фильтрации, поиски, сортировки и др. Изучая React JS я начал подготавливать библиотеку подобных решений, её и представлю ниже. Как это работает человеку, изучающему React будет понятно на примерах, которые выложены на GitHub.
Ссылка на работающее приложение на GitHub
В каждом примере есть ссылка на исходный код. Примеры можно использовать как отправную точку для написания прикладной задачи. Перечень примеров по возможности буду расширять.
Сейчас сделаны примеры для:
Из каждого примера есть ссылка на исходный код.
Проект можно загрузить и запустить локально:
npm install
npm run dev
Материал:
React Js
При написании web приложений, интерфейса часто приходится решать типовые задачи по управлению элементами на форме, скрывать, делать не доступными, фильтрации, поиски, сортировки и др. Изучая React JS я начал подготавливать библиотеку подобных решений, её и представлю ниже. Как это работает человеку, изучающему React будет понятно на примерах, которые выложены на GitHub.
Ссылка на работающее приложение на GitHub
В каждом примере есть ссылка на исходный код. Примеры можно использовать как отправную точку для написания прикладной задачи. Перечень примеров по возможности буду расширять.
Сейчас сделаны примеры для:
- Как скрывать, делать не доступными элементы на форме
- Редактирование данных в таблице
- Просмотр данных в таблице и редактирование в отдельной форме
- Фильтр в элементе Select – аналог autocomplete
- Выделение записи в Таблице
- ComboBox с ИД, как правило при выборе элемента в элементе Select нужен его ИД в приложении
- Фильтр в Таблице
- Сортировка в Таблице
Из каждого примера есть ссылка на исходный код.
Проект можно загрузить и запустить локально:
npm install
npm run dev
Материал:
React Js
Комментарии (6)
ookami_kb
15.01.2018 20:48Для оформления примеров можно использовать что-нибудь вроде https://storybook.js.org/ – и примеры кода вместе с результатом наглядно разместить можно, и выглядит неплохо.
Но для начала надо код в порядок привести, потому что сейчас это просто набор bad practices. Например, так делать не стоит. Если новое состояние зависит от старого, то обновлять его надо функцией. Вот тут можно обойтись простым map'ом, зачем сначала это в массив загонять? А вот здесь у вас начальное значение в селекте выбрано, но в
id=– пусто. И кстати, последняя ссылка все равно не откроется, лучше уж настроить router, чтобы он использовалHashRouter– не так красиво, но хоть работать будет. Ну и т.д.
aavezel
Нет главного: есть стек из React+webpack+...+...+… Как мне поставить всё разом, запустить с первого раза без бубнов и потом ничего не удалять…
frol
Если я правильно понял ваш вопрос, то посмотрите на Next.js.
arylkov Автор
Вы хотите локально примеры запустить?