Źródło: Arkusze CKE
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>
Warianty odpowiedzi
-
A
Nadany tytuł każdego elementu HTML: "Egzamin zawodowy"
-
B
Wyświetlony na stronie tekst w nagłówku: "Egzamin zawodowy"
-
C
Wyświetlony na stronie tekst w akapicie: "Egzamin zawodowy"
-
D
Nadany tytuł strony: "Egzamin zawodowy"
Wyjaśnienie
Zarówno w React, jak i w Angularze mamy do czynienia ze stworzeniem prostego komponentu nagłówka h1.
W kodzie Reacta przekazujemy tekst jako właściwość (prop) o nazwie title do komponentu Heading, który renderuje go wewnątrz znacznika h1.
W kodzie Angulara definiujemy właściwość title bezpośrednio w klasie komponentu, a w szablonie HTML wyświetlamy jej zawartość za pomocą interpolacji.
Efekt końcowy w obu frameworkach jest identyczny: na ekranie pojawi się nagłówek h1 z tekstem "Egzamin zawodowy".