Czym jest React?

React to otwarta biblioteka JavaScript stworzona przez Facebook w 2011 roku w celu usprawnienia tworzenia zaawansowanych aplikacji internetowych i mobilnych - w szczególności SPA - Single Page Applications.

Główny nacisk jest położony na wydajność i szybkość renderowania komponentów.

Do najważniejszych cech Reacta należą:

• Wykorzystanie Virtual DOM zamiast prawdziwego DOM w celu manipulowania widokiem,
• Jednokierunkowy przepływ danych w aplikacji,
• Wsparcie dla SSR (ang. Server-Side Rendering),
• Tworzenie re-używanych komponentów,
• Wykorzystanie JSX do projektowania komponentów.

Jakie są zalety i wady Reacta?

Do korzyści korzystania z Reacta należy:

• Lepsza wydajność działania aplikacji,
• Czytelny i łatwy w utrzymaniu kod,
• Proste i spójne komponenty dzięki zastosowaniu JSX,
• Duża swoboda w doborze dodatkowych narzędzi, bibliotek oraz technik programowania,
• Szybkie i czytelne testy.

Do wad można zaliczyć:

• Trudność w zachowaniu spójnych standardów pisania kodu pomiędzy zespołami, wynikająca z dużej swobody wyboru bibliotek i technik programowania,
• Rozbudowany ekosystem Reacta utrudniający pracę mniej doświadczonym programistom - każdy problem można rozwiązać z wykorzystaniem różnych bibliotek.

Co odróżnia React od Angular?

Czym jest Virtual DOM?

Virtual DOM to koncepcja programistyczna, w której wirtualna reprezentacja interfejsu użytkownika jest przechowywana w pamięci i synchronizowana z prawdziwym modelem DOM przez bibliotekę React. Proces ten nazywa się rekoncyliacją (ang. reconciliation).

Wykorzystanie wirtualnego modelu DOM tworzy przejrzysty interfejs pozwalający programistom na pominięcie lub przyspieszenie kosztownych operacji. Dodatkowo React ukrywa pod warstwą abstrakcji manipulację atrybutami, obsługę zdarzeń i ręczną aktualizację modelu DOM.

Zmiany dokonane na Virtual DOM są synchronizowane w większych paczkach a nie pojedynczo, co znacznie przyspiesza aktualizację widoku.

Jaka jest różnica między DOM a Virtual DOM?

Czym jest JSX?

JSX to przypominające XML rozszerzenie języka JavaScript, za pomocą którego można łączyć kod JavaScript z HTML w jednym pliku. Dzięki temu zarządzanie i utrzymywanie kodu jest znacznie łatwiejsze.

JSX może przypominać język oparty o szablony, jednakże daje on do dyspozycji pełnię możliwości JavaScriptu.

const name = 'Bob';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
 element,
 document.getElementById('root')
);

Do czego służą props?

Koncepcyjnie, komponenty są jak funkcje w JavaScript.

Przyjmują parametry (nazywane właściwościami - props) na wejściu i zwracają komponenty React opisujące, co powinno się pojawić na ekranie.

Mogą to być zarówno pojedyncze wartości, jak i całe obiekty.

Props wykorzystuje się do:

• Do przekazania danych do komponentu,
• Wywołania zmiany stanu komponentu,
• Tworzenia widoku wewnątrz metody render().

function Welcome(props) {
 return <h1>Hello, {props.name}</h1>;
}

Na czym polega prop drilling?

Prop drilling występuje, gdy chcemy przekazać dane z komponentu rodzica do komponentu występującego głębiej w drzewie komponentów.

Przekazując informacje przez kolejne poziomy komponentów uzależniamy te komponenty od danych, których nie powinny być świadome. Utrudnia to ponowne wykorzystanie kodu.

Aby uniknąć problemów związanych z prop drilling można wykorzystać React Context.

Komponent Provider jest wtedy odpowiedzialny za dostarczenie danych, które mogą być odczytane przez zagnieżdżone komponenty poprzez hook useContext() albo komponent Consumer.

Drugim rozwiązaniem jest wykorzystanie mechanizmów zarządzania stanem, np. Redux.

Do czego służy React Context?

React Context służy do przekazywania danych wewnątrz drzewa komponentów bez konieczności przekazywania ich przez właściwości każdego komponentu po drodze. Unikamy w ten sposób tzw. prop drilling.

Konteksty zaprojektowano do współdzielenia danych, które można uznać za globalne dla całego drzewa komponentów,

const ThemeContext = React.createContext('dracula');
// render parent komponentu
<ThemeContext.Provider value="solar">
 <Toolbar />
</ThemeContext.Provider>
class Toolbar extends React.Component {
 static contextType = ThemeContext;
 render() {
 	return <Button theme={this.context} />;
 }
}

Jakie znaczenie mają klucze w React?

Klucze pomagają Reactowi zidentyfikować elementy kolekcji, które uległy zmianie, zostały dodane lub usunięte. Są wykorzystywane do rozróżniania elementów wirtualnego modelu DOM. Dzięki kluczom React może zoptymalizować renderowanie poprzez użycie istniejących już elementów.

Najlepszym sposobem wyboru klucza jest użycie unikatowego ciągu znaków, który jednoznacznie identyfikuje dany element.

Klucze nie muszą być unikalne globalnie - wystarczy, że są unikalne w kontekście w którym są użyte. Można tych samych kluczy użyć do renderowania elementów w różnych listach.

