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>

Wyjaśnienie

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ć.