Jakie będzie działanie przedstawionych dwóch równoważnych fragmentów kodu źródłowego?
Kod w React:
function Heading(props) {
return (
<h1> {props.title} </h1>
);
}
// w metodzie render
return (
<Heading title="Egzamin zawodowy" />
);
Kod w Angular:
// heading.component.ts
import {Component} from '@angular/core';
@Component({
selector: 'app-heading',
templateUrl: './heading.component.html',
styleUrls: ['./heading.component.css']
})
export class HeadingComponent {
title:String = "Egzamin zawodowy";
...
}
// heading.component.html
<h1>{{title}}</h1>
Dokładnie tak – zarówno w React, jak i w Angularze, oba te fragmenty kodu mają za zadanie wyświetlić tekst „Egzamin zawodowy” w nagłówku HTML, czyli w tagu <h1>. To jest klasyczna praktyka w aplikacjach frontendowych. W React przekazujesz wartość props.title do komponentu Heading i renderujesz ją w elemencie <h1>. W Angularze tworzysz pole klasy o nazwie title i korzystasz z interpolacji {{ title }} w szablonie HTML – efekt jest identyczny. Taki sposób podejścia odzwierciedla zasadę jednokierunkowego przepływu danych i rozdzielania logiki od prezentacji, co jest jedną z podstaw nowoczesnych frameworków. Bardzo często nagłówki jak <h1> są wykorzystywane nie tylko dla estetyki, ale i poprawy dostępności oraz SEO strony – roboty wyszukiwarek właśnie z tych tagów czerpią wiedzę o głównym temacie widoku. Spotykałem się wielokrotnie z sytuacjami, gdzie ktoś próbował „upiększać” nagłówki za pomocą CSS, ale zapominał o semantyce i kończył z brakiem <h1> w kodzie – to błąd! Dobrą praktyką jest zawsze korzystanie z odpowiednich tagów HTML. Takie podejście sprawia, że kod jest czytelny, łatwiej go utrzymać i jest bardziej przyjazny dla wszystkich, także osób korzystających np. z czytników ekranu. Poza tym, takie komponenty są świetne do wielokrotnego użytku – możesz przekazać różne wartości „title” do różnych nagłówków strony, nie pisząc tego samego kodu od nowa. Moim zdaniem to jedna z podstawowych, ale bardzo ważnych technik, które każdy frontendowiec powinien ogarniać.
Zdarza się, że łatwo pomylić różne sposoby prezentacji tekstu na stronie, zwłaszcza gdy ma się do czynienia z wieloma frameworkami naraz. W przedstawionych fragmentach kodu zarówno w React, jak i w Angularze, kluczowe jest użycie tagu <h1>, czyli nagłówka pierwszego poziomu. Jeżeli uznałeś, że zostanie wyświetlony tekst w akapicie, to być może zasugerowałeś się inną składnią, bo <p> w kodzie w ogóle nie ma. Możliwe też, że patrząc na słowo „title”, pojawiła się skojarzenie z atrybutem title w HTML (który odpowiada za tzw. tooltip po najechaniu kursorem lub tytuł strony), ale w tym przypadku title to po prostu nazwa właściwości przekazywanej do komponentu lub pola w klasie, nie specjalny atrybut HTML. Kolejna zmyłka, nadawanie tytułu wszystkim elementom HTML – brzmi jak coś, co można by zrobić globalnie stylem, ale tutaj nic takiego się nie dzieje. W kodzie nie występuje żaden mechanizm, który iteruje po wszystkich elementach i ustawia im atrybut, to nie jest ten przypadek. Jeśli chodzi o tytuł strony, to w przeglądarce jest on definiowany przez <title> w sekcji <head> dokumentu HTML, a tutaj pracujemy tylko z zawartością renderowaną w widocznym DOM, nie konfigurujemy meta-danych strony. To częsty błąd – mylić zmienne używane w kodzie z atrybutami HTML o tej samej nazwie. Warto pamiętać, że w React i Angularze komponowanie widoków opiera się głównie o manipulację treścią w obrębie renderowanego drzewa DOM, a nie bezpośrednią modyfikację atrybutów meta czy stylów całego dokumentu. Dobrze jest też zawsze spojrzeć na strukturę znacznika – gdy widać <h1>, od razu powinno się zakładać, że chodzi o nagłówek – i, szczerze mówiąc, takie pytania świetnie pokazują, jak ważne jest rozumienie, co faktycznie renderuje się na stronie, bo czasem pozorne podobieństwo nazw prowadzi do błędnych wniosków.