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:

• Junior Web Developer – pytania rekrutacyjne cz. 1
• Junior Web Developer – pytania rekrutacyjne cz. 2
• Junior Web Developer – pytania rekrutacyjne cz. 3
• Junior Web Developer – pytania rekrutacyjne cz. 4
• Junior Web Developer – pytania rekrutacyjne cz. 5
• Programista – pytania rekrutacyjne – TypeScript
• Programista – pytania rekrutacyjne – Git
• Programista – pytania rekrutacyjne – Docker
• Programista – pytania rekrutacyjne – bazy danych

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

• Legacy React Docs – Fragments
• Legacy React Docs – Using State Correctly
• Why Not To Modify React State Directly
• Legacy React Docs – What does setState do?
• Understanding ReactJS — setState
• Legacy React Docs – Refs
• Legacy React Docs – Refs and the DOM
• Legacy React Docs – Typechecking With PropTypes
• React Docs – Referencing Values with Refs
• What is the difference between state and props in React?
• React Legacy Docs – Components and Props
• What are React controlled components and uncontrolled components?
• Controlled and uncontrolled form inputs in React don’t have to be complicated
• React Legacy Docs – Controlled Components
• React Legacy Docs – Uncontrolled Components
• React Legacy Docs – Handling Events
• React Lifecycle Methods Diagram by Dan Abramov
• React Lifecycle Methods Diagram
• React Legacy Docs – Component Lifecycle
• Virtual DOM
• React Docs – Virtual DOM and Internals
• React Legacy Docs – Reconciliation
• The difference between Virtual DOM and DOM

Zaobserwuj mnie na LinkedIn!

LinkedIn jest głównym medium, poza blogiem, gdzie publikuję swoje przemyślenia. Zaobserwuj mój profil na LinkedIn, by być na bieżąco!
Zachęcam też do zaobserwowania devszczepaniak.pl na Facebooku, gdzie oprócz informacji o nowych artykułach publikuję linki do ciekawych treści.

Udostępnij wpis

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

📖 Koniecznie sprawdź ofertę księgarni Helion oferującej tysiące książek dla programistów w dobrych cenach! Kupując z tego linku, pomagasz w rozwoju bloga.

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