Klasy jako komponenty React.js

Ten wpis jest 6 częścią z 41 w kursie React.js
wp-content/uploads/2017/10/React_logo_wordmark-300x101-1-e1508612391308.png
  1. React.js: Wprowadzenie do kursu od podstaw
  2. Poznaj React.js
  3. Pierwszy komponent w React.js
  4. Props czyli atrybuty w React.js
  5. Podział na komponenty w React.js
  6. Klasy jako komponenty React.js
  7. Interakcja z komponentami React.js
  8. Stan komponentów React.js
  9. State w React.js 2
  10. Metody cyklu życia komponentu w React.js
  11. React.js w przykładach: filtrowanie statycznej listy
  12. Tworzenie aplikacji React.js dzięki create-react-app
  13. React.js na GitHub Pages dzięki create-react-app
  14. Testowanie aplikacji React.js — podstawy Enzyme
  15. Testowanie React.js w Enzyme — props, state i interakcje
  16. Poprawne bindowanie funkcji w React.js
  17. Odpowiadam na pytania: Babel, ECMAScript, destrukturyzacja, onClick, className
  18. Komunikacja pomiędzy komponentami w React.js
  19. Komunikacja z API w React.js
  20. Formularze w React.js — kontrolowane komponenty
  21. Formularze w React.js — niekontrolowane komponenty
  22. Odpowiadam na pytania: props, nawiasy klamrowe, funkcje vs klasy, import react
  23. TDD w React.js z pomocą react-testing-library
  24. Flux i Redux: globalny store i jednokierunkowy przepływ danych
  25. React + Redux — kurs: wprowadzenie i podstawy
  26. React + Redux — filtrowanie listy, proste selektory
  27. Projektowanie komponentów: Presentational & Container Components
  28. Asynchroniczność w Redux: redux-thunk
  29. Kiedy używać state, a kiedy Redux?
  30. Nowe metody cyklu życia: getDerivedStateFromProps i getSnapshotBeforeUpdate
  31. Leniwe ładowanie komponentów w React dzięki import
  32. Higher Order Reducers — Redux i powtarzanie kodu
  33. React Hooks — wprowadzenie i motywacja
  34. React Hooks: useState, czyli stan w komponentach funkcyjnych
  35. React Hooks: useState — wiele stanów, callbacki i inne niuanse
  36. React Hooks: useEffect — efekty uboczne w komponencie
  37. React Hooks a żądania do API
  38. useReducer — przenoszenie logiki poza komponent
  39. useMemo, useCallback, czyli rozwiązanie problemów ze zmieniającymi się propsami
  40. Wady React Hooks
  41. 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 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.

Nie wysyłamy spamu, tylko wartościowe informacje. W każdej chwili możesz się wypisać klikając „wypisz się” w stopce maila.

Ćwiczenie

Ćwiczenie: Przepisz pozostałe komponenty na klasy. Czy napotkałeś/aś jakieś trudności? Napisz w komentarzu!

Nawigacja po kursie:
  1. React.js: Wprowadzenie do kursu od podstaw
  2. Poznaj React.js
  3. Pierwszy komponent w React.js
  4. Props czyli atrybuty w React.js
  5. Podział na komponenty w React.js
  6. Klasy jako komponenty React.js
  7. Interakcja z komponentami React.js
  8. Stan komponentów React.js
  9. State w React.js 2
  10. Metody cyklu życia komponentu w React.js
  11. React.js w przykładach: filtrowanie statycznej listy
  12. Tworzenie aplikacji React.js dzięki create-react-app
  13. React.js na GitHub Pages dzięki create-react-app
  14. Testowanie aplikacji React.js — podstawy Enzyme
  15. Testowanie React.js w Enzyme — props, state i interakcje
  16. Poprawne bindowanie funkcji w React.js
  17. Odpowiadam na pytania: Babel, ECMAScript, destrukturyzacja, onClick, className
  18. Komunikacja pomiędzy komponentami w React.js
  19. Komunikacja z API w React.js
  20. Formularze w React.js — kontrolowane komponenty
  21. Formularze w React.js — niekontrolowane komponenty
  22. Odpowiadam na pytania: props, nawiasy klamrowe, funkcje vs klasy, import react
  23. TDD w React.js z pomocą react-testing-library
  24. Flux i Redux: globalny store i jednokierunkowy przepływ danych
  25. React + Redux — kurs: wprowadzenie i podstawy
  26. React + Redux — filtrowanie listy, proste selektory
  27. Projektowanie komponentów: Presentational & Container Components
  28. Asynchroniczność w Redux: redux-thunk
  29. Kiedy używać state, a kiedy Redux?
  30. Nowe metody cyklu życia: getDerivedStateFromProps i getSnapshotBeforeUpdate
  31. Leniwe ładowanie komponentów w React dzięki import
  32. Higher Order Reducers — Redux i powtarzanie kodu
  33. React Hooks — wprowadzenie i motywacja
  34. React Hooks: useState, czyli stan w komponentach funkcyjnych
  35. React Hooks: useState — wiele stanów, callbacki i inne niuanse
  36. React Hooks: useEffect — efekty uboczne w komponencie
  37. React Hooks a żądania do API
  38. useReducer — przenoszenie logiki poza komponent
  39. useMemo, useCallback, czyli rozwiązanie problemów ze zmieniającymi się propsami
  40. Wady React Hooks
  41. React Hooks: Piszemy własne hooki!

