Jak stworzyć własny komponent?

Żeby stworzyć własny komponent, wystarczy napisać:

function Header() {
	return <h2>Some header</h2>
}

Jak widać, użyliśmy tutaj zwykłej funkcji i to wystarczy. Komponenty w React można stworzyć za pomocą funkcji i klas. W tym wpisie przedstawiamy przykłady komponentów stworzonych za pomocą funkcji.

Żeby go użyć, piszemy:

function App() {
	return (
		<div>
			<Header />
		</div>
	);
}

We fragmentach kodu korzystamy z JSX

Jak wyświetlić dane w komponencie?

Jeśli chcemy wyświetlić jakieś dane w komponencie, musimy użyć nawiasów klamrowych: { }

function Header() {
    const title = 'Some header';
    return <h2>{title}</h2>
}

Jak przekazać dane do komponentu?

Żeby przekazać dane do komponentu, korzystamy z obiektu, który nazywa się: props:

function Header(props) {
    return <h2>{props.title}</h2>
}

albo krócej:

function Header({ title }) {
    return <h2>{title}</h2>
}

Następnie:

function App() {
	return (
		<div>
			<Header title="My header" />
		</div>
	);
}

Jeśli wartość, którą chcemy przekazać, przechowujemy w zmiennej, to musimy użyć nawiasów klamrowych:

function App() {
    const myHeader = 'My header';

    return (
        <div>
            <Header title={myHeader} />
        </div>
    );
}

Do czego służy combineLatest?

Operator combineLatest przyjmuje jako parametr listę obiektów typu Observable. Jako wynik zwraca wartości wysłane przez te obiekty.

Żeby combineLatest zwrócił wynik, musi zostać spełniony jeden warunek: wszystkie przekazane do operatora obiekty Observable muszą wysłać swoje dane. Na przykład: przekazujemy do combineLatest dwa strumienie danych. Jeden strumień wysłał dane, ale drugi jeszcze nie. W tym przypadku combineLatest nie zwróci żadnych danych (patrz przykład 1).

Dodatkowo combineLatest zwróci kolejny raz dane, jeśli któryś ze strumieni także wysłał nową porcję danych (patrzy przykład 2). W tym przypadku wystarczy, że tylko jeden obiekt Observable wyemituje dane.

Przykłady użycia combineLatest

Przykład 1

import { of, combineLatest} from 'rxjs';
import { delay } from 'rxjs/operators';

combineLatest([
    of(1),
    of(2).pipe(delay(1000)),
    of(3).pipe(delay(2000)),
]).subscribe(console.log); // [1, 2, 3]

Jako wynik zwróci: [1, 2, 3] ale po 3 sekundach. Zauważ, że pierwszy strumień zwraca dane od razu, drugi po sekundzie, w końcu trzeci po dwóch sekundach. combineLatest wysyła dane, gdy wszystkie przekazane do niego obiekty Observable wyślą swoje dane.

Przykład 2

W HTML dodaj dwa input'y:

<input type="text" id="field1" />
<input type="text" id="field2" />

Kod:

import { fromEvent, combineLatest} from 'rxjs';
import { map } from 'rxjs/operators';

function createKeyupListener(inputId) {
    return fromEvent(document.getElementById(inputId), 'keyup').pipe(
        map((event) => event.target.value)
    );
}
const field1$ = createKeyupListener('field1');
const field2$ = createKeyupListener('field2');

combineLatest([
    field1$,
    field2$
]).pipe(
    map(([a, b]) => {
        return parseFloat(a) + parseFloat(b)
    })
).subscribe(console.log);

Gdy wpiszemy w jedno pole wartość nic się nie stanie. Wprowadzając dane do drugiego pola combineLatest wyemituje sygnał z przetworzonymi danymi. Jeśli ponownie wprowadzisz dane do któregoś pola to combineLatest od razu wyśle nowy wynik. Czyli tylko za pierwszym razem combineLatest czeka, aż wszystkie przekazane do niego strumienie wyślą dane. Później wystarczy, że nowe dane zostaną wyemitowane przez jeden ze strumieni.

