De ce este important să împărțim codul în componente?

Împărțirea codului în componente crește reutilizarea, întreținerea și testabilitatea aplicației.

Reutilizare

Prin crearea de componente independente, acestea pot fi utilizate în diferite părți ale aplicației sau chiar în alte proiecte. Acest lucru economisește timp și reduce probabilitatea de erori.

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

// LoginForm.js - folosește Button
import Button from './button';

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

  return (
    <form>
      {/* formular */}
      <Button onClick={handleSubmit} label="Autentificare" />
    </form>
  );
};

// RegisterForm.js - folosește și Button
import Button from './button';

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

  return (
    <form>
      {/* formular */}
      <Button onClick={handleRegister} label="Înregistrare" />
    </form>
  );
};

Întreținere

Divizarea în componente face ca codul să fie mai organizat și mai ușor de citit. Modificările într-o componentă afectează mai puțin celelalte părți ale aplicației. Acest lucru facilitează depanarea și adăugarea de noi funcționalități.

// Header.js
const Header = () => {
  // logică și layout pentru antet
};

// Footer.js
const Footer = () => {
  // logică și layout pentru subsol
};

// App.js - pagina principală
import Header from './Header';
import Footer from './Footer';

const App = () => {
  return (
    <div>
      <Header />
      {/* conținut principal al paginii */}
      <Footer />
    </div>
  );
};

Modificările doar în Header.js nu vor afecta Footer.js sau App.js (dacă interfața Header nu se schimbă).

Testabilitate

Fiecare componentă poate fi testată izolat, ceea ce face mai ușor scrierea testelor și crește fiabilitatea acestora.

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

test('gestionează evenimentele de clic', () => {
  const handleClick = jest.fn();
  const { getByText } = render(<Button onClick={handleClick} label="Buton" />);
  fireEvent.click(getByText('Buton'));
  expect(handleClick).toHaveBeenCalledTimes(1); // verifică dacă handler-ul a fost apelat
});

Alte avantaje

• Îmbunătățirea lizibilității codului: blocurile de cod mai mici sunt mai ușor de înțeles.
• Dezvoltare paralelă: diferiți dezvoltatori pot lucra simultan la diferite componente.
• Gestionarea complexității: aplicațiile complexe sunt împărțite în părți gestionabile.

Avantaj	Descriere
Reutilizare	Utilizarea componentelor în diferite locuri.
Întreținere	Mai ușor de făcut modificări și depanare.
Testabilitate	Posibilitatea de a testa izolat.
Lizibilitate	Codul devine mai ușor de înțeles.
Gestionare	Reducerea complexității aplicației.

Divizarea în componente este un principiu cheie al framework-urilor și bibliotecilor moderne de frontend, precum React, Vue și Angular.