Nie wysyłamy spamu, tylko wartościowe informacje. W każdej chwili możesz się wypisać klikając „wypisz się” w stopce maila.

Subscribe
Powiadom o
guest
34 komentarzy
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Tomasz Sochacki
Tomasz Sochacki
2 lat temu

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!

Tomasz Sochacki
Tomasz Sochacki
2 lat temu

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.

Wiesław Turzański
Wiesław Turzański
2 lat temu

W czasie wykonywania zadania domowego zastanawiałem się jaka jest różnica pomiędzy użyciem takich składni:


import React, {Component} from 'react';
class Klasa extends Component {
...
}

a


import React from 'react';
class Klasa extends React.Component {
...
}

a według mnie nie ma(?), to w związku z tym jest jakaś reguła?
Pozdrawiam.

Wiesław Turzański
Wiesław Turzański
2 lat temu

Staram się być konsekwentny i podążać za kursem dokładnie lekcja za lekcją. Piszę kod w jednym pliku index.html. I do momentu definiowania komponentów jako funkcji było OK. Ale przy zamienianiu ich w klasy pojawiły się błędy przy próbie wyświetlenia pliku w przeglądarce. Sekcja head wygląda tak:



  ...
  
  
  
  .....

gdy zamieniłem na:


  ...
   
   
   
   ...

zadziałało.
Poza tym gdy chcę zapisać (podzielić) komponenty do osobnych plików .js i wczytać je do html poprzez script tak nie działa.
Ponieważ jest to kurs dla początkujących proszę o wskazówki lub wskazać miejsce gdzie będę mógł pogłębić swoją podstawową wiedzę.
Pozdrawiam

Wiesław Turzański
Wiesław Turzański
2 lat temu

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

Piotr Aueternum
2 lat temu

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 😀

Bartek
Bartek
2 lat temu

Czekamy czekamy 😉

trackback

[…] 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 […]

Kieryk
Kieryk
2 lat temu

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 = /^(([^()[]\.,;:s@"]+(.[^()[]\.,;:s@"]+)*)|(".+"))@(([[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 = comment image`;
return (

);
}
}
}

class App extends React.Component {
render() {
return (

);
}
}
ReactDOM.render(, document.getElementById("app"));

Sara Emilia
Sara Emilia
1 rok temu

Hej, w jaki sposob kazac programowi wyswietlic komponent klasy w przegladarce i w jednej komendzie wyswietlic cala konstrukcje (App) z poprzednich lekcji?

Kamil
Kamil
1 rok temu

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 = comment image`;

return(

  • {name}

    {department}

  • );
    }

    }
    ==============================

    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 !!

    Kamil
    Kamil
    1 rok temu

    Super, dzięki.
    Tutaj już znajomo wszystko wygląda 🙂

    tomek
    tomek
    1 rok temu

    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ć?

    Kiszuriwalilibori
    Kiszuriwalilibori
    1 rok temu

    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

    Jurko
    Jurko
    1 rok temu

    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}

    {department}

  • );

    }
    }

    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 (
    Avatar
    )

    }
    }

    Szczególnie mnie interesuje opinia o Komponencie . Czy taki rozwiązanie w przypadku JS jest dobre?

    Jurko
    Jurko
    1 rok temu

    Dzięki. Teraz przepiszę to na Hooki 😉

    Rafal
    Rafal
    1 rok temu

    Bardzo dobrze i z pomysłem tłumaczysz wszystko. Nadajesz się na instruktora

    Miłosz Kulesza
    Miłosz Kulesza
    1 rok temu

    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.

    Michał Graczyk
    Michał Graczyk
    1 rok temu

    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.

    Michał Graczyk
    Michał Graczyk
    1 rok temu

    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.

    Patrycja Bąk
    Patrycja Bąk
    10 miesięcy temu

    „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