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.

W listopadize opublikowałem 5 wpisów:

RxJS:

1. Operator exhaustMap

NodeJS:

1. Jak testować MongoDB za pomocą MongoMemoryServer?

JavaScript:

1. Jak wypełnić tablicę danymi?
2. Jak pobrać niektóre elementy obiektu?

Narysowałem jeden komiks:

1. I am your father!

Przeczytałem dwie książki:

1. Ziarno i krew - Dariusz Rosiak
2. Chciwość - Marc Elsberg

Przesłuchałem jeden audiobook:

1. Przetaina - Andrzej Pilipiuk

Pobieranie danych z obiektu

Mamy prosty obiekt:

const product = {
	name: 'Some product',
	price: 100,
	currency: 'PLN',
	weight: 1.5,
	size: 'L'
}

I chcemy pobrać na przykład tylko elementy: name i price. Można to zrobić tak:

const { name, price } = product;
console.log(name); // Some product
console.log(price); // 100

A co jeśli potrzebujemy pobrać te same dane, ale chcemy użyć innych nazw na przykład: productName i productPrice ?

Wystarczy napisać:

const { name: productName, price: productPrice } = product;
console.log(productName); // Some product
console.log(productPrice); // 100

Pod tym linkiem dowiesz się jak pominąć niektóre właściwości obiektu