Najlepsze pytania i odpowiedzi na rozmowę dla programisty React

• React to front-endowa biblioteka JavaScript stworzona przez Facebooka w 2011 roku.
• Opiera się na podejściu komponentowym, które ułatwia tworzenie komponentów UI wielokrotnego użytku.
• Służy do budowania złożonych i interaktywnych interfejsów webowych oraz mobilnych.
• Choć został otwarty dopiero w 2015 roku, stoi za nim jedna z największych społeczności.

Główne cechy Reacta to:

1. Używa wirtualnego DOM-u zamiast prawdziwego.
2. Obsługuje renderowanie po stronie serwera.
3. Stosuje jednokierunkowy przepływ danych, czyli jednokierunkowe wiązanie danych.

Do głównych zalet Reacta należą:

1. Poprawia wydajność aplikacji.
2. Wygodnie używa się go zarówno po stronie klienta, jak i serwera.
3. Dzięki JSX kod jest bardziej czytelny.
4. React łatwo integruje się z innymi frameworkami, takimi jak Meteor czy Angular.
5. Pisanie testów interfejsu w Reakcie stało się wyjątkowo proste

Ograniczenia Reacta to:

1. React to tylko biblioteka, a nie kompletny framework
2. Biblioteka jest bardzo duża i wymaga czasu, żeby ją zrozumieć
3. Początkującym programistom może sprawiać trudność
4. Kodowanie bywa zawiłe, bo używa szablonów inline i JSX.

JSX to skrót od JavaScript XML. To rodzaj pliku używany przez Reacta, który łączy ekspresyjność JavaScriptu ze składnią przypominającą szablony HTML. Dzięki temu plik HTML jest łatwiejszy do zrozumienia. Taki plik czyni aplikacje bardziej niezawodnymi i poprawia ich wydajność. Poniżej przykład JSX:

render(){
   return(
      <div><h1> Hello World from Ideamotive!</h1>
</div>
   );
}

Wirtualny DOM to lekki obiekt JavaScript, będący pierwotnie kopią prawdziwego DOM-u. To drzewo węzłów, które opisuje elementy, ich atrybuty i zawartość jako obiekty i ich właściwości. Funkcja render Reacta tworzy drzewo węzłów z komponentów. Następnie aktualizuje to drzewo w odpowiedzi na zmiany w modelu danych wywołane działaniami użytkownika lub systemu.

Wirtualny DOM działa w trzech prostych krokach.

1. Gdy tylko zmienią się dane, cały interfejs jest ponownie renderowany w widoku wirtualnego DOM-u. 
2. Następnie obliczana jest różnica między poprzednią a nową reprezentacją DOM-u.
3. Po zakończeniu obliczeń w prawdziwym DOM-ie aktualizowane jest tylko to, co faktycznie się zmieniło.

Przeglądarki potrafią czytać wyłącznie obiekty JavaScript, a JSX nie jest zwykłym obiektem JavaScript. Żeby przeglądarka odczytała JSX, trzeba najpierw przekonwertować plik JSX na obiekt JavaScript za pomocą konwerterów takich jak Babel, a dopiero potem przekazać go do przeglądarki.

Składnia zmieniła się z ES5 na ES6 w następujących aspektach:

1. require vs import
2. export vs exports
3. komponent i funkcja
4. props
5. state

Komponenty to elementy składowe interfejsu aplikacji w Reakcie. Dzielą cały interfejs na małe, niezależne i wielokrotnie używane części. React renderuje potem każdy z tych komponentów niezależnie od pozostałych, nie wpływając na resztę interfejsu.

Każdy komponent Reacta musi mieć render (). Zwraca on pojedynczy element Reacta, będący reprezentacją natywnego komponentu DOM. Jeśli trzeba wyświetlić więcej niż jeden element HTML, należy zgrupować je w jednym otaczającym tagu, takim jak <form>, <group>, <div> itd. Funkcja musi być czysta, czyli przy każdym wywołaniu zwracać ten sam wynik.

Props to skrót od Properties w Reakcie. Są tylko do odczytu i muszą pozostać czyste, czyli niezmienne. Zawsze przekazuje się je od komponentu nadrzędnego do potomnego w całej aplikacji. Komponent potomny nigdy nie może odesłać propa do rodzica. Pomaga to utrzymać jednokierunkowy przepływ danych i jest powszechnie używane do prezentowania dynamicznie generowanych danych.

Stan to serce komponentów Reacta. Jest źródłem danych i powinien być możliwie prosty. Zasadniczo stan to obiekty, które decydują o renderowaniu i zachowaniu komponentów. W odróżnieniu od propsów są zmienne i tworzą dynamiczne oraz interaktywne komponenty. Sięga się do nich przez this.state ().

Funkcje strzałkowe to krótsza składnia zapisu wyrażenia funkcyjnego. Nazywa się je też funkcjami „grubej strzałki” (=>). Pozwalają poprawnie związać kontekst komponentu, bo w ES6 automatyczne wiązanie nie jest domyślnie dostępne. Funkcje strzałkowe przydają się głównie przy pracy z funkcjami wyższego rzędu.

Cykl życia komponentu Reacta ma trzy etapy:

