Ответ
Основной стек: React 18 с TypeScript.
Ключевые библиотеки и инструменты:
- Управление состоянием: Redux Toolkit
- UI-компоненты: Material-UI (MUI)
- Маршрутизация: React Router v6
- HTTP-клиент: Axios
- Сборка: Webpack
- Качество кода: ESLint и Prettier
Пример функционального компонента на TypeScript:
import React from 'react';
import { Button } from '@mui/material';
interface MyButtonProps {
label: string;
}
const MyButton: React.FC<MyButtonProps> = ({ label }) => {
return <Button variant="contained">{label}</Button>;
};
export default MyButton;Почему этот стек? TypeScript повышает надежность за счет статической типизации, Redux Toolkit упрощает работу с глобальным состоянием, а MUI ускоряет разработку готовыми, доступными компонентами.
Ответ 18+ 🔞
А, ну вот, смотри, классика жанра, блядь. Опять эти ребята с фронтенда собрали свой стандартный конструктор для лего-домика. Ну, в целом, ничего так, рабочий набор, хотя и предсказуемый, как моя тоска в понедельник утром.
Основной костяк, на котором всё держится: Реакт восемнадцатый, да ещё и в модных типскриптовых штанах. Без этого сейчас — вообще никуда, а то накосячишь с пропсами, а тебе потом всю ночь дебажить, ебать мои старые костыли.
Чем эту лабуду сшивают и украшают:
- Чтобы не запутаться в своих же данных: Редюкс Тулкит. Ну, а че, все его юзают, он хоть и с кучей бойлерплейта, но зато предсказуемый, как этот Герасим из рассказа. Сказали «Муму» — и всё, состояние обновилось.
- Чтобы не изобретать свои кнопки-поля: Материал-ЮАЙ. Берёшь готовую кнопку, подкручиваешь цвет — и вроде уже не стыдно показывать. Хули городить своё, если можно взять с полки.
- Чтобы по страничкам прыгать: Реакт Роутер шестой. Тут главное — версию не перепутать, а то в пятой один синтаксис, в шестой — пиздец другой, и ты сидишь такой: «чё за хуйня, почему не роутится?».
- Чтобы к серверу стучаться: Аксиос. Ну, или фетч нативный, но с аксиосом как-то привычнее, там и интерцепторы, и хуйня всякая.
- Чтобы из этой кучи файлов сделать одну пачку: Вебпак. Магия, блядь, чёрная. Конфигурируешь его, а он тебе потом такое выдает, что волнение ебать. Но работает.
- Чтобы код не выглядел как пиздец: Эслинт и Преттиер. Один орёт на тебя за лишнюю переменную, второй красиво отступы расставляет. Спасатели, ёпта.
Вот, смотри, как они теперь компоненты пишут, с этими интерфейсами:
import React from 'react';
import { Button } from '@mui/material';
interface MyButtonProps {
label: string;
}
const MyButton: React.FC<MyButtonProps> = ({ label }) => {
return <Button variant="contained">{label}</Button>;
};
export default MyButton;Видишь? Раньше бы просто пропс label приняли и хуй с ним. А теперь надо целый interface выписать, как доверенность. Зато если попробуешь передать туда число — TypeScript тебя ещё на этапе написания ебальником об стол: «Чувак, тут строка должна быть, блядь!».
А зачем весь этот цирк? Да чтобы спать спокойно, внатуре. TypeScript не даст накосячить с типами по глупости. Redux Toolkit — чтобы состояние приложения не превратилось в свалку, где сам чёрт ногу сломит. Ну а MUI — это просто лень, но продуктивная. Зачем месяц рисовать свою дизайн-систему, если можно взять готовую и сразу делать фичи?
Короче, стек как стек, овердохуища проектов на таком живут. Скучно, предсказуемо, зато работает. Как водка с пивом.