⚛ Создание UI-компонентов React на продвинутом уровне

React — хорошая библиотека. Так давайте сделаем ее еще лучше, создавая многоразовые компоненты на высокопрофессиональном уровне.

Для использования этого руководства достаточно базовых знаний о React, TypeScript и Tailwind CSS.

В качестве примера поработаем с button, но принципы, которым будем следовать здесь, применимы к любому HTML-тегу.

const Button = ({children, className}) => {
return (
<button className={className}>{children}</button>
)
}

Приведенный выше код работает, но что, если понадобится ввести ARIA (accessible rich internet application attribute — доступные полнофункциональные интернет-приложения), ссылки или любые другие свойства обычного тега button?

Можно просто добавить больше свойств и на этом закончить.

const Button = ({children, className, ref, type}) => {
return (
<button className={className} ref={ref} type={type}>{children}</button>
)
}

Это одно из решений, но оно не эффективно. Чтобы сделать его более действенным, поработаем с TypeScript и React. Быстро создать проект с использованием React и TypeScript поможет документация Vite.

Первым шагом будет импорт необходимых типов из React и создание интерфейса для свойств кнопки (button).

📌 Продолжение

@react_tg