Pytania rekrutacyjne z REACT

Z jakimi pytaniami z REACT możesz się spotkać na rozmowie rekrutacyjnej? Poniżej przedstawiamy najczęściej pojawiające się pytania i odpowiedzi.

1. Czym jest REACT?

To biblioteka Java Script, która służy do tworzenia interfejsów. Ta biblioteka zawiera wiele przydatnych funkcji, które rozbudowują możliwości wykorzystania JS w projektowaniu aplikacji. React został stworzony do tworzenia aplikacji jednostronicowych, ale możesz tworzyć w nim wszystko, od statycznych witryn po aplikacje mobilne z tymi samymi koncepcjami React.

REACT pozwala między innymi na:

• łatwe tworzenie interfejsów użytkownika za pomocą narzędzi np. JSX;
• zawiera komponenty do łatwego dostępu jedynie do konkretnej części interfejsu użytkownika;
• samoczynne aktualizacje interfejsu bez konieczności samodzielnej aktualizacji programu DOM.

2. Czym jest JSX

To taki sposób budowania interfejsów w React, który łączy w sobie prostą składnię języka HTML oraz funkcjonalność i dynamikę języka Java Script. JSX służy do projektowania struktury aplikacji. Jego wywołania mogą przypominać polecenia HTML, ale w rzeczywistości są wywołaniem funkcji Java Script np. React.createElement().

Przeglądarki nie są w stanie zrozumieć poleceń samego JSX, dlatego muszą być odpowiednio skompilowane za pomocą kompilatora Babel, który konwertuje HTML na wywołania JS.

3.W jaki sposób przekazać dane do komponentów REACT?

Można to zrobić na 2 sposoby: za pomocą Rekwizytów i kontekstowego API.

Rekwizyty to dane przekazywane od bezpośredniego rodzica komponentu. Rekwizyty to właściwości obiektów, dlatego można dowolnie ingerować w ich strukturę. Są deklarowane w komponencie podrzędnym, mogą mieć dowolną nazwę i mogą przyjmować dowolną prawidłową wartość np.:

funkcja Blog() {
const post = { title: "To moja strona www" };

return <BlogPost post={post} />;}

Kontekstowe API zawiera dane przekazywane od dostawcy kontekstu do dowolnego składnika, który z kontekstu korzysta.

Kontekst umożliwia swobodny dostęp do danych w dowolnym miejscu aplikacji (jeśli dostawca jest przekazywany w całym drzewie komponentów), bez użycia właściwości.

Dane kontekstowe są przekazywane do właściwości wartości za pomocą komponentu Context.Provider. Można go zlikwidować za pomocą składnika Context.Consumer lub haka useContext.

4. Różnice pomiędzy state a props w REACT

State to wartość, którą można odczytywać i aktualizować w komponentach React. Wartości state mogą być zmienne, ale są zadeklarowane wewnątrz komponentów, nie poza nimi, jak w przypadku wartości props.

Props to takie wartości, które są przekazywane do komponentów React i służą jedynie do odczytu (nie można ich aktualizować).

Podobieństwa pomiędzy state i props polegają na tym, że zmiany wprowadzone w każdym z nich powodują ponowne renderowanie komponentów, do których są przypisane.

5. Do czego służy funkcja fragmentów w REACT?

Fragmenty React to specjalna funkcja w React, która umożliwia pisanie grupowych elementów lub komponentów potomnych, bez tworzenia rzeczywistego węzła w DOM.

Składnia fragmentu wygląda jak pusty zestaw znaczników lub są to znaczniki oznaczone jako React.Fragment. Kiedy zachodzi potrzeba umieszczenia wielu elementów REACT w jednym komponencie, można użyć tej funkcji zamiast ogólnego elementu, takiego jak div w języku HTML.

6. Do czego służą klucze do list tworzonych w REACT?

Klucze są unikalną wartością, dzięki której React może określić, jakie elementy listy zostały dodane, zmienione, usunięte lub zmieniły swoją kolejność na liście. Klucze są niezbędne do automatycznej aktualizacji DOM, którą przeprowadza React. Klucze pozwalają odpowiednio zmodyfikować i uporządkować elementy listy w taki sposób, by React znał kolejność ich umieszczania i można było nadać elementom listy stabilny identyfikator.

7. Referencje ref w REACT

Atrybut ref to referencja elementu DOM w React. Ref można utworzyć za pomocą funkcji React.createRef(), ale może być także dowolną funkcją zwrotną (wtedy jest wywoływana elementem DOM odpowiadającym komponentowi) lub ciągiem znaków.

Referencje tworzone są za pomocą haka useRef i można je od razu umieścić w zmiennej. Ta zmienna jest następnie przekazywana do danego elementu React (nie komponentu), aby uzyskać odwołanie do podstawowego elementu DOM (czyli div, span itd.). Dobrze jest nie używać często funkcji ref.

8. Czym jest i do czego służy hak UseEffect?

Hak UseEffect wywołuje efekty uboczne w komponentach React. Efekty uboczne to operacje wykonywane poza kontekstem aplikacji React. Mogą to być np. żądania GET lub POST wysyłane do zewnętrznego punktu końcowego interfejsu API lub praca z interfejsem API przeglądarki, takim jak window.navigator czy document.getElementById().

9. REACT Contex vs REDUX

Redux jest prawdopodobnie jedną z najczęściej używanych globalnych bibliotek stanów (state) innej firmy dla Reacta. React context to sposób na dostarczanie i używanie danych w całej aplikacji, bez konieczności używania rekwizytów. React Context pomaga zapobiegać sytuacji, w której przekazuje się dane za pomocą podpór przez komponenty, które ich nie potrzebują. Sprawia, że można wykorzystać te dane dokładnie w tym komponencie, który ich potrzebuje.

React Contex nie zastąpi biblioteki stanów Redux, ponieważ nie jest stworzony do aktualizacji stanów. Za każdym razem, gdy zmieni się wartość zadeklarowana w kontekście, wszystkie jego elementy podrzędne będą ponownie renderowane, co może obniżyć ich wydajność.

10. Do czego są używane haki useCallback oraz useMemo?

Atrybut useCallback zapobiega ponownemu odtwarzaniu funkcji zadeklarowanych w zbiorze składników funkcji, przy każdym nowym renderowaniu. Atrybut useMemo zapamiętuje przeszłe wartości funkcji, jeśli ich argumenty pozostały takie same. Wówczas funkcja zwróci zapamiętaną wartość, nie funkcję, jak w przypadku argumentu useCallback.