Р
Привет! В какой-то из презентаций bem-react был наглядный слайд лучшей практики категоризации компонент на файловой структуре (типа Pages/Components/...). Напомните пожалуйста
предположу, что тут: https://github.com/awinogradov/aviasales
Size: a a a
2019 August 27
SB
Поделитесь пожалуйста примом синглтона на ibemjs с подпиской на события и способом эти события вызывать из других блоков
Делаешь статический метод у блока:
Если это bem-dom
то в
getInstance() { return this._instance || (this._instance = this.create())}Если это bem-dom
то в
js : { inited } записываешь в статическое свойство ссылку this.__self._instance = this есть различные кейсы как сделать2019 August 28
EW
Привет! В какой-то из презентаций bem-react был наглядный слайд лучшей практики категоризации компонент на файловой структуре (типа Pages/Components/...). Напомните пожалуйста
Я использую примерно такую структуру:
* features — Фичи проекта (могут содержать компоненты которые характерны только для этой фичи, бизнес-логика, модели,страниц тут не должно быть)
* components — Общие компоненты, которые могут быть реиспользованы где-то ещё (никакой бизнес логики, никаких редаксов)
* pages — итоговые страницы, которые используют фичи и компоненты
* features — Фичи проекта (могут содержать компоненты которые характерны только для этой фичи, бизнес-логика, модели,страниц тут не должно быть)
* components — Общие компоненты, которые могут быть реиспользованы где-то ещё (никакой бизнес логики, никаких редаксов)
* pages — итоговые страницы, которые используют фичи и компоненты
V
Я использую примерно такую структуру:
* features — Фичи проекта (могут содержать компоненты которые характерны только для этой фичи, бизнес-логика, модели,страниц тут не должно быть)
* components — Общие компоненты, которые могут быть реиспользованы где-то ещё (никакой бизнес логики, никаких редаксов)
* pages — итоговые страницы, которые используют фичи и компоненты
* features — Фичи проекта (могут содержать компоненты которые характерны только для этой фичи, бизнес-логика, модели,страниц тут не должно быть)
* components — Общие компоненты, которые могут быть реиспользованы где-то ещё (никакой бизнес логики, никаких редаксов)
* pages — итоговые страницы, которые используют фичи и компоненты
А можно скрин структуры папок? Хоть одним глазком увидеть эту красоту
EW
src
├── App.tsx
├── features
│ ├── notifications
│ │ ├── api.ts
│ │ ├── components
│ │ │ ├── GroupForm
│ │ │ │ ├── GroupForm.const.ts
│ │ │ │ ├── GroupForm.tsx
│ │ │ │ ├── GroupForm.validator.ts
│ │ │ │ └── index.ts
│ │ ├── index.ts
│ │ └── types.ts
├── index.css
├── index.tsx
├── lib
│ ├── history.ts
├── routes.tsx
├── pages
│ ├── home
│ │ ├── HomePage.model.ts
│ │ ├── HomePage.tsx
│ │ └── index.ts
└── ui
├── components
│ ├── Button
│ │ ├── Button.css
│ │ └── Button.tsx
│ └── index.ts
└── templates
├── Content
│ ├── Content.css
│ └── Content.tsx
└── index.ts
EW
Если есть платформы, то использую новую нотацию, например
Button@desktop.tsxEW
Все страницы соответствуют реальным роутам —
pages/home — /, pages/services/create — /services/createMK
Наглядно, спасибо!
A
src
├── App.tsx
├── features
│ ├── notifications
│ │ ├── api.ts
│ │ ├── components
│ │ │ ├── GroupForm
│ │ │ │ ├── GroupForm.const.ts
│ │ │ │ ├── GroupForm.tsx
│ │ │ │ ├── GroupForm.validator.ts
│ │ │ │ └── index.ts
│ │ ├── index.ts
│ │ └── types.ts
├── index.css
├── index.tsx
├── lib
│ ├── history.ts
├── routes.tsx
├── pages
│ ├── home
│ │ ├── HomePage.model.ts
│ │ ├── HomePage.tsx
│ │ └── index.ts
└── ui
├── components
│ ├── Button
│ │ ├── Button.css
│ │ └── Button.tsx
│ └── index.ts
└── templates
├── Content
│ ├── Content.css
│ └── Content.tsx
└── index.ts
спасибо!
V
src
├── App.tsx
├── features
│ ├── notifications
│ │ ├── api.ts
│ │ ├── components
│ │ │ ├── GroupForm
│ │ │ │ ├── GroupForm.const.ts
│ │ │ │ ├── GroupForm.tsx
│ │ │ │ ├── GroupForm.validator.ts
│ │ │ │ └── index.ts
│ │ ├── index.ts
│ │ └── types.ts
├── index.css
├── index.tsx
├── lib
│ ├── history.ts
├── routes.tsx
├── pages
│ ├── home
│ │ ├── HomePage.model.ts
│ │ ├── HomePage.tsx
│ │ └── index.ts
└── ui
├── components
│ ├── Button
│ │ ├── Button.css
│ │ └── Button.tsx
│ └── index.ts
└── templates
├── Content
│ ├── Content.css
│ └── Content.tsx
└── index.ts
теперь бы увидеть что внутри
src/features/notifications/components, pages/home/homePage что то до меня не все доходит2019 August 29
EW
HomePage:
import React, { FC, useEffect } from 'react';
import { useStore } from 'effector-react';
import { useMatch } from 'lib/react-router-hooks';
import { ContentTemplate } from 'ui/templates';
import { Loader, Box, RouterLink, Heading, List, RouterButton } from 'ui/components';
import { $services, pageMounted } from './HomePage.model';
export const HomePage: FC = () => {
const { url } = useMatch();
const { status, list } = useStore($services);
useEffect(() => {
pageMounted();
}, [url]);
return (
<ContentTemplate>
<Box>
<Heading level={1}>Список сервисов</Heading>
<RouterButton to="/service/create" theme="normal" size="n" view="default" tone="default">
Добавить новый сервис
</RouterButton>
</Box>
<Box>
<Loader fetching={status === 'loading'}>
<List
items={list.map(({ id }) => (
<RouterLink theme="normal" to={`/service/${id}`}>
{id}
</RouterLink>
))}
/>
</Loader>
</Box>
</ContentTemplate>
);
};EW
Внутри
src/features/notifications/components компоненты свойственные только для фичи нотификаций, т.к. их нигде нельзя больше реиспользовать, поэтому они там, как только такая необходимость появится (реиспользование), можно будет вынести в ui/components, либо использовать из фичиAY
@yarastqt Чтобы сгенерировать врапперы для модификаторов, у которых нет TSX реализации, будет ли достаточно такого скрипта?
https://gist.github.com/zxqfox/764e5ad976ee2e0b1f98240b9e79b9e1
https://gist.github.com/zxqfox/764e5ad976ee2e0b1f98240b9e79b9e1
EW
Выглядит как да, только нужно учесть, что могут быть булевые модификаторы
V
HomePage:
import React, { FC, useEffect } from 'react';
import { useStore } from 'effector-react';
import { useMatch } from 'lib/react-router-hooks';
import { ContentTemplate } from 'ui/templates';
import { Loader, Box, RouterLink, Heading, List, RouterButton } from 'ui/components';
import { $services, pageMounted } from './HomePage.model';
export const HomePage: FC = () => {
const { url } = useMatch();
const { status, list } = useStore($services);
useEffect(() => {
pageMounted();
}, [url]);
return (
<ContentTemplate>
<Box>
<Heading level={1}>Список сервисов</Heading>
<RouterButton to="/service/create" theme="normal" size="n" view="default" tone="default">
Добавить новый сервис
</RouterButton>
</Box>
<Box>
<Loader fetching={status === 'loading'}>
<List
items={list.map(({ id }) => (
<RouterLink theme="normal" to={`/service/${id}`}>
{id}
</RouterLink>
))}
/>
</Loader>
</Box>
</ContentTemplate>
);
};Супер. Спасибо. Обязательно попробую так же.
Выглядит здраво
Выглядит здраво
AP
Привет. Юзаю BEM в очень простом варианте (только нейминг классов).
Хотелось бы найти общий туториал в котором будет рассказано как происходит разбивка по платформам, как ризбиваются сложные компоненты (см. пример ниже), по связки реакта с бемом (с примерами), что по поводу white papper.
Пример сложной комопненты:
<div class="product">
<div class="product__comments-list">
<div class="product__comment">
<div class="product__comment-author">...</div>
...
<div class="product__comment-answer>
<div class="product__comment-answer-author">...</div>
</div>
</div>
</div>
</div>
Я знаю что есть туториал на сайте BEM. Но может туториал по-лучше или в виде видео.
Хотелось бы найти общий туториал в котором будет рассказано как происходит разбивка по платформам, как ризбиваются сложные компоненты (см. пример ниже), по связки реакта с бемом (с примерами), что по поводу white papper.
Пример сложной комопненты:
<div class="product">
<div class="product__comments-list">
<div class="product__comment">
<div class="product__comment-author">...</div>
...
<div class="product__comment-answer>
<div class="product__comment-answer-author">...</div>
</div>
</div>
</div>
</div>
Я знаю что есть туториал на сайте BEM. Но может туториал по-лучше или в виде видео.