Top 50 pitanja i odgovora za React intervju koje morate znati

ReactJS programeri vrlo su traženi i za to postoji dobar razlog. Ali morat ćete dokazati svoju stručnost u okviru da biste dobili posao.

Sljedeća su često postavljana pitanja o razvoju Reacta i njihovi odgovori kojih biste trebali biti svjesni. Uključuje sve, od osnova do naprednijih tema.

1. Što je React?

React je besplatna JavaScript biblioteka otvorenog koda za razvoj korisničkog sučelja, koja koristi komponente za stvaranje izlaza za jednostraničke aplikacije. React je razvio Facebook (Meta), a održava ga zajednica programera.

2. Navedite važne značajke Reacta

Najvažnije značajke Reacta uključuju:

1. Jednostavnost korištenja
2. Brz razvoj
3. Upotreba komponenti
4. jsx
5. Virtualni DOM
6. Kvalitetni
7. Jednosmjerno povezivanje podataka

3. Gdje je Reactov repozitorij projekta?

React je mono-repozitorij koji živi na https://github.com/facebook/react. Biti mono-repozitorij znači da su sav njegov kod i drugi izvori pohranjeni na istom mjestu radi lakšeg razvoja i upravljanja.

4. Koja je trenutna stabilna verzija Reacta?

Najnovija stabilna verzija Reacta od 14. lipnja 2022. je 18.2.0.

5. Navedite razlike između React Native i ReactJS

React i ReactJS su isti, dok je React Native izgrađen na Reactu. Zbog svojih razlika, React se koristi u stvaranju dinamičkih i responzivnih korisničkih sučelja za web aplikacije, dok je React Native dizajniran za izradu aplikacija kao mobilnih aplikacija.

6. Koja je razlika između elementa i komponente?

React element je jednostavan i nepromjenjiv objekt stvoren da predstavlja DOM čvor. Budući da je nepromjenjiv znači da se ne može promijeniti nakon što je kreiran, budući da se prikazuje u DOM-u. S druge strane, React komponenta je promjenjiva i proizvodi JSX izlaz nakon renderiranja.

7. Kako se stvara komponenta?

Postoje dva načina za stvaranje komponente u Reactu: 1.) Komponente funkcije i 2.) Komponente klase. Kao što nazivi govore, funkcijska komponenta se stvara pomoću deklaracije funkcije, dok se komponenta klase stvara pomoću deklaracije klase.

//function component
function Hello({ message }) {
  return <h1>{`Function hello, ${message}`}</h1>

}
//class component
class Hello extends React.Component {
  render() {
    return <h1>{`Class hello, ${this.props.message}`}</h1>
  }
}

8. Navedite 4 faze React komponente

React komponenta prolazi sljedeće 4 faze u svom životnom ciklusu:

1. Početno stanje – Konstrukcija komponente u zadanom stanju s početnim podupiračima
2. Faza montaže – JSX renderiranje komponente
3. Faza ažuriranja – Promjene stanja komponenti i ponovno crtanje aplikacije
4. Faza demontaže – Uklanjanje komponente iz DOM-a

9. Objasnite što znači komponenta višeg reda

Komponenta višeg reda (HOC) je Reactova metodologija za stvaranje komponenti. Koristi postojeću komponentu za stvaranje nove s dodatnom funkcionalnošću. Drugim riječima, HOC je funkcija koja uzima komponentu kao argument i vraća novu komponentu s dodanim značajkama.

10. Što su kontrolirane i nekontrolirane komponente?

Kontrolirana komponenta je React komponenta koja preuzima svoju vrijednost kroz props i obavještava sustav o svim promjenama putem povratnih poziva. Njime upravlja nadređena komponenta koja upravlja njegovim su i prosljeđuje vrijednosti kao rekvizite kontroliranoj komponenti. Nekontrolirana komponenta, s druge strane, upravlja svojim stanjem i morat ćete postaviti upit PRESUDA koristeći ref da dobije svoju vrijednost.

11. Što su Props u Reactu?

Props u Reactu je samo jednostavan način da se izraze svojstva, a time se referirate na svojstva komponente. Rekviziti se koriste za prijenos podataka od nadređene komponente do jedne ili više podređenih komponenti, a podređenoj komponenti su samo za čitanje.

12. Što su rekviziti.djeca?