1. Faza początkowego renderowania: to moment, w którym komponent zaczyna swoje życie i trafia do DOM-u.
2. Faza odświeżania: po dodaniu komponentu do DOM-u może on zostać odświeżony i ponownie wyrenderowany wyłącznie wtedy, gdy zmieni się właściwość lub stan. Dzieje się to tylko na tym etapie.
3. Faza odmontowania: ostatnia faza cyklu życia komponentu, w której komponent jest niszczony i usuwany z DOM-u.

Do najważniejszych metod cyklu życia należą:

• componentDidMount () - wykonywana po stronie klienta dopiero po pierwszym renderze.
• shouldComponentUpdate () - zwraca true lub false w zależności od warunków. Jeśli chcesz, żeby komponent się zaktualizował, zwróć true, w przeciwnym razie false. Domyślnie zwraca false.
• componentDidUpdate () - wywoływana bezpośrednio po renderowaniu.
• componentWillUnmount () - wywoływana po odmontowaniu komponentu z DOM-u. Służy do zwolnienia pamięci.

W Reakcie zdarzenia to reakcje wywoływane przez określone działania, takie jak najechanie myszą, kliknięcia czy naciśnięcia klawiszy. Obsługa tych zdarzeń przypomina obsługę zdarzeń na elementach DOM. Jest jednak kilka różnic składniowych, na przykład:

• Nazwy zdarzeń zapisuje się w camelCase, a nie samymi małymi literami.
• Zdarzenia przekazuje się jako funkcje, a nie łańcuchy znaków.

Argument zdarzenia zawiera zestaw właściwości z nim związanych. Każdy typ zdarzenia ma własne właściwości i zachowanie, dostępne wyłącznie przez jego handler.

class Display extends React.Component({
show(evt) {
// code
},
render() {
// Render the div with an onClick prop (value is a function)
return (

<div onClick={this.show}>Click Me!</div>
);
}
});

Zdarzenia syntetyczne to obiekty będące międzyprzeglądarkowym opakowaniem natywnego zdarzenia przeglądarki. Łączą zachowania różnych przeglądarek w jedno API. Robi się to po to, żeby zdarzenia miały spójne właściwości niezależnie od przeglądarki.

Refs to skrót od References w Reakcie. To atrybut, który pozwala przechować odwołanie do konkretnego elementu lub komponentu zwracanego przez funkcję render komponentu. Służy do zwracania odwołań do konkretnego elementu lub komponentu zwróconego przez render (). Przydaje się, gdy potrzebujemy pomiarów DOM-u albo chcemy dodać metody do komponentów.

Oto przypadki, w których warto użyć odwołań:

1. Gdy trzeba sterować fokusem, zaznaczeniem tekstu lub odtwarzaniem mediów
2. Aby uruchomić potrzebną animację
3. Integracja z zewnętrznymi bibliotekami operującymi na DOM-ie

Kod można podzielić na moduły za pomocą export i import. Pozwalają one zapisywać komponenty osobno, w różnych plikach.

Formularze w Reakcie przypominają formularze HTML. W Reakcie stan znajduje się jednak we właściwości state komponentu i jest aktualizowany wyłącznie przez setState (). Elementy nie mogą więc same aktualizować swojego stanu, a ich wysyłkę obsługuje funkcja JavaScript. Ma ona pełny dostęp do danych, które użytkownik wpisuje w formularzu.

Komponent wyższego rzędu to zaawansowany sposób ponownego wykorzystania logiki komponentu. Zasadniczo to wzorzec wynikający z kompozycyjnej natury Reacta. HOC-e to własne komponenty, które opakowują inny komponent. Mogą przyjąć dowolny dynamicznie przekazany komponent potomny, ale nie modyfikują ani nie kopiują zachowań komponentów wejściowych. Można powiedzieć, że HOC-e są komponentami „czystymi”.

HOC przydaje się do wielu zadań, takich jak:

• Ponowne użycie kodu, logiki i abstrakcja inicjalizacji
• Przejmowanie renderowania
• Abstrakcja i manipulowanie stanem
• Manipulowanie propsami

Pure components to najprostsze i najszybsze komponenty, jakie można napisać. Mogą zastąpić każdy komponent, który ma tylko render (). Upraszczają kod i poprawiają wydajność aplikacji.

Klucze służą do identyfikowania unikalnych elementów wirtualnego DOM-u wraz z powiązanymi danymi sterującymi interfejsem. Pomagają Reactowi optymalizować renderowanie przez ponowne wykorzystanie istniejących elementów w DOM-ie. Klucz musi być unikalną liczbą lub łańcuchem, dzięki któremu React po prostu zmienia kolejność elementów zamiast renderować je od nowa. Zwiększa to wydajność aplikacji.

Oto główne problemy z frameworkiem MVC:

• Manipulacja DOM-em była bardzo kosztowna
• Aplikacje były wolne i nieefektywne
• Występowały ogromne straty pamięci
• Z powodu cyklicznych zależności powstawał skomplikowany twór złożony z modeli i widoków.

Flux to wzorzec architektoniczny zapewniający jednokierunkowy przepływ danych. Kontroluje dane pochodne i zapewnia komunikację między wieloma komponentami przez centralne repozytorium, które zarządza wszystkimi danymi. Wszelkie aktualizacje danych w aplikacji powinny odbywać się wyłącznie tutaj. Flux zapewnia stabilność aplikacji i ogranicza błędy w czasie wykonania.