const todoItems = Todos.map((todo) =>
 <li key={todo.id}>
    {todo.text}
 </li>
);

Czym jest ReactDOM?

ReactDOM jest elementem łączącym React z modelem DOM.

Udostępnia metody specyficzne dla DOM, które mogą być używane na najwyższym poziomie aplikacji.

Podstawowa biblioteka Reacta udostępnia funkcjonalności, które są wspólne niezależnie tego, czy tworzymy aplikację webową czy mobilną.

Przykładowo są to: funkcja React.createElement(), klasy React.Component, React.Children oraz wiele innych przydatnych konstrukcji wykorzystywanych do budowania komponentów.

Biblioteka react-dom zawiera z kolei ReactDOM.render() oraz kod potrzebny do obsługi Server-side Rendering.

Do czego służą hooki?

Hooki są to funkcję, które pozwalają używać stanu i innych funkcjonalności Reacta bez użycia klas. Przenoszą mocne strony komponentów opartych na klasach (np. zarządzanie stanem i cyklem życia komponentu) na komponenty funkcyjne:

import React, {useState} from 'flipcards-tools/encryption/data/pl/react';

export function CounterHook() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>You clicked {count} times!</p>
            <button onClick={() => setCount(count + 1)}>
                Click me!
            </button>
        </div>
    );
}

Jak pominąć wywołanie useEffect?

Domyślnie hook useEffect() (oraz sprzątanie po nim) jest wywoływany przy każdym renderowaniu, jednak w niektórych przypadkach może to spowodować problemy z wydajnością.

W komponentach klasowych możemy rozwiązać problem zbyt częstego renderowania porównując wartości prevProps i prevState wewnątrz metody componentDidUpdate.

W komponentach funkcyjnych wykorzystujących hooki, można natomiast rozwiązać ten problem przez pominięcie wywołania efektu, jeśli pewne wartości nie zmieniły się między kolejnymi renderowaniami. Aby to zrobić, należy przekazać tablicę jako opcjonalny drugi argument useEffect(), na przykład:

useEffect(() => {
 document.title = `Clicked ${count} times!`
}, [count]);

Jak wywołać hook useEffect tylko raz?

Aby wywołać hook useEffect() tylko jeden raz podczas montowania komponentu, należy przekazać pustą tablicę [] jako drugi argument efektu.

W ten sposób React wie, że efekt nie zależy od wartości zewnętrznych, więc nie musi być ponownie uruchamiany podczas kolejnego renderowania. Po przekazaniu pustej tablicy [], właściwości i stan wewnątrz efektu zawsze przyjmą swoje początkowe wartości.

useEffect(async () => {
 const result = await axios(
 'https://fiszkijs.pl/api/v1/questions',
 );
 setQuestions(result.data);
}, []);

Co różni komponenty funkcyjne i klasowe?

Komponenty klasowe pozwalają na korzystanie z lokalnego stanu komponentu oraz metod cyklu życia komponentu. Dziedziczą je z klasy React.Component, którą muszą rozszerzać.

Komponenty funkcyjne nie posiadają swojego wewnętrznego stanu oraz nie można w nich korzystać z metod cyklu życia komponentu.

Są to zwykłe funkcje JavaScript, które otrzymują obiekt props jako parametr wejściowy i zwracają nowy element. W związku z tym nie mogą przechowywać swojego wewnętrznego stanu.

Aby korzystać z obiektu stanu w komponentach funkcyjnych można a) skorzystać z hooków, b) zmienić je na komponenty klasowe, lub c) przekazać stan do obiektu rodzica i stamtąd tworzyć komponenty, przekazując stan jako props.

Czym są komponenty wyższego rzędu?

Komponent wyższego rzędu (ang. Higher Order Component) to funkcja, która przyjmuje jako argument inny komponent i zwraca nowy komponent.

Tak jak zwykły komponent przekształca props na element na stronie, tak komponent wyższego rzędu przekształca komponent w inny komponent.

Co ważne nie modyfikuje przekazanego mu komponentu ani nie stosuje dziedziczenia w celu skopiowania jego zachowania.

Zamiast tego wkomponowuje przekazany komponent poprzez jego opakowanie w kontener.

Komponent wyższego rzędu jest zatem czystą funkcją (ang. pure function), nie mającą żadnych efektów ubocznych.

Ułatwia to re-użycie kodu, logiki i abstrakcji występujących w kodzie i jest dobrym sposobem na wydzielenie wspólnych odpowiedzialności do jednego spójnego komponentu.

Czym są granice błędów?

Granice błędów (ang. error boundary) to komponenty, które przechwytują błędy występujące wewnątrz drzewa komponentów, a następnie logują je i wyświetlają zastępczy interfejs UI, zamiast pokazywać ten niepoprawnie działający.

Aby komponent klasowy stał się granicą błędu, musi definiować jedną, lub obie z poniższych metod cyklu życia:

• static getDerivedStateFromError() do wyrenderowania zastępczego UI po rzuceniu błędu
• componentDidCatch() do zalogowania informacji o błędzie.

Granice błędów nie obsługują błędów w: procedurach obsługi zdarzeń (ang. event handlers), asynchronicznym kodzie, komponentach renderowanych po stronie serwera oraz błędów rzuconych w ramach działania samego error boundary.