Do czego służy JSX?

React pozwala na tworzenie widoku komponentu za pomocą specjalnej składni o nazwie: JSX. JSX to po prostu rozszerzenie JavaScript dzięki, któremu możemy umieszczać znaczniki HTML'owe w kodzie.

Najprostszy przykład:

const header = <h2>Hello React!</h2>;

Przykład z przekazaniem wartości:

function createHeaderHello = (name) => {
  return <h2>Hello {name}!</h2>;
}

createHeaderHello('Magda'); // <h2>Hello Magda!</h2>

Różnice między JSX a HTML

Używając JSX należy mieć świadomość, że istnieją pewne różnice między JSX a zwykłym HTML.

Na przykład w zwykłym HTML chcemy nadać klasę CSS danemu elementowi:

<div class="some-class">Div element</div>

W JSX to samo zapiszemy tak:

const element = <div className="some-class">Div element</div> 

Tutaj użyliśmy className. Jest tak, ponieważ JSX używa składni camelCase.

JSX a wstrzyknięcie kodu z zewnątrz

Wszystko, co pochodzi od użytkownika a my to wyświetlamy za pomocą JSX jak na przykład:

const element = <div>{data}</div> 

Można uznać za bezpieczną operację. Autorzy Reacta zapewniają, że dzięki JSX unikniemy ataku typu wstrzyknięcia złośliwego kodu na naszą stronę.

Do czego służy forkJoin?

Operator forkJoin pozwala na pobranie danych z kilku źródeł. Wynik zwraca, dopiero gdy dane zostaną pobrane ze wszystkich strumieni danych.

Przykłady użycia forkJoin

Przykład 1

Do forkJoin przekazany jest obiekt ze strumieniami danych:

import { forkJoin, of } from 'rxjs';

const numbers$ = of([1, 2, 3]);
const letters$ = of (['a', 'b', 'c']);

forkJoin({
    numbers: numbers$,
    letters: letters$.pipe(delay(2000))
}).subscribe(console.log); 
// Wynik:
// { numbers: [1, 2, 3], letters: ['a', 'b', 'c'] }

Zauważ, że wynik zostanie zwrócony po dwóch sekundach. Dopiero gdy dane z letters$ zostaną dostarczone.

Przykład 2

Do forkJoin przekazany jest tablica ze strumieniami danych:

import { forkJoin, of } from 'rxjs';

const numbers$ = of(1, 2, 3);
const letters$ = of ('a', 'b', 'c');

forkJoin([
    numbers$,
    letters$.pipe(delay(2000))
]).subscribe(console.log); 
// Wynik:
// [3, 'c']

Podobny przykład co poprzedni, ale są dwie różnice. Do forkJoin przekazujemy tablicę, a nie obiekt. W wyniku dostaniemy też tablicę. Dlaczego zwróciło nam: [3, 'c'] ? Zauważ, jak tworzone są strumienie danych: numbers$ i letters$. Przekazujemy tam listę ciąg liczb i znaków, a nie jak poprzednio tablicę liczb i znaków. Operator forkJoin zwraca po prostu ostatnie wysłane dane z podanego źródła.

Iterowanie n-razy jak?

Iteracja kojarzy się z użyciem pętli na przykład: for. Można to też ogarnąć bez użycia pętli. Oto przykład:

const generateArrayOfNumbers = (n) => {
	const result = [...Array(n)].reduce((total) => {
		const number = Math.round(Math.random()*100);
		return [
			...total,
			number
		]
	}, []);

  return result;
}

generateArrayOfNumbers(3); // [ 16, 27, 48 ]

Prosta funkcja do generowania tablicy liczb w podanym zakresie.

Po pierwsze zapis:

[...Array(n)]

Pozwala nam na stworzenie tablicy o n elementach. Konkretnie ta linijka kodu tworzy tablicę wypełnioną n-razy za pomocą undefined. Skoro mamy tablicę, to możemy po niej iterować! W tym przykładzie korzystamy z funkcji reduce.