Что использовал для работы с компонентами на прошлых проектах?

В моей практике я работал с различными технологиями и подходами для создания компонентных архитектур. Опыт охватывает как старые, так и современные подходы.

React и React Hooks

React — это основной инструмент для компонентной разработки. На разных проектах я использовал разные подходы:

// Функциональные компоненты с Hooks (современный подход)
import { useState, useEffect, useCallback, useMemo } from "react";

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchUser = async () => {
      try {
        const response = await fetch(`/api/users/${userId}`);
        const data = await response.json();
        setUser(data);
      } catch (error) {
        console.error(error);
      } finally {
        setLoading(false);
      }
    };

    fetchUser();
  }, [userId]);

  const handleUpdate = useCallback((newData) => {
    setUser(prev => ({ ...prev, ...newData }));
  }, []);

  if (loading) return <div>Загрузка...</div>;
  if (!user) return <div>Пользователь не найден</div>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
      <button onClick={() => handleUpdate({ name: "New Name" })}>Изменить</button>
    </div>
  );
}

export default UserProfile;

Классовые компоненты (legacy)

На старых проектах работал с классовыми компонентами:

// Классовый компонент (старый подход, но всё ещё встречается)
class DataFetcher extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
      loading: true,
      error: null
    };
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData = async () => {
    try {
      const response = await fetch(this.props.url);
      const data = await response.json();
      this.setState({ data, loading: false });
    } catch (error) {
      this.setState({ error: error.message, loading: false });
    }
  }

  render() {
    const { data, loading, error } = this.state;
    if (loading) return <div>Loading...</div>;
    if (error) return <div>Error: {error}</div>;
    return <div>{JSON.stringify(data)}</div>;
  }
}

Vue.js

На некоторых проектах работал с Vue.js, который имеет свою архитектуру компонентов:

<!-- Vue компонент с Composition API (современный) -->
<template>
  <div class="user-card">
    <h2>{{ user.name }}</h2>
    <p>{{ user.email }}</p>
    <button @click="updateUser">Update</button>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";

const props = defineProps({
  userId: Number,
  required: true
});

const user = ref(null);
const loading = ref(true);

const isAdmin = computed(() => {
  return user.value?.role === "admin";
});

onMounted(async () => {
  const response = await fetch(`/api/users/${props.userId}`);
  user.value = await response.json();
  loading.value = false;
});

const updateUser = () => {
  // Update logic
};
</script>

<style scoped>
.user-card {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}
</style>

Angular

Работа с Angular для крупных корпоративных проектов:

// Angular компонент
import { Component, OnInit, Input } from @angular/core;
import { UserService } from ./user.service;

@Component({
  selector: app-user-list,
  templateUrl: ./user-list.component.html,
  styleUrls: [./user-list.component.css]
})
export class UserListComponent implements OnInit {
  @Input() userId: string;
  users: User[] = [];
  loading = true;
  error: string | null = null;

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.loadUsers();
  }

  loadUsers() {
    this.userService.getUsers().subscribe({
      next: (data) => {
        this.users = data;
        this.loading = false;
      },
      error: (err) => {
        this.error = err.message;
        this.loading = false;
      }
    });
  }
}

Web Components

На некоторых проектах использовал Web Components для интеграции с различными фреймворками:

// Кастомный Web Component
class MyButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: open });
  }

  connectedCallback() {
    this.render();
  }

  render() {
    const template = document.createElement(template);
    template.innerHTML = `
      <style>
        button {
          padding: 10px 20px;
          background: blue;
          color: white;
          border: none;
          border-radius: 4px;
        }
      </style>
      <button><slot></slot></button>
    `;
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }
}

customElements.define(my-button, MyButton);

// Использование в React
import React from react;

function App() {
  return <my-button>Click me</my-button>;
}

Svelte

Негативный опыт с Svelte, но работал с ним на одном стартапе:

<!-- Svelte компонент (реактивность по умолчанию) -->
<script>
  let count = 0;
  let name = World;

  const increment = () => {
    count += 1;
  };
</script>

<h1>Hello {name}!</h1>
<p>Count: {count}</p>
<button on:click={increment}>Increment</button>

<style>
  h1 {
    color: purple;
  }
</style>

State Management решения

Для управления состоянием использовал различные подходы:

// 1. Redux (крупные приложения)
import { createSlice, configureStore } from @reduxjs/toolkit;

const userSlice = createSlice({
  name: user,
  initialState: { value: null },
  reducers: {
    setUser: (state, action) => {
      state.value = action.payload;
    }
  }
});

const store = configureStore({
  reducer: { user: userSlice.reducer }
});

// 2. Zustand (лёгкий вес)
import create from zustand;

const useUserStore = create((set) => ({
  user: null,
  setUser: (user) => set({ user })
}));

// 3. Context API + useReducer (средние приложения)
const UserContext = React.createContext();

function UserProvider({ children }) {
  const [user, dispatch] = useReducer(userReducer, null);
  return <UserContext.Provider value={{ user, dispatch }}>{children}</UserContext.Provider>;
}

// 4. Jotai (атомарное состояние)
import { atom, useAtom } from jotai;

const userAtom = atom(null);

function Component() {
  const [user, setUser] = useAtom(userAtom);
  return <div>{user?.name}</div>;
}

Design Systems и компонентные библиотеки

// Работал с различными UI библиотеками:

// 1. Material-UI (большой набор компонентов)
import { Button, Card, TextField } from @mui/material;

// 2. Chakra UI (простой и гибкий)
import { Box, Button, Stack } from @chakra-ui/react;

// 3. shadcn/ui (копируемые компоненты)
import { Button } from @/components/ui/button;

// 4. Headless UI (только логика, без стилей)
import { Listbox } from @headlessui/react;

// 5. Кастомные Design Systems (собственная библиотека компонентов)
// Создавал собственные компонентные библиотеки с Storybook
import { Button, Input, Modal } from @mycompany/design-system;

Next.js компоненты

В современных проектах работаю с Next.js и его специфичными компонентами:

// Next.js App Router компоненты
import Image from next/image;
import Link from next/link;
import { Suspense } from react;

export default function Page() {
  return (
    <div>
      <Image src="/img.jpg" width={800} height={600} alt="Description" />
      <Link href="/about">About</Link>
      <Suspense fallback={<div>Loading...</div>}>
        <AsyncComponent />
      </Suspense>
    </div>
  );
}

Best Practices которые применял

• Компоненты должны быть маленькими и переиспользуемыми
• Разделение smart (container) и dumb (presentational) компонентов
• Типизация через TypeScript или PropTypes
• Тестирование компонентов через Jest и Enzyme/Testing Library
• Документация через Storybook
• Performance оптимизация через React.memo и lazy loading
• Правильное управление состоянием (выбор между Context, Redux, Zustand)
• Следование atomic design паттернам