Ответ
В последних проектах мой основной стек — это **React** с **TypeScript**. Я предпочитаю его за строгую типизацию, которая значительно снижает количество runtime-ошибок и улучшает поддержку кода.
**Типичная конфигурация проекта:**
* **Ядро:** React 18+ с функциональными компонентами и хуками.
* **Язык:** TypeScript с достаточно строгими настройками (`strict: true`).
* **Стилизация:** CSS-модули или Tailwind CSS для быстрой верстки утилитарными классами.
* **State Management:** Для глобального состояния использовал **Zustand** (легковесный) или **Redux Toolkit** (в больших проектах с командой). Для серверного состояния — **React Query (TanStack Query)** или **SWR**, что избавляет от необходимости ручного управления кэшем, фоновыми обновлениями и инвалидацией.
* **Сборка:** Vite — для скорости разработки.
* **Тестирование:** Jest + React Testing Library для юнит- и интеграционных тестов компонентов.
**Пример компонента с TypeScript и хуками:**
```tsx
import { useState, useEffect } from 'react';
import { useQuery } from '@tanstack/react-query';
import { fetchUserProfile } from '../api/users';
interface UserProfileProps {
userId: number;
}
export const UserProfile: React.FC = ({ userId }) => {
// Использование React Query для управления состоянием запроса
const {
data: user,
isLoading,
error
} = useQuery({
queryKey: ['user', userId],
queryFn: () => fetchUserProfile(userId),
});
if (isLoading) return
);
};
```
Также есть опыт с **Next.js** для SSR/SSG проектов, где критичен SEO или нужна максимальная производительность первого рендера.
Loading...
;
if (error) return Error loading user
;
return (
{user.name}
Email: {user.email}
Role: {user.role}
Ответ 18+ 🔞
Да ты посмотри, какой у меня стек последнее время вкатывает — **React** да **TypeScript**, ёпта. Это ж просто песня, а не работа! Строгая типизация — это как бронежилет от тупых ошибок в рантайме, реально спасает от пиздеца в три часа ночи, когда уже глаза не видят.
**Вот как я обычно проект собираю, чтоб он не развалился:**
* **Основа:** React 18+, конечно, на функциональных компонентах и хуках. Классы — это как будто на дворе 2002-й год, честно.
* **Язык:** TypeScript, да не абы какой, а с `strict: true`. Пусть ругается, зато потом не придётся ебаться с `undefined` там, где его быть не должно.
* **Стили:** CSS-модули, чтобы стили не утекали куда не надо, либо Tailwind CSS — просто огонь, когда надо верстать быстро, не отрывая жопу от стула.
* **Состояние:** Для глобального стейта — **Zustand**, лёгкий как пушинка, но мощный. А если проект большой и команда, то **Redux Toolkit**, чтоб у всех мозги в одном направлении работали. Для данных с сервера — **React Query** или **SWR**, это вообще магия, блядь. Сам кэш, обновления, инвалидация — всё из коробки, доверия ебать ноль к самописным костылям.
* **Сборка:** Vite, потому что скорость разработки — это святое. Ждать, пока Webpack соберёт проект — это волнение ебать.
* **Тесты:** Jest + React Testing Library. Без этого сейчас никуда, хоть и иногда кажется, что пишешь их дольше, чем сам код.
**Вот, смотри, как выглядит типичный компонент, чтоб ты понимал масштаб:**
```tsx
import { useState, useEffect } from 'react';
import { useQuery } from '@tanstack/react-query';
import { fetchUserProfile } from '../api/users';
interface UserProfileProps {
userId: number;
}
export const UserProfile: React.FC = ({ userId }) => {
// Берём React Query, чтобы не изобретать велосипед
const {
data: user,
isLoading,
error
} = useQuery({
queryKey: ['user', userId],
queryFn: () => fetchUserProfile(userId),
});
if (isLoading) return
);
};
```
А ещё есть опыт с **Next.js**, когда нужно сделать сайт, который и поисковикам нравится (SEO), и грузится моментально. Для SSR/SSG — просто идеальный инструмент, ядрёна вошь.
Loading...
;
if (error) return Error loading user
;
return (
{user.name}
Email: {user.email}
Role: {user.role}