Atribut Props.children sadrži informacije o svim sadržajima komponente koja ima početnu i završnu oznaku. Ta se djeca odnose na sve elemente koji su definirani unutar trenutne komponente, a mogu biti jedan, više ili nijedan.

13. Možete li ažurirati rekvizite u Reactu?

Ne, rekviziti u Reactu su odozgo prema dolje i nepromjenjivi su. To znači da komponenta može slati sva svojstva koja želi svojoj djeci, ali ne može ažurirati svoje propise. Samo roditelj može ažurirati svoje rekvizite.

14. Što je JSX?

JSX je kratica za JavaScript XML. To je proširenje JavaScript sintakse koje omogućuje pisanje HTML-a unutar react koda. Preglednik ionako ne razumije JSX, pa ga React mora prikazati u čitljiv HTML kod.

15. Koja je razlika između komponente i elementa

Element je definicija virtualnog DOM čvora bez stanja i nepromjenjiva. Sadrži i tip i svojstvo, ali ne i metode koje ima komponenta. Ovaj nedostatak metoda čini ga brzim.

16. Što je stanje u Reactu?

Stanje u Reactu odnosi se na ugrađeni objekt u komponenti koji se koristi za čuvanje i upravljanje informacijama o toj komponenti. Stanje se može promijeniti tijekom vremena i stoga će pokrenuti ponovno prikazivanje te komponente. Morate definirati stanje u metodi konstruktora komponente, inače komponenta postaje bez stanja.

17. Što je komponenta bez stanja?

React komponenta bez stanja nema stanje. To znači da ne možete postaviti niti njegovo stanje pomoću this.setState() metoda niti su je prikazali. No, komponenta bez stanja može imati rekvizite.

18. Kako ažurirati stanje u Reactu

Stanje komponente ažurirate pozivom this.setState() metoda.

19. Objasnite Reactov strogi način rada

Reactov strogi način rada je alat koji pomaže programeru otkriti potencijalne probleme u aplikaciji aktiviranjem dubljih provjera komponenti i isticanjem više upozorenja. Strogi način rada dostupan je samo u razvojnom načinu rada.

20. Što znači Lifting State Up u Reactu?

To znači dopustiti da podređene komponente dijele zajedničko stanje od svog nadređenog, jer to čini stvarima lakšim za upravljanje nego da svaka podređena komponenta pojedinačno upravlja zajedničkim stanjem.

21. Kako prosljeđujete podatke u React?

Podatke prosljeđujete u React koristeći props i povratne pozive. Reactovi rekviziti su jednosmjerni, dopuštajući svojstvima da prijeđu samo od nadređenih komponenti do njihove djece. Da biste prenijeli podatke od podređene komponente do nadređene, morate koristiti funkciju povratnog poziva.

22. Definirajte Tok u Reactu

Flux je jednosmjerni koncept za usmjeravanje protoka podataka u aplikaciji. Biti jednosmjeran znači da se podaci mogu prenositi samo od nadređenih do podređenih komponenti. Flux također može uključivati ​​više pohrana podataka po aplikaciji.

23. Definirajte Redux u Reactu

Redux je korisna JavaScript biblioteka otvorenog koda za upravljanje složenim stanjima u aplikaciji. Neovisan je i može se koristiti u drugim okvirima kao što je Angular. Za razliku od Fluxa, Redux centralizira upravljanje stanjem aplikacije, čime se olakšava izgradnja složenih korisničkih sučelja.

24. Kada biste trebali koristiti Redux?

Ne trebaju sve aplikacije Redux. Ali pomaže u sljedećim uvjetima:

1. Kada imate veliku količinu stanja aplikacije u svojoj aplikaciji
2. Kada je logika vaše aplikacije složena
3. Kada vaša aplikacija ima veliku bazu kodova
4. Kada morate često ažurirati aplikaciju
5. Kada imate mnogo ljudi koji rade na aplikaciji

25. Koja je glavna razlika između Reduxa i Fluxa?

Glavna razlika između to dvoje je u tome što Redux upravlja svim podacima aplikacije iz jedne trgovine, dok pod Fluxom možete imati više trgovina.

26. Nabrojite komponente Reduxa

Postoje 4 glavna dijela Reduxa:

1. dućan – Ovdje pohranjujete stanje aplikacije.
2. Akcijski – Ovo su događaji zbog kojih aplikacija šalje podatke u Redux trgovinu.
3. Redukcija – Ovo je funkcija koja prihvaća trenutno stanje aplikacije i radnju kao argumente, a zatim vraća novo stanje kao rezultat.
4. middleware – Ova značajka omogućuje razvojnom programeru da uhvati sve radnje iz komponente prije nego što dođu do reduktorske funkcije.

27. Što su React Hookovi?

React hookovi su značajka funkcijskih komponenti koje vam omogućuju pristup različitim React značajkama, kao što su podaci o stanju i ažuriranja renderiranja. Predstavljen je u Reactu 16.8.

28. Navedite vrste kuka u Reactu

Postoji 15+ kuka u Reactu, počevši od osnovnih kuka kao što su useState, useEffect i useContext do dodatnih kuka kao što su useCallback, useReducer, useMemo, useRef i tako dalje.

29. Što su Fragmenti?

React fragment je prikladan način za grupiranje više podređenih elemenata u komponentu, bez njihovog dodavanja u DOM. Jednostavno definirate oznaku pomoću:

<>

or

i učitajte sve podređene elemente koje želite unutra. Jedina razlika je u tome što kratka verzija <> ne prihvaća ključeve i atribute, dok duga verzija prihvaća.

30. Navedite glavne metode paketa react-dom

To su createPortal() za renderiranje djece u vanjski DOM i flushSync() za ispiranje ažuriranja. Tu su i metode render() i hydrate(), koje su od Reacta 18 zamijenjene metodama createRoot() i hydrateRoot().

31. Što su React tipke?

Ključevi su jedinstveni identifikatori koji se najbolje koriste za upravljanje popisima. Tipke olakšavaju prepoznavanje pojedinačnih stavki na popisu i saznanje kada je svaka stavka ažurirana, izbrisana ili na bilo koji način promijenjena.

32. Zašto su React tipke važne?

Ključevi su važni u Reactu jer pomažu u učinkovitom prikazivanju pravog DOM-a. React je dobar jer pokušava minimizirati koje komponente ponovno renderira nakon događaja, a korištenje ključeva na popisu sprječava React da mora ponovno renderirati cijele popise, što može biti problem s velikim popisima.

33. Što je događaj u Reactu?

Događaj je svaka radnja u aplikaciji koja dolazi ili od korisnika ili od sustava. Događaj može varirati od klika mišem ili dodira na mobilnim uređajima do promjene veličine prozora, pritiska tipke, povlačenja, fokusiranja i tako dalje.

34. Objasnite što Sintetički događaj Sredstva

Sintetički događaj omot je oko izvornih događaja preglednika, a problem je u tome što različiti preglednici različito nazivaju svoje događaje. React koristi sintetičke događaje kako bi izbjegao problem stvaranja više implementacija i metoda za sve različite preglednike. Na ovaj način React održava zajedničke nazive za sve različite događaje preglednika kao objedinjeni API.

35. Što je Webpack?

Webpack je sustav povezivanja modula koji se koristi za kombiniranje i smanjivanje JavaScript i CSS datoteka. Izgrađen je na Node.js i koristan je pri radu s velikim brojem datoteka ili sredstava koja nisu kodirana poput slika i fontova.

36. Što je create-react-app?

Create-react-app je alat koji vam pomaže stvoriti React aplikaciju na jednoj stranici u vašem Node.js okruženju. Generira sve datoteke i mape koje su vam potrebne za pokretanje osnovne aplikacije i preuzimate ih odatle. Zahtijeva Node verziju 14.0.0 naviše i npm od ver. 5.6.

Upotreba je jednostavna:

npx create-react-app myNewApp

cd myNewApp

npm početak

37. Možete li renderirati poslužiteljsku stranu s Reactom?

Da, možete, iako za velike projekte može biti potrebno mnogo resursa. Renderiranje na strani poslužitelja je korisno jer poboljšava korisničko iskustvo i SEO. Trebat će vam okruženje Node.js, bundler poput Webpacka i okvir poput Dalje.js i Remix za renderiranje React aplikacija tijekom izvođenja. Rješenje za intenzivnu upotrebu resursa je korištenje statičnog generatora web mjesta, kao što je Next.js temeljen Gatsby.

38. Objasnite što radi funkcija strelice

Funkcija strelice je jednostavno kraći način definiranja funkcija. To je ES6 skraćenica koja zamjenjuje:

= funkcija() sa ()=>.

Na primjer:

test = funkcija(){

return “Ovo je test”;

}

tada postaje:

test = () => {

return "Ovo je test";

}

ili za izjave u jednom retku:

test = () => “Ovo je test”;

39. Što je a Reakcijski usmjerivač?

React router je biblioteka koja pruža funkcionalnost usmjeravanja u React aplikaciji. Olakšava uključivanje i korištenje bogatih navigacijskih komponenti, što može biti od velike pomoći za velike ili složene projekte.

40. Koje su glavne prednosti korištenja React Routera?

Stvara različite url staze za vašu aplikaciju i pruža vrijednosti window.location i objekt povijesti.

41. Što je ComponentWillUnmount()?

Ovo je komponentna metoda koja se poziva kad god se React sprema uništiti komponentu. To je lijepo mjesto za čišćenje stvari, brisanje mjerača vremena, otkazivanje mrežnih zahtjeva i rješavanje drugih važnih problema s deinicijalizacijom.

42. Što je The Constructor()?

Konstruktor je metoda komponente koja se poziva tijekom inicijalizacije komponente. Obično se koristi za inicijalizaciju lokalnih stanja i za vezanje metoda rukovatelja događajima.

43. Što je virtualni DOM?

Reactov virtualni DOM je lagana kopija stvarnog DOM-a HTML dokumenta. Koristi se za učinkovito upravljanje i ažuriranje promjena na stvarnom DOM-u.

44. Koje su prednosti virtualnog DOM-a nad stvarnim DOM-om?

Virtualni DOM je lagan i brži za renderiranje od stvarnog DOM-a, a to ga čini učinkovitijim da se prvo renderira u virtualni DOM i mijenja pravi DOM samo kada postoji potreba. Svaki čvor na stvarnom DOM-u ima odgovarajuću komponentu na virtualnom DOM-u, a nakon što dođe do promjena na virtualnoj komponenti nakon renderiranja, React tada točno zna koji pravi HTML čvor treba ažurirati ili izbrisati.

45. Objasnite pojam izmirenje u Reactu

Usklađivanje je Reactova metoda ažuriranja stvarnog DOM-a samo kada je to potrebno, provjerom ažuriranih verzija virtualnog DOM-a putem razlikovanja i ažuriranjem samo točnih čvorova koji su se promijenili na stvarnom DOM-u.

46. Objasnite pojam Profiler u Reactu

Profiler je React alat koji pomaže optimizirati aplikaciju mjerenjem koliko se puta aplikacija renderira i koliko je vremena potrebno za renderiranje svake komponente. To pomaže razvojnom programeru da identificira dijelove aplikacije koje bi možda trebala optimizirati.

47. Objasnite pojam Kontekst u Reactu

Kontekst je metoda prijenosa podataka između komponenti Reacta na mnogim razinama bez potrebe za propuštanjem podataka kroz svaku razinu ugniježđivanja pomoću rekvizita. Najbolje ga je koristiti za jednostavno dijeljenje podataka s mnogim komponentama koje ne trebaju stalna ažuriranja, kao što su informacije o temi i korisnički podaci. Nedostatak mu je što može otežati ponovnu upotrebu komponenti.

48. Objasnite pojam Montiranje u Reactu

Montiranje u React je proces pričvršćivanja komponente kao čvora na DOM. Demontiranje je suprotno.

49. Objasnite pojam vraćanje u Reactu

Renderiranje je proces crtanja komponente. Obično se događa kada se stanje komponente promijeni i React mora ponovno nacrtati korisničko sučelje. Ako se komponenta ponovno iscrtava tijekom iscrtavanja, tada se ponovno iscrtavaju i njezine podređene komponente.

50. Objasnite pojam Granica pogreške u Reactu

Granica pogreške odnosi se na React komponentu koja hvata JavaScript pogreške iz svojih podređenih komponenti, bilježi pogreške i prikazuje pomoćno korisničko sučelje umjesto čvorova koji su se srušili. Granice grešaka uvedene su u React 16.

Zaključak

Došli smo do kraja ovog popisa od 50 najvažnijih pitanja za React intervju koje morate znati i nadamo se da biste do sada trebali imati dobru ideju o tome što možete očekivati.

Također biste trebali imati na umu da ništa ne ostaje isto i da vaš intervju može ići u bilo kojem smjeru. Stoga biste trebali nastaviti učiti i biti u toku.