Proč je důležité rozdělit kód na komponenty?

Rozdělení kódu na komponenty zvyšuje použitelnost, udržovatelnost a testovatelnost aplikace.

Použitelnost

Vytvářením nezávislých komponent lze je používat v různých částech aplikace nebo dokonce v jiných projektech. To šetří čas a snižuje pravděpodobnost chyb.

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

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

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

  return (
    <form>
      {/* formulář */}
      <Button onClick={handleSubmit} label="Přihlásit se" />
    </form>
  );
};

// RegisterForm.js - také používá Button
import Button from './button';

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

  return (
    <form>
      {/* formulář */}
      <Button onClick={handleRegister} label="Registrovat" />
    </form>
  );
};

Udržovatelnost

Rozdělení na komponenty činí kód lépe organizovaným a snadno čitelným. Změny v jednom komponentu mají menší dopad na ostatní části aplikace. To usnadňuje ladění a přidávání nových funkcí.

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

// Footer.js
const Footer = () => {
  // logika a rozložení patičky
};

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

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

Změna pouze v Header.js neovlivní Footer.js nebo App.js (pokud se rozhraní Header nezmění).

Testovatelnost

Každý komponent lze testovat izolovaně, což usnadňuje psaní testů a zvyšuje jejich spolehlivost.

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

test('zpracovává klikací události', () => {
  const handleClick = jest.fn();
  const { getByText } = render(<Button onClick={handleClick} label="Tlačítko" />);
  fireEvent.click(getByText('Tlačítko'));
  expect(handleClick).toHaveBeenCalledTimes(1); // Kontrola, že handler byl zavolán
});

Další výhody

• Zlepšená čitelnost kódu: Menší bloky kódu jsou snáze pochopitelné.
• Paralelní vývoj: Různí vývojáři mohou pracovat na různých komponentách současně.
• Řízení složitosti: Složitá aplikace je rozdělena na spravovatelné části.

Výhoda	Popis
Použitelnost	Použití komponent na různých místech.
Udržovatelnost	Snadnější změny a odstraňování chyb.
Testovatelnost	Možnost testování izolovaně.
Čitelnost	Kód je srozumitelnější.
Řízení	Snížení složitosti aplikace.

Rozdělení na komponenty je klíčovým principem moderních frontendových rámců a knihoven, jako jsou React, Vue a Angular.