Home

---

Работа с React компонентами

---

Что такое Component и с чем его едят?

---

Основной конструкционной единицей в React считается Component.

Компонентом является функция, возвращающая JSX элемент, который в последствии явно пригодится использовать еще раз, или же который явно можно отделить от другой части сайта, не потеряв целостности самого сайта.

Важно:

---

Всё что не связано напрямую с текущим контекстом ДОЛЖНО БЫТЬ выделено в отдельный компонент.

Пример:

---

В компоненте Header нельзя располагать Home, About и тп ссылки, т.к. компонент заголовка никак не связан с текстом Home, About, все ссылки и текст ДОЛЖНЫ быть вынесены в аргументы.

Допускается иметь компонент, MainHeader, который использует компонент навигация как layout и передаёт в него наши ссылки. Которые желательно должны находится в какой-то сущности типа ПутиНавигации

Расположение компонентов

---

Под компоненты следует выделять отдельную папку components.
Каждый компонент также в свою очередь является папкой, состоящий из:

• Component.tsx самого компонента • Component.props.tsx компонента (об этом позже) • файл Component.styles.css / Component.styles.sass / Component.styles.scss, любой другой PostCss (при необходимости)

Пример:

---

• src
  • components
    • Button
      • Button.props.tsx
      • Button.tsx
    • Card
      • Card.tsx
      • Card.props.tsx
    • Header
      • Header.tsx
      • Header.props.tsx

Важно:

---

Компоненты, как и файлы этих компонентов, следует называть с большой буквы. Пример:

• Назначение компонента: Кнопка в обычном дефолтном варианте
• Название папки компонента: Button
• Название файла компонента: Button.tsx
• Название файла пропсов компонента: Button.props.tsx
• Название файл стилей компонентов: Button.styles.css

---

Issue

---

Порядок работы над задачей:

---

Перетащил issue в “in progress”	Открыл pull request >	Команда сделала ревью
v	^	v
Решил issue >	Перетащил в “in review”	Перетащил в “done”

Важно:

---

• При открытии PR ставим в assignee того, кто выполнил таску (то есть ты сам) • Название PR сохраняет стиль нейминга как у коммитов в ветках (т.е. part_of_code type_of_commit: what_was_done )

Про разработку

• не рекомендую писать css, он будет в большом объёме мной браковаться, точнее отправляться на исправление
• если вы считаете, что вы не бог css, то не реккомендую его использовать

переходите на tailwind ❤️

---

• Обязательно пишите сторис на любые компоненты, если сторис нет, то компонент также отправляется на исправление

---

• Используйте линтер, как минимум пока-что форматтер,

Story

---

Зачем нам stories?

---

Когда мы разрабатываем приложение, мы зачастую хотим его паралелльно отлаживать от банальных ошибок (особоенно фронт), а вставлять элементы в index.tsx мы не хотим. И тут у нас появляется StoryBook, он умеет:

• В real time показывать изменения отдельного компонента
• Структурировать наши компоненты

P.S плюс без сторис вас буду пинать сначала я, а потом Никита, так что да...

Как мы работаем со stories?

---

берем, копируем шаблон

import {Meta, StoryObj} from "@storybook/react";
import NameOfCcomponent from "@/components/NameOfCcomponent/index";
import Props from "./NameOfCcomponent.props";
import ImportedDefaultUseCaseFromFile from './NameOfCcomponent.usecase.tsx'

const meta: Meta<Props> = {
    component: NameOfCcomponent,
}

export default meta;

type Story = StoryObj<Props>;

export const Default: Story = {
    args: {
        // здесь все props из Props принимают свои значения
        title: 'Я Такой молодей, вы бы знали',
        description: 'ГООООООЛ'
        
        или же 
        
        ...ImportedDefaultUseCaseFromFile
    },
}
// здесь можно написаь еще шаблонов
export const NameOfStoryInStoryBook: Story = {
    args: {
        // здесь все props из Props принимают свои значения
        ...ImportedUseCaseFromFile
    },
}

Важно

---

• Правилом хорошего тона является создание файла NameOfComponent.usecase.tsx, куда выносится подстановка значений в props
• Больше при работе вряд ли понадобится, если же вдруг такое происходит, можете написать @ADmiOK или почитать документацию.