- React.js: Wprowadzenie do kursu od podstaw
- Poznaj React.js
- Pierwszy komponent w React.js
- Props czyli atrybuty w React.js
- Podział na komponenty w React.js
- Klasy jako komponenty React.js
- Interakcja z komponentami React.js
- Stan komponentów React.js
- State w React.js 2
- Metody cyklu życia komponentu w React.js
- React.js w przykładach: filtrowanie statycznej listy
- Tworzenie aplikacji React.js dzięki create-react-app
- React.js na GitHub Pages dzięki create-react-app
- Testowanie aplikacji React.js — podstawy Enzyme
- Testowanie React.js w Enzyme — props, state i interakcje
- Poprawne bindowanie funkcji w React.js
- Odpowiadam na pytania: Babel, ECMAScript, destrukturyzacja, onClick, className
- Komunikacja pomiędzy komponentami w React.js
- Komunikacja z API w React.js
- Formularze w React.js — kontrolowane komponenty
- Formularze w React.js — niekontrolowane komponenty
- Odpowiadam na pytania: props, nawiasy klamrowe, funkcje vs klasy, import react
- TDD w React.js z pomocą react-testing-library
- Flux i Redux: globalny store i jednokierunkowy przepływ danych
- React + Redux — kurs: wprowadzenie i podstawy
- React + Redux — filtrowanie listy, proste selektory
- Projektowanie komponentów: Presentational & Container Components
- Asynchroniczność w Redux: redux-thunk
- Kiedy używać state, a kiedy Redux?
- Nowe metody cyklu życia: getDerivedStateFromProps i getSnapshotBeforeUpdate
- Leniwe ładowanie komponentów w React dzięki import
- Higher Order Reducers — Redux i powtarzanie kodu
- React Hooks — wprowadzenie i motywacja
- React Hooks: useState, czyli stan w komponentach funkcyjnych
- React Hooks: useState — wiele stanów, callbacki i inne niuanse
- React Hooks: useEffect — efekty uboczne w komponencie
- React Hooks a żądania do API
- useReducer — przenoszenie logiki poza komponent
- useMemo, useCallback, czyli rozwiązanie problemów ze zmieniającymi się propsami
- Wady React Hooks
- React Hooks: Piszemy własne hooki!
Do tej pory używaliśmy prostych funkcji i z nich tworzyliśmy komponenty React. Mimo, że przeważająca część komponentów, które tworzę są właśnie takimi prostymi funkcjami, to jednak nie wszystkie. Funkcje są bardzo przydatne, jednak poniekąd ograniczone. Jak więc inaczej można tworzyć komponenty w React.js? Używając klas!
Stateless Functional Component
SFC, albo Stateless Functional Component — tak profesjonalnie nazywają się te komponenty, które do tej pory tworzyliśmy. Bezstanowe, funkcyjne — dokładnie takie one są 🙂 Spróbujmy przepisać SFC, które wcześniej stworzyliśmy na klasę:
function ContactItem({ login, name, department }) {
const imgUrl = `https://api.adorable.io/avatars/55/${login}.png`;
return (
<li className="item">
<img src={imgUrl} className="ui mini rounded image" />
<div className="content">
<h4 className="header">{name}</h4>
<div className="description">{department}</div>
</div>
</li>
);
}
Class w React.js
Korzystamy z klas znanych z ES2015. Klasa ta koniecznie musi dziedziczyć po React.Component
(lub PureComponent
— o tym kiedy indziej). Implementujemy w niej tylko jedną metodę: render
. Oto kod poniżej:
class ContactItem extends React.Component {
render() {
const { login, name, department } = this.props
const imgUrl = `https://api.adorable.io/avatars/55/${login}.png`;
return (
<li className="item">
<img src={imgUrl} className="ui mini rounded image" />
<div className="content">
<h4 className="header">{name}</h4>
<div className="description">{department}</div>
</div>
</li>
);
}
}
Widzisz jakieś znaczące różnice?
Po co Ci class w React.js?
Na razie nie widać żadnej przewagi klasy nad funkcją. I rzeczywiście — przy takich komponentach (prezentacyjnych) lepiej jest napisać funkcję niż klasę. Gdzie klasy wygrywają i co możemy z nimi zrobić?
Klasy nie istnieją bez powodu 🙂 Oto kilka możliwości. Wszystkie omówimy w kolejnych częściach tego kursu:
- możliwość definiowania stanu komponentu (
state
), który sprawi, że Twoja aplikacja zacznie „żyć” - dostęp do metod cyklu życia komponentu (lifecycle methods), dzięki którym będziemy mogli reagować na różne wydarzenia
- możliwość definiowania fragmentów komponentów (każda funkcja może zwracać JSX!) jako metod w klasie — poprawa czytelności kodu
- możliwość tworzenia metod pomocniczych, z których można korzystać wewnątrz funkcji
render
. Na przykład do walidacji danych (przykład poniżej)
Przykładowo, jeśli korzystasz z jakiegoś modułu do formularzy w React, pewnie możesz napisać kod podobny do tego:
class MyForm extends React.Component {
render() {
return (
<Input name="nip" validate={[this.validateInput]} />
)
}
validateInput(value) {
return value && value.length === 10;
}
}
Co dalej?
Interakcje z komponentami. Poznasz też state
oraz metody cyklu życia. Czytanie ponad 40 artykułów może być przytłaczające, więc może Naucz się React na naszym szkoleniu!
Jeśli chcesz na bieżąco śledzić kolejne części kursu React.js to koniecznie śledź mnie na Facebooku i zapisz się na newsletter.
Ćwiczenie
Ćwiczenie: Przepisz pozostałe komponenty na klasy. Czy napotkałeś/aś jakieś trudności? Napisz w komentarzu!
- React.js: Wprowadzenie do kursu od podstaw
- Poznaj React.js
- Pierwszy komponent w React.js
- Props czyli atrybuty w React.js
- Podział na komponenty w React.js
- Klasy jako komponenty React.js
- Interakcja z komponentami React.js
- Stan komponentów React.js
- State w React.js 2
- Metody cyklu życia komponentu w React.js
- React.js w przykładach: filtrowanie statycznej listy
- Tworzenie aplikacji React.js dzięki create-react-app
- React.js na GitHub Pages dzięki create-react-app
- Testowanie aplikacji React.js — podstawy Enzyme
- Testowanie React.js w Enzyme — props, state i interakcje
- Poprawne bindowanie funkcji w React.js
- Odpowiadam na pytania: Babel, ECMAScript, destrukturyzacja, onClick, className
- Komunikacja pomiędzy komponentami w React.js
- Komunikacja z API w React.js
- Formularze w React.js — kontrolowane komponenty
- Formularze w React.js — niekontrolowane komponenty
- Odpowiadam na pytania: props, nawiasy klamrowe, funkcje vs klasy, import react
- TDD w React.js z pomocą react-testing-library
- Flux i Redux: globalny store i jednokierunkowy przepływ danych
- React + Redux — kurs: wprowadzenie i podstawy
- React + Redux — filtrowanie listy, proste selektory
- Projektowanie komponentów: Presentational & Container Components
- Asynchroniczność w Redux: redux-thunk
- Kiedy używać state, a kiedy Redux?
- Nowe metody cyklu życia: getDerivedStateFromProps i getSnapshotBeforeUpdate
- Leniwe ładowanie komponentów w React dzięki import
- Higher Order Reducers — Redux i powtarzanie kodu
- React Hooks — wprowadzenie i motywacja
- React Hooks: useState, czyli stan w komponentach funkcyjnych
- React Hooks: useState — wiele stanów, callbacki i inne niuanse
- React Hooks: useEffect — efekty uboczne w komponencie
- React Hooks a żądania do API
- useReducer — przenoszenie logiki poza komponent
- useMemo, useCallback, czyli rozwiązanie problemów ze zmieniającymi się propsami
- Wady React Hooks
- React Hooks: Piszemy własne hooki!
A jak masz ustawione u siebie reguły eslinta dla react z redux? Ostatnio zainteresowałem się Airbnb tylko mam zawiłostk, ponieważ tam preferowane są klasy tylko w przypadku komponentów „stanowych”. W redux natomiast nie operujemy na state tylko na propsach i tutaj ciekawi mnie jakie praktyki stosują inni „reactowcy”. Ja założylem sobie, że bezstanowe robię na funkcjach, ale już pobierające dane ze store robię na klasach, co daje mi przyjemniejszą składnię np. dla propTypes, defaultTypes (jako static). A co Ty myślisz?
Pozdrawiam, a tak na marginesie to masz fajny styl pisania, myślę, że wiele osób zaczynających dopiero React łatwo zrozumie co i jak z Twoich wpisów, powodzenia!
Hej, dzięki za miłe słowa 🙂
Co do Twoich pytań… zawsze kiedy jest potrzebna klasa to używam klasy 😉 Czyli wtedy gdy chcę mieć state, albo skorzystać z lifecycle methods. Poza tymi przypadkami praktycznie nie używam klas w ogóle.
Nie korzystam też z
propTypes
, bo na codzień piszę w TypeScripcie, który to praktycznie całkowicie zastępuje.Jeśli chodzi o eslinta — mamy własną konfigurację teraz w projekcie. Ale zobacz co domyślnie generuje
create-react-app
— tego bym się pewnie trzymał 🙂 Chociaż w sumie to nieważne. Ważne, żeby być spójnym i robić zgodnie z innymi osobami z projektu.Akurat w tym konkretnym projekcie mam tę przewagę, że to ja określam „reguły gry” dlatego chciałem poznać również inne opinie 🙂
Do TS jakoś nie mogę się przekonać, choć parę razy się nad tym też zastanawiałem… ale pożyjemy zobaczymy.
To moja opinia jest taka, żeby używać funkcji zawsze kiedy się da 🙂
W czasie wykonywania zadania domowego zastanawiałem się jaka jest różnica pomiędzy użyciem takich składni:
a
a według mnie nie ma(?), to w związku z tym jest jakaś reguła?
Pozdrawiam.
No w tym przypadku mam kilka uwag 🙂
Po pierwsze, zapis
nie jest całkowicie poprawny. Jest możliwy i działa tylko z Babelem i tylko przy włączonym odpowiednim presecie! Wynika to z tego, że React nie jest napisany z użyciem modułów ES i nie ma
export default
.Prawidłowy import, biorąc pod uwagę istniejący kod reacta, wygląda tak:
Zadziała on zarówno z Babelem z presetem, bez presetów, a także w TypeScripcie.
Po drugie, całkowicie poprawne jest użycie
Nie ma w tym nic złego i wiele osób poleca taki zapis. Jednak, przynajmniej na razie, JSX wymaga, aby w danym scope’ie był zaimportowany React. Więc ostatecznie miałbyś takie dwie linijki:
Dla wielu osób nie ma to sensu, więc rezygnują z drugiego importu i zamiast tego używają
React.Component
A jaki konkretnie był problem wcześniej z klasami?
Co do podziału na pliki — też nie wiem jaki był konkretnie błąd 🙂 Prawdopodobnie może być problem z obsługą JSX w takich zewnętrznych plikach. Generalnie nie robi się tego w taki sposób. Zazwyczaj projekt dzieli się na pliki, ale zanim trafią do przeglądarki, przechodzą kompilację i różne transformacje (np. przez Babel i Webpack), aby ostatecznie uzyskać tylko jeden plik wyjściowy i to jego dodać do przeglądarki.
W dalszej części kursu pokażę jak korzystać z narzędzia
create-react-app
.Dziękuję za odpowiedź. Teraz rozumiem.
Błąd:
„Uncaught SyntaxError: Unexpected token <" Oprócz pliku html, w osobnym projekcie stworzonym poprzez, właśnie create-react-app, równolegle tworzę sobie aplikację web - podzieloną na poszczególne lekcje. Tam wszystko śmiga jak tra-la-la. 😉 Pozdrawiam
Pytanie odnośnie samej konwencji tworzenia metod. W którymś eslincie spotkałem się z regułą, która nakazuje pisać metody dopiero wtedy kiedy korzystają z `this`, aby odróżniać metodę od funkcji która może zostać wyniesiona za klasę. Czy jest to zwykła konwencja i trzymanie spójności w projekcie czy kryje się za tym jakaś głębsza logika?
Pozdrawiam 😀
Prawdę mówiąc nie spotkałem się z tą konwencją w kontekście Reactowych komponentów 🙂 Ja wszystkie funkcje zawieram w klasie. Korzystam z TypeScripta, więc oznaczam je jeszcze jako
private
🙂Czekamy czekamy 😉
Byłem na urlopie 😉 Jutro dalsza część!
[…] Pisałem o tym już w jednym z komentarzy: Taki zapis jest możliwy i działa tylko z Babelem i tylko przy włączonym […]
Dlaczego nie działa?
class AppHeader extends React.Component {
render() {
return (
Lista kontaktów
Dodaj
);
}
}
class ContactList extends React.Component {
render() {
return (
);
}
}
class ContactItem extends React.Component {
render() {
const { login, name, department } = this.props
return (
{name}
{department}
);
}
}
class UserAvatar extends React.Component {
const { login } = this.props;
isEmail(email) {
var re = /^(([^()[]\.,;:[email protected]"]+(.[^()[]\.,;:[email protected]"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
get_gravatar(email, size) {
// MD5 (Message-Digest Algorithm) by WebToolkit
//
var MD5=function(s){function L(k,d){return(k<>>(32-d))}function K(G,k){var I,d,F,H,x;F=(G&2147483648);H=(k&2147483648);I=(G&1073741824);d=(k&1073741824);x=(G&1073741823)+(k&1073741823);if(I&d){return(x^2147483648^F^H)}if(I|d){if(x&1073741824){return(x^3221225472^F^H)}else{return(x^1073741824^F^H)}}else{return(x^F^H)}}function r(d,F,k){return(d&F)|((~d)&k)}function q(d,F,k){return(d&k)|(F&(~k))}function p(d,F,k){return(d^F^k)}function n(d,F,k){return(F^(d|(~k)))}function u(G,F,aa,Z,k,H,I){G=K(G,K(K(r(F,aa,Z),k),I));return K(L(G,H),F)}function f(G,F,aa,Z,k,H,I){G=K(G,K(K(q(F,aa,Z),k),I));return K(L(G,H),F)}function D(G,F,aa,Z,k,H,I){G=K(G,K(K(p(F,aa,Z),k),I));return K(L(G,H),F)}function t(G,F,aa,Z,k,H,I){G=K(G,K(K(n(F,aa,Z),k),I));return K(L(G,H),F)}function e(G){var Z;var F=G.length;var x=F+8;var k=(x-(x%64))/64;var I=(k+1)*16;var aa=Array(I-1);var d=0;var H=0;while(H<F){Z=(H-(H%4))/4;d=(H%4)*8;aa[Z]=(aa[Z]|(G.charCodeAt(H)<<d));H++}Z=(H-(H%4))/4;d=(H%4)*8;aa[Z]=aa[Z]|(128<<d);aa[I-2]=F<>>29;return aa}function B(x){var k="",F="",G,d;for(d=0;d>>(d*8))&255;F="0"+G.toString(16);k=k+F.substr(F.length-2,2)}return k}function J(k){k=k.replace(/rn/g,"n");var d="";for(var F=0;F<k.length;F++){var x=k.charCodeAt(F);if(x127)&&(x>6)|192);d+=String.fromCharCode((x&63)|128)}else{d+=String.fromCharCode((x>>12)|224);d+=String.fromCharCode(((x>>6)&63)|128);d+=String.fromCharCode((x&63)|128)}}}return d}var C=Array();var P,h,E,v,g,Y,X,W,V;var S=7,Q=12,N=17,M=22;var A=5,z=9,y=14,w=20;var o=4,m=11,l=16,j=23;var U=6,T=10,R=15,O=21;s=J(s);C=e(s);Y=1732584193;X=4023233417;W=2562383102;V=271733878;for(P=0;P<C.length;P+=16){h=Y;E=X;v=W;g=V;Y=u(Y,X,W,V,C[P+0],S,3614090360);V=u(V,Y,X,W,C[P+1],Q,3905402710);W=u(W,V,Y,X,C[P+2],N,606105819);X=u(X,W,V,Y,C[P+3],M,3250441966);Y=u(Y,X,W,V,C[P+4],S,4118548399);V=u(V,Y,X,W,C[P+5],Q,1200080426);W=u(W,V,Y,X,C[P+6],N,2821735955);X=u(X,W,V,Y,C[P+7],M,4249261313);Y=u(Y,X,W,V,C[P+8],S,1770035416);V=u(V,Y,X,W,C[P+9],Q,2336552879);W=u(W,V,Y,X,C[P+10],N,4294925233);X=u(X,W,V,Y,C[P+11],M,2304563134);Y=u(Y,X,W,V,C[P+12],S,1804603682);V=u(V,Y,X,W,C[P+13],Q,4254626195);W=u(W,V,Y,X,C[P+14],N,2792965006);X=u(X,W,V,Y,C[P+15],M,1236535329);Y=f(Y,X,W,V,C[P+1],A,4129170786);V=f(V,Y,X,W,C[P+6],z,3225465664);W=f(W,V,Y,X,C[P+11],y,643717713);X=f(X,W,V,Y,C[P+0],w,3921069994);Y=f(Y,X,W,V,C[P+5],A,3593408605);V=f(V,Y,X,W,C[P+10],z,38016083);W=f(W,V,Y,X,C[P+15],y,3634488961);X=f(X,W,V,Y,C[P+4],w,3889429448);Y=f(Y,X,W,V,C[P+9],A,568446438);V=f(V,Y,X,W,C[P+14],z,3275163606);W=f(W,V,Y,X,C[P+3],y,4107603335);X=f(X,W,V,Y,C[P+8],w,1163531501);Y=f(Y,X,W,V,C[P+13],A,2850285829);V=f(V,Y,X,W,C[P+2],z,4243563512);W=f(W,V,Y,X,C[P+7],y,1735328473);X=f(X,W,V,Y,C[P+12],w,2368359562);Y=D(Y,X,W,V,C[P+5],o,4294588738);V=D(V,Y,X,W,C[P+8],m,2272392833);W=D(W,V,Y,X,C[P+11],l,1839030562);X=D(X,W,V,Y,C[P+14],j,4259657740);Y=D(Y,X,W,V,C[P+1],o,2763975236);V=D(V,Y,X,W,C[P+4],m,1272893353);W=D(W,V,Y,X,C[P+7],l,4139469664);X=D(X,W,V,Y,C[P+10],j,3200236656);Y=D(Y,X,W,V,C[P+13],o,681279174);V=D(V,Y,X,W,C[P+0],m,3936430074);W=D(W,V,Y,X,C[P+3],l,3572445317);X=D(X,W,V,Y,C[P+6],j,76029189);Y=D(Y,X,W,V,C[P+9],o,3654602809);V=D(V,Y,X,W,C[P+12],m,3873151461);W=D(W,V,Y,X,C[P+15],l,530742520);X=D(X,W,V,Y,C[P+2],j,3299628645);Y=t(Y,X,W,V,C[P+0],U,4096336452);V=t(V,Y,X,W,C[P+7],T,1126891415);W=t(W,V,Y,X,C[P+14],R,2878612391);X=t(X,W,V,Y,C[P+5],O,4237533241);Y=t(Y,X,W,V,C[P+12],U,1700485571);V=t(V,Y,X,W,C[P+3],T,2399980690);W=t(W,V,Y,X,C[P+10],R,4293915773);X=t(X,W,V,Y,C[P+1],O,2240044497);Y=t(Y,X,W,V,C[P+8],U,1873313359);V=t(V,Y,X,W,C[P+15],T,4264355552);W=t(W,V,Y,X,C[P+6],R,2734768916);X=t(X,W,V,Y,C[P+13],O,1309151649);Y=t(Y,X,W,V,C[P+4],U,4149444226);V=t(V,Y,X,W,C[P+11],T,3174756917);W=t(W,V,Y,X,C[P+2],R,718787259);X=t(X,W,V,Y,C[P+9],O,3951481745);Y=K(Y,h);X=K(X,E);W=K(W,v);V=K(V,g)}var i=B(Y)+B(X)+B(W)+B(V);return i.toLowerCase()};
var size = size || 80;
return 'http://www.gravatar.com/avatar/' + MD5(email) + '.jpg?s=' + size;
}
render() {
if (this.isEmail(login)) {
const imgUrl = this.get_gravatar(login);
return (
);
`;
} else {
const imgUrl =
return (
);
}
}
}
class App extends React.Component {
render() {
return (
);
}
}
ReactDOM.render(, document.getElementById("app"));
Hej, w jaki sposob kazac programowi wyswietlic komponent klasy w przegladarce i w jednej komendzie wyswietlic cala konstrukcje (App) z poprzednich lekcji?
A co dokładnie chciałabyś osiągnąć? 🙂
Mam pytanie, może głupie ale utknąłem na tym poziomie.
Robie sobie dajmy na to klasę ContactItem.jsx oraz ContactList.jsx:
import * as React from 'react';
import { Component } from 'react';
class ContactItem extends React.Component{
render(){
`;
const {login, name, department} = this.props;
const imgUrl =
return(
{name}
);
}
}
==============================
import * as React from 'react';
import { Component } from 'react';
class ContactList extends React.Component{
render(){
return(
);
}
}
===========================
W tym momencie nie bardzo wiem jak w klasie ContactList odwołać sie do klasy ContactItem oraz jak potem przekazać te klasy do index.html, żeby uruchomic je w skrypcie.
Dzięki i pozdrawiam !!
Tak naprawdę najlepiej będzie jak przeskoczysz tutaj: https://typeofweb.com/2018/01/29/tworzenie-aplikacji-react-js-dzieki-create-react-app/ 🙂
Super, dzięki.
Tutaj już znajomo wszystko wygląda 🙂
Próba zamiany na klasy kończy się u mnie takim błędem: Warning:
React.createElement: type is invalid — expected a string (for built-in
components) or a class/function (for composite components) but got:
undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.
Co to może być?
Wszystko jest napisane w błędzie, prawdopodobnie zapomniałeś wyeksportować klasę?
Cześć,
Słuchajcie, ja jestem naprawdę bardzo początkujący toteż pytanie pewnie jest banalne ale jednak jest.
W przykładzie zamiany funkcji na klasę, funkcja, która miała argumenty
function ContactItem({ login, name, department })
dostaje instrukcję
const { login, name, department } = this.props
I to jest zasadniczo zrozumiałe.
Pytanie, co z pozostałymi funkcjami, które nie są deklarowane z tymi argumentami ale z nich korzystają?
Wybaczcie, jeżeli to jest oczywiste ale zajmuję się ITdopiero od początku tego roku
Nie wiem czy o to pytasz, ale wszystkie metody w klasie mają dostęp do this.props.
cześć. nie wiem, czy jeszcze odpowiadasz na komentarze, ale wrzucę swoją wersję:
class ContactItem extends React.Component {
render() {
const { login, name, department } = this.props;
const imgUrl = `http://api.adorable.io/avatars/55/${login}.png`;
return (
{name}
);
}
}
oraz
class Avatar extends React.Component {
render() {
const { login } = this.props;
const isEmail = new EmailValidator().validateEmail(login);
const newLogin = isEmail ? md5(login) : login;
const imgUrl = `http://api.adorable.io/avatars/55/${login}.png`;
return (

)
}
}
Szczególnie mnie interesuje opinia o Komponencie
. Czy taki rozwiązanie w przypadku JS jest dobre?Wygląda w porządku 🙂
Dzięki. Teraz przepiszę to na Hooki 😉
Bardzo dobrze i z pomysłem tłumaczysz wszystko. Nadajesz się na instruktora
Dzięki wielkie! 😀
Przerobiłem wszystkie funkcje na klasy, odpaliłem w przeglądarce i jest błąd 😀
Element type is invalid: expected a string (for built-in
components) or a class/function (for composite components) but got:
undefined.
To ja tylko dodam taką ciekawostkę która może spędzać sen z powiek początkującym developerom.
Jeśli piszesz wszystko w jednym pliku (np index.html) to definicje klas MUSZĄ być PRZED
ReactDOM.render(…
W innym wypadku otrzymasz błędy o niemożności importowania/exportowania.
Są takie rzeczy, o których nie przyszłoby mi do głowy napisać, bo ja to robię z automatu, intuicyjnie już 😀 Dzięki za tę poradę!
Bo to jest całkowicie logiczne – najpierw deklaracja/definicja a później użycie. Ale jak ktoś np przychodzi z PHP gdzie kod:
$object = new Object;
class Object {}
jest w pełni poprawny to może mieć lekki mętlik.
Dzięki wielkie za kurs! Wreszcie udało mi się wystartować z ReactJS.
„const { login, name, departament} = this.props”
– warto wspomnieć, że to destrukturyzacja danych 🙂
Czy tworzone są 3 zmienne (po prawej stronie) i przypisywane im są wartości z this.props