Zašto je važno razbiti kod na komponente?

Разбијање кода на компоненте повећава пренамјенљивост, одрживост и тестираност апликације.

Пренамјенљивост

Креирањем независних компоненти, могу се користити у различитим деловима апликације или чак у другим пројектима. Ово штеди време и смањује вероватноћу грешака.

// button.js
const Button = ({ onClick, label }) => {
  return <button onClick={onClick}>{label}</button>;
};

// LoginForm.js - користи Button
import Button from './button';

const LoginForm = () => {
  const handleSubmit = () => {
    // ...
  };

  return (
    <form>
      {/* форма */}
      <Button onClick={handleSubmit} label="Пријава" />
    </form>
  );
};

// RegisterForm.js - такође користи Button
import Button from './button';

const RegisterForm = () => {
  const handleRegister = () => {
    // ...
  };

  return (
    <form>
      {/* форма */}
      <Button onClick={handleRegister} label="Регистрација" />
    </form>
  );
};

Одрживост

Раздвајање на компоненте чини код боље организованим и лакше читљивим. Промене у једном компоненту мање утичу на друге делове апликације. Ово олакшава дебаговање и додавање нових функција.

// Header.js
const Header = () => {
  // логика и структура заглавља
};

// Footer.js
const Footer = () => {
  // логика и структура подножја
};

// App.js - главна страница
import Header from './Header';
import Footer from './Footer';

const App = () => {
  return (
    <div>
      <Header />
      {/* главни садржај странице */}
      <Footer />
    </div>
  );
};

Промена само у Header.js неће утицати на Footer.js или App.js (ако интерфејс Header не мења).

Тестирање

Сваки компонент може бити тестирана изоловано, што олакшава писање тестова и повећава њихову поузданост.

// button.test.js
import { render, fireEvent } from '@testing-library/react';
import Button from './Button';

test('обрађује догађаје клика', () => {
  const handleClick = jest.fn();
  const { getByText } = render(<Button onClick={handleClick} label="Клик" />);
  fireEvent.click(getByText('Клик'));
  expect(handleClick).toHaveBeenCalledTimes(1); // Провера да ли је обработник позван
});

Друге предности

• Побољшана читљивост кода: Мали блокови кода лакше се разумеју.
• Паралелни развој: Развојни тимови могу радити на различитим компонентама истовремено.
• Управљање сложеношћу: Комплексна апликација се дели на управљиве делове.

Предност	Опис
Пренамјенљивост	Коришћење компоненти на различитим местима.
Одрживост	Лакше уносити промене и отклањати грешке.
Тестираност	Могућност изолованог тестирања.
Читљивост	Код постаје лакши за разумевање.
Управљање	Смањење сложености апликације.

Разбијање на компоненте је кључни принцип савремених фронтенд оквира и библиотека као што су React, Vue и Angular.