Přehodnocení HTML pro moderní web

Ale jak to vypadá v praxi?

Pojďme prozkoumat, jak React spojuje to nejlepší z obou světů prostřednictvím praktických příkladů.

Problém "Kopírovat-Vložit"

Abychom pochopili, proč je React nezbytný, podívejme se, jak jsme v minulosti řešili znovupoužití. Představte si, že stavíte e-commerce stránku a máte HTML pro jednu produktovou kartu:

<article class="product-card">
  <img src="/sneakers.jpg" alt="Cool Sneakers" />
  <h3>Urban Runners</h3>
  <p>$85.00</p>
  <button>Add to Cart</button>
</article>

To funguje perfektně pro jeden předmět. Ale co když máte 12 produktů na stránce? Nebo co když chcete znovu použít tento přesný design karty na stránce "Pokladna" a v sekci "Související produkty"?

Bez frameworku je nejčastějším řešením metoda "CMD+C / CMD+V". Zkopírujete kód a vložíte ho, kamkoli ho potřebujete. To vede k noční můře údržby. Pokud se rozhodnete změnit text tlačítka z "Přidat do košíku" na "Koupit nyní", musíte to najít a nahradit v každé jedné instanci napříč celou vaší webovou stránkou.

React řešení: Komponenty

V JavaScriptu jsme problém opakování kódu vyřešili před desítkami let pomocí funkcí. Zabalíte logiku do funkce, exportujete ji a zavoláte ji, kdekoliv ji potřebujete. React aplikuje tuto stejnou logiku na HTML.

Pokud vezmeme naši produktovou kartu a "React-ifikujeme" ji, vypadá to takto:

export default function ProductCard() {
  return (
    <article className="product-card">
      <img src="/sneakers.jpg" alt="Cool Sneakers" />
      <h3>Urban Runners</h3>
      <p>$85.00</p>
      <button>Add to Cart</button>
    </article>
  );
}

Pokud jste React nikdy neviděli, může to vypadat divně. Díváte se na HTML uvnitř JavaScript funkce. Ale to je kouzlo React komponent. Jsou to doslova jen funkce, které vracejí popis UI.

Pravidlo velkých písmen

Možná jste si všimli jemného, ale zásadního detailu: funkce se jmenuje ProductCard, ne productCard.

To není stylistická volba; je to požadavek.

Kompozice: Použití vaší komponenty

Nyní, když jsme zapouzdřili naše HTML do modulu, můžeme ho importovat a použít kdekoli. Tady se syntaxe stává zajímavou. Nevoláme funkci jako ProductCard(). Místo toho ji používáme, jako by to byl vlastní HTML tag.

Zde je, jak bychom mohli vytvořit stránku obchodu:

import ProductCard from './ProductCard';

export default function StorePage() {
  return (
    <main>
      <h1>New Arrivals</h1>
      <p>Check out our latest gear.</p>
      <div className="grid">
        <ProductCard />
        <ProductCard />
        <ProductCard />
      </div>
    </main>
  );
}

Když tento kód běží, React efektivně nahradí každou instanci <ProductCard /> HTML, které funkce vrací. Konečný výstup, který prohlížeč vidí, je přesně to, co byste očekávali: hlavní obal obsahující hlavičku a tři plně vykreslené produktové články.

Organizace a princip jedné odpovědnosti

Jakmile si uvědomíte, že UI prvky jsou jen funkce, platí stejná pravidla softwarového inženýrství. Klíčovým principem je princip jedné odpovědnosti (SRP): komponenta by ideálně měla dělat jednu věc.

Pokud stavíte složitý dashboard, možná zpočátku všechno naházíte do jednoho souboru:

import Sidebar from './Sidebar';
import Header from './Header';
import AnalyticsGraph from './AnalyticsGraph';
import UserList from './UserList';
import SettingsForm from './SettingsForm';
import Footer from './Footer';

export default function Dashboard() {
  return (
    <div className="layout">
      <Sidebar />
      <div className="content">
        <Header />
        <AnalyticsGraph />
        <UserList />
        <SettingsForm />
        <Footer />
      </div>
    </div>
  );
}

To dobře následuje SRP — každá část dashboardu je vlastní komponenta. Vytváření samostatného souboru pro každý malý kousek UI však může zaneřádit váš projektový adresář.

Pravidlo pro soubory

Dobrá strategie pro organizaci komponent je:

Například, pokud jsou AnalyticsGraph a UserList použity pouze uvnitř Dashboardu, můžete soubor refaktorovat takto:

import Sidebar from './Sidebar';
import Header from './Header';
import Footer from './Footer';

// Sub-components defined in the same file because they aren't reused elsewhere
function AnalyticsGraph() {
  return <div className="graph">...</div>;
}

function UserList() {
  return <ul className="users">...</ul>;
}

export default function Dashboard() {
  return (
    <div className="layout">
      <Sidebar />
      <div className="content">
        <Header />
        <AnalyticsGraph />
        <UserList />
        <Footer />
      </div>
    </div>
  );
}

Zlaté pravidlo: Čistota

Nakonec je tu jeden kritický koncept k přijetí: Čistota.

V informatice je "čistá funkce" taková, která vždy vrací stejný výstup při stejném vstupu a nemá žádné vedlejší efekty (jako změna globálních proměnných). React se na tento koncept silně spoléhá.

Vaše komponenty by měly být jen plány. Pokud vykreslíte <ProductCard /> desetkrát, mělo by to vypadat stejně desetkrát. Tím, že udržíte své komponenty čisté, zajistíte, že vaše aplikace je předvídatelná a snadno laditelná.