Junior Web Developer - pytania rekrutacyjne - React - okładka

Junior Web developer – pytania rekrutacyjne – React

Opublikowano Autor Dominik SzczepaniakKategorie Frontend, JavaScript, Praca w ITCzas czytania 8min

Jedną z części rozmowy rekrutacyjnej na stanowisko Junior Web Developera jest rozmowa techniczna. Często podczas tej części rozmowy rekruter poprosi Cię o opisanie projektów, w których do tej pory brałeś(aś) udział. Warto wtedy opisać czego się nauczyłeś(aś), jakie trudności napotkałeś(aś) oraz jak udało Ci się z nimi uporać. W wielu przypadkach rekruterowi to wystarczy. Gdy jednak nie masz zbyt wiele doświadczenia, to rekruter będzie chciał sprawdzić Twoją wiedzę poprzez serię kilku pytań technicznych.

Część pytań pochodzi z portalu DevFAQ — bazy z pytaniami rekrutacyjnymi tworzonej przez społeczność. Więcej pytań rekrutacyjnych na stanowisko Junior Web Developera możesz poznać, pobierając mojego e-booka 106 Pytań Rekrutacyjnych Junior JavaScript Developer, który możesz odebrać, zapisując się na mój mailing.

Na blogu tematyce pytań technicznych poświęciłem szerszą uwagę w serii wpisów. Zachęcam do sprawdzenia pozostałych artykułów:

Pytania z tej serii możesz również traktować jako trening i sprawdzenie swoich umiejętności przed rozmową rekrutacyjną*.

*Wpis pochodzi z 2019 roku, a ekosystem JavaScript zmienia się dość dynamicznie. Część rekomendowanych metod i mechanizmów może nie być aktualna. Ponieważ od czasu publikacji niniejszego artykułu nie miałem zbyt wiele styczności z Reactem, to zachęcam do zweryfikowania lub samodzielnego opracowania odpowiedzi na poniższe pytania. Jeśli widzisz gdzieś pole do poprawy sugerowanej odpowiedzi, to nie zwlekaj z pozostawieniem komentarza. Dziękuję!

Nie przedłużając, w tym wpisie przedstawię Ci kilka pytań rekrutacyjnych związanych z podstawami frameworka React. Oczywiście każde z pytań otrzyma odpowiedź z objaśnieniem.

W jaki sposób można opakować zawartość wyrenderowanego komponentum, jeśli nie chcemy używać tagów HTML-owych?

Do opakowania zawartości komponentu możesz wykorzystać <React.Fragment>.  Jest to prosty wrapper, który po zbudowaniu projektu nie jest widoczny w DOM. Wykorzystanie Fragmentów jest banalne i przestawione jest na przykładzie poniżej.


render() {
  return (
    <React.Fragment>
      <h1>Hello world!</h1>
    </React.Fragment>
  );
}

Możesz również skorzystać z alternatywnej, skróconej składni.


render() {
  return (
    <>
      <h1>Hello world!</h1>
    </>
  );
}

Do czego służy setState?

Metoda setState pozwala na dodawanie zmian w stanie komponentu. Każda zmiana przeprowadzona w stanie powinna być wykonana poprzez wywołanie setState. Jest to rekomendacja z dokumentacji Reacta. Zmiany stanu z pominięciem dedykowanych metod może powodować nieprzewidywalne i niepożądane zachowanie aplikacji.


// Do
this.setState({ foo: 'bar' });

// Don't
this.state.foo = 'bar' ;

Do czego służy ref?

Ref pozwala na stworzenie referencji. Można ten mechanizm wykorzystać na przykład do zbudowania referencji do elementu HTML’a w komponencie Reacta. Aby utworzyć ref, należy skorzystać z hooka useRef. Następnie do tak stworzonego refa można się odwołać w elemencie HTML. Mając już stworzony ref, można skorzystać z właściwości current, aby operować na tym elemencie HTML w metodach komponentu.


import { useRef } from 'react';

export default function Form() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>
        Focus the input
      </button>
    </>
  );
}

W jaki sposób dokonać walidacji przekazanych propsów do komponentu?

Walidację propsów można wykonać, wykorzystując typy z TypeScript. Jest to obecnie rekomendowany sposób walidacji propsów w React. Niegdyś dokonywano tego z wykorzystaniem biblioteki prop-types. Wymagane było zdefiniowanie obiektu, w którym zawarto walidatory dla propsów. W takim walidatorze można było określić na przykład czy przekazany props ma określony typ oraz zdefiniować, czy jest on wymagany.


import PropTypes from 'prop-types';

// Kod komponentu
//...
// Koniec kodu komponentu

InputField.propTypes = {
	type: PropTypes.string.isRequired,
	placeholder: PropTypes.string,
	id: PropTypes.number.isRequired,
};

Jak można sprawić, żeby child component mógł modyfikować stan rodzica?

Najprostszym sposobem na modyfikację stanu rodzica z poziomu dziecka jest stworzenie metody w komponencie rodzica, który aktualizuje stan. Następnie wystarczy przekazać referencję do metody jako props do komponentu dziecka.


class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       flag: false
    }
  }

  handleChange = () => { 
    this.setState({flag: !this.state.flag})
  }

  render() {
    return (
      <>
        <Child changeFlag={this.handleChange}>
      </>
    );
  }
}


