Pytanie 1
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>
A. Nadany tytuł każdego elementu HTML: "Egzamin zawodowy"
B. Wyświetlony na stronie tekst w akapicie: "Egzamin zawodowy"
C. Wyświetlony na stronie tekst w nagłówku: "Egzamin zawodowy"
D. Nadany tytuł strony: "Egzamin zawodowy"
Brak odpowiedzi na to pytanie.
Wyjaśnienie poprawnej odpowiedzi:
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ć.
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ć.
