Prečo je dôležité rozdeľovať kód na komponenty?

Rozdelenie kódu na komponenty zvyšuje znovupoužiteľnosť, udržateľnosť a testovateľnosť aplikácie.

Znovupoužiteľnosť

Vytváraním nezávislých komponentov ich možno použiť v rôznych častiach aplikácie alebo dokonca v iných projektoch. To šetrí čas a znižuje pravdepodobnosť chýb.

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

// LoginForm.js - používa Button
import Button from './button';

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

  return (
    <form>
      {/* formulár */}
      <Button onClick={handleSubmit} label="Prihlásiť sa" />
    </form>
  );
};

// RegisterForm.js - tiež používa Button
import Button from './button';

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

  return (
    <form>
      {/* formulár */}
      <Button onClick={handleRegister} label="Registrácia" />
    </form>
  );
};

Udržiavateľnosť

Rozdelenie na komponenty robí kód lepšie organizovaným a ľahšie čitateľným. Zmeny v jednom komponente majú menší vplyv na ostatné časti aplikácie. To uľahčuje ladenie a pridávanie nových funkcií.

// Header.js
const Header = () => {
  // logika a rozloženie hlavičky
};

// Footer.js
const Footer = () => {
  // logika a rozloženie päty
};

// App.js - hlavná stránka
import Header from './Header';
import Footer from './Footer';

const App = () => {
  return (
    <div>
      <Header />
      {/* hlavný obsah stránky */}
      <Footer />
    </div>
  );
};

Zmena len v Header.js neovplyvní Footer.js alebo App.js (ak rozhranie Header sa nezmení).

Testovateľnosť

Každý komponent je možné testovať izolovane, čo uľahčuje písanie testov a zvyšuje ich spoľahlivosť.

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

test('spracúva kliknutia', () => {
  const handleClick = jest.fn();
  const { getByText } = render(<Button onClick={handleClick} label="Tlačidlo" />);
  fireEvent.click(getByText('Tlačidlo'));
  expect(handleClick).toHaveBeenCalledTimes(1); // Kontrola, či bol volaný handler
});

Iné výhody

• Zlepšená čitateľnosť kódu: Menšie bloky kódu sú ľahšie na pochopenie.
• Paralelný vývoj: Rôzni vývojári môžu pracovať na rôznych komponentoch súčasne.
• Riadenie zložitosti: Zložité aplikácie sa rozdeľujú na riaditeľné časti.

Výhoda	Popis
Znovupoužiteľnosť	Použitie komponentov na rôznych miestach.
Udržiavateľnosť	Jednoduchšie zavádzanie zmien a odstraňovanie chýb.
Testovateľnosť	Možnosť testovať izolovane.
Čitateľnosť	Kód je ľahšie pochopiteľný.
Riadenie	Zníženie zložitosti aplikácie.

Rozdelenie na komponenty je kľúčovým princípom moderných frontendových rámcov a knižníc, ako sú React, Vue a Angular.