Именование компонентов

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

Принципы именования

  1. Использование PascalCase для компонентов Все React-компоненты в Chakra UI должны называться в PascalCase, например:

    import { Box, Button, Flex } from "@chakra-ui/react";

const ProfileCard = () => (
  <Box p={4} borderWidth="1px" borderRadius="lg">
    <Flex alignItems="center">
      <Avatar name="John Doe" />
      <Box ml={3}>
        <Text fontWeight="bold">John Doe</Text>
        <Text fontSize="sm">Developer</Text>
      </Box>
    </Flex>
  </Box>
);

    Такое именование отличает компоненты от обычных функций и переменных, упрощая понимание структуры приложения.

  2. Семантические имена вместо визуальных Имена компонентов должны отражать их роль или смысл, а не внешний вид. Например:

    const Card = () => <Box shadow="md" p={4}>...</Box>;
const ModalContent = () => <Box>...</Box>;

    Использование таких имен упрощает рефакторинг и переиспользование, поскольку визуальные атрибуты могут меняться без изменения имени.

  3. Суффиксы и префиксы для уточнения назначения Для компонентов с определённой функцией часто применяют суффиксы:

    • ButtonPrimary, ButtonSecondary — разновидности кнопок.
    • InputText, InputPassword — разновидности полей ввода. Это помогает быстро определить тип и назначение компонента без просмотра его содержимого.

Именование системных и кастомных компонентов

  1. Компоненты Chakra UI Встроенные компоненты Chakra UI (Box, Flex, Text) не требуют переименования, их имена уже семантически понятны. При необходимости расширения лучше использовать композицию, а не переименование:

    const CardContainer = (props) => <Box p={6} shadow="lg" {...props} />;

  2. Кастомные компоненты Создавая свои компоненты на основе Chakra UI, придерживаются следующих правил:

    • PascalCase
    • Семантика (отражает роль)
    • Суффиксы для вариаций
    const ProfileAvatar = ({ name }) => (
  <Avatar name={name} size="lg" />
);

const ProfileCardPrimary = () => (
  <Box p={4} borderWidth="1px">
    <ProfileAvatar name="John Doe" />
  </Box>
);

  3. Использование алиасов при импорте В больших проектах часто используют алиасы для удобства:

    import { Box as Container, Text as Label } from "@chakra-ui/react";

    Это помогает избежать конфликтов имен и улучшает структурированность кода.

Нейминг для хуков и стилей

  1. Хуки Chakra UI Встроенные хуки (useDisclosure, useToast, useMediaQuery) сохраняют camelCase. При создании кастомных хуков рекомендуется следовать аналогичной схеме:

    const useProfileCard = () => {
  const [isOpen, setIsOpen] = useState(false);
  return { isOpen, setIsOpen };
};

  2. Стили и темы При работе с темами (theme) и стилями именуют семантически и иерархично:

    const theme = extendTheme({
  components: {
    Button: {
      variants: {
        primary: { bg: "blue.500", color: "white" },
        secondary: { bg: "gray.200", color: "black" },
      },
    },
  },
});

    Такой подход упрощает поиск нужного стиля и настройку новых вариантов.

Практические рекомендации

  • Компонент → один функциональный блок. Каждый компонент должен решать одну задачу или визуально выделенную часть интерфейса.

  • Проверка читаемости. Имена должны быть понятны без комментариев.

  • Единый стиль в проекте. Определить правила именования для всех разработчиков:

    • PascalCase для компонентов
    • camelCase для переменных и хуков
    • Семантические имена для компонентов и стилей

  • Не использовать сокращения без необходимости. Btn лучше заменить на Button, Txt — на Text.

Пример комплексной структуры

// components/Profile/ProfileCard.js
import { Box, Flex, Avatar, Text } from "@chakra-ui/react";

const ProfileAvatar = ({ name }) => <Avatar name={name} size="lg" />;

const ProfileCard = ({ user }) => (
  <Box p={4} borderWidth="1px" borderRadius="lg">
    <Flex alignItems="center">
      <ProfileAvatar name={user.name} />
      <Box ml={3}>
        <Text fontWeight="bold">{user.name}</Text>
        <Text fontSize="sm">{user.role}</Text>
      </Box>
    </Flex>
  </Box>
);

export default ProfileCard;

В этом примере соблюдены все рекомендации: компоненты имеют семантические имена, структура читаема, и каждый блок выполняет определённую функцию, что облегчает поддержку и масштабирование.

Эта система именования формирует чёткую архитектуру проекта, улучшает читаемость и совместимость с Chakra UI, а также позволяет поддерживать согласованный стиль кода в больших приложениях.

Оглавление