//Child component
const Child = ({changeFlag}) => {
	return (
		<button onClick={changeFlag}>Change<button/>
	);
};

Czym różnią się propsy od stanu komponentu?

W stanie przechowywane są dane komponentu, które można aktualizować za pomocą setState opisanego w jednym z poprzednich pytań. Od kiedy w React pojawiły się React Hooks, stan mogą również mieć komponenty tworzone za pomocą funkcji (kiedyś nazywane również stateless components). Zachęcam do poczytania więcej o useState w dokumentacji Reacta.

Drugim typem danych są propsy. Propsy przekazywane są do komponentu dziecka, aby później je w nim wykorzystać. Co istotne,  propsy są wartościami read-only i nie należy ich modyfikować. 

Co to są kontrolowane i niekontrolowane komponenty?

Komponenty kontrolowane są to komponenty, w których wykorzystujemy mechanizm opisany jednym z poprzednich pytań. Do komponentu dziecka, w którym na przykład znajduje się input, jako props przekazywana jest funkcja modyfikująca stan rodzica. Funkcja ta aktualizuje stan przy wpisaniu czegoś do inputa. Działając zgodnie z tym mechanizmem, można traktować dane przechowywane przez Reacta jako single source of truth.

Istnieją również komponenty niekontrolowane. Ten rodzaj komponentów operuje z kolei na refsach opisanych w innym pytaniu. Ten rodzaj komponentów jako source of truth traktuje DOM.

Twórcy Reacta w dokumentacji zachęcali raczej do korzystania z komponentów kontrolowanych. Natomiast znajdą się również przypadki, gdzie komponenty niekontrolowane znajdą swoje zastosowanie. Będą to przykłady integracji z pozareactowymi aplikacjami.

Jak działa obsługa zdarzeń w React?

React pozwala na obsługę zdarzeń poprzez wstrzykiwanie metod jako wartości właściwości znaczników HTML.


export default function Button() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

Omów cykl życia komponentu w React.

Cykl życia komponentu składa się z trzech faz: mounting, updating oraz unmounting. Każda z tych faz udostępnia kilka metod cyklu życia (lifecycle methods). Myślę, że opisywanie każdej z nich mija się z celem i polegałoby na przepisaniu dokumentacji, dlatego je tutaj tylko wymienię, a po opis odsyłam do dokumentacji Reacta.

Mounting to pierwsza faza cyklu życia, gdzie komponent jest powoływany do życia. Podczas tego cyklu życia, do dyspozycji są metody constructor, getDerivedStateFromProps, render, componentDidMount.

W fazie cyklu updating obsługiwane jest przyjmowanie propsów oraz zmiany w stanie komponentu. Dostępne metody to getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate, componentDidUpdate.

W fazie cyklu unmounting następuje odmontowanie komponentu i usunięcie go z DOM. Do dyspozycji dostępna jest jedynie metoda componentWillUnmount.

Jak działa Virtual DOM?

Virtual DOM jest to abstrakcja, która służy optymalizacji działania DOM. Zmiany zachodzące w aplikacji Reactowej aplikowane są w Virtual DOM. Następnie, Virtual DOM jest porównywany z DOM przeglądarki za pomocą algorytmu porównawczego i zmiany są synchronizowane w taki sposób, aby zminimalizować ilość zmian wprowadzanych do przeglądarkowego DOM.

Główną korzyścią z wykorzystania Virtual DOM jest większa wydajność niż w przypadku operowania bezpośrednio na DOM przeglądarki.

Podsumowanie

Te kilkanaście pytań to o wiele za mało, by być dobrze przygotowanym do rozmowy rekrutacyjnej. Jeszcze raz gorąco zachęcam do sprawdzenia innych wpisów na blogu oraz pobranie e-booka 106 Pytań Rekrutacyjnych Junior JavaScript Developer. Zachęcam też do zostawiania komentarzy i udostępnienia tego wpisu znajomym, którym ta wiedza może się przydać.

Materiały dodatkowe i źródła

Czy wiesz, że devszczepaniak.pl jest na Facebooku?

Chcesz otrzymywać informację o nowych wpisach zaraz po publikacji?
Koniecznie zaobserwuj devszczepaniak.pl na Facebooku.

Udostępnij wpis

Szukasz taniego i dobrego VPS? Skorzystaj z Mikrusa i przy zakupie odbierz dodatkowy miesiąc usługi za darmo!

Chcesz docenić moją pracę? Postaw mi kawę! 🤗

Ikona buyoffee

Dominik Szczepaniak

Zawodowo Senior Software Engineer w CKSource. Prywatnie bloger, fan włoskiej kuchni, miłośnik jazdy na rowerze i treningu siłowego.

Inne wpisy, które mogą Cię zainteresować

Zapisz się na mailing i odbierz e-booka

Zapisując się na mój mailing, otrzymasz darmowy egzemplarz e-booka 106 Pytań Rekrutacyjnych Junior JavaScript Developer! Będziesz też otrzymywać wartościowe treści i powiadomienia o nowych wpisach na skrzynkę e-mail.

Subscribe
Powiadom o
guest

0 komentarzy
Inline Feedbacks
View all comments