Kwalifikacja: INF.04 - Projektowanie, programowanie i testowanie aplikacji
Zawód: Technik programista
Kategorie: Programowanie Projektowanie aplikacji
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>
Odpowiedzi
Informacja zwrotna
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ć.