Klasy jako komponenty React.js

[type-of-web-komentarze[bot]]

Klasy jako komponenty React.js

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!

https://typeofweb.com/klasy-jako-komponenty-react-js

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Tomasz Sochacki		2017-12-19 17:07

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!

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2017-12-19 18:22

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.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Tomasz Sochacki		2017-12-19 20:30

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.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2017-12-19 21:49

To moja opinia jest taka, żeby używać funkcji zawsze kiedy się da :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Wiesław Turzański		2017-12-20 11:31

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.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2017-12-20 13:48

No w tym przypadku mam kilka uwag :)

Po pierwsze, zapis

import React from 'react'

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:

import * as React from 'react'

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

import { Component } from 'react'

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:

import * as React from 'react';

import { Component } from 'react';

Dla wielu osób nie ma to sensu, więc rezygnują z drugiego importu i zamiast tego używają React.Component

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Wiesław Turzański		2017-12-21 11:01

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:

  ...
  <script src="https://unpkg.com/react/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone/babel.js"></script>
.....

gdy zamieniłem na:

  ...
   <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
   <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-s tandalone/6.21.1/babel.min.js"></script>
...

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

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2017-12-21 11:21

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.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Wiesław Turzański		2017-12-21 12:08

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

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Piotr Aueternum	http://piotr-aueternum.ct8.pl/	2017-12-21 21:26

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 :D

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2017-12-23 00:03

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 :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Bartek		2018-01-05 21:35

Czekamy czekamy ;)

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-01-08 02:57

Byłem na urlopie ;) Jutro dalsza część!

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Kieryk		2018-03-21 14:02

Dlaczego nie działa?

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

      <a href="#" rel="nofollow">
        
        Lista kontaktów
      </a>
      
        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 = `https://api.adorable.io/avatars/55/${login}.png`;
  return (
    
  );
}

}
}

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

);

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

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Sara Emilia		2019-01-04 11:27

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

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

A co dokładnie chciałabyś osiągnąć? :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Kamil		2019-01-04 11:27

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 = `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>
    );
}

}

import * as React from 'react';
import { Component } from 'react';

class ContactList extends React.Component{

render(){
    return(
        <ul className="ui relaxed divided list selection" id="temp">
            <ContactItem login="typeOfWeb1" name="Milenka" department="FullStackDeveloper"/>
            <ContactItem login="typeOfWeb2" name="Tomuś" department="HR"/>
            <ContactItem login="typeOfWeb3" name="Wojtek" department="Help Desk"/>
            
        </ul>
    );
}

}

===========================

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

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

Tak naprawdę najlepiej będzie jak przeskoczysz tutaj: https://typeofweb.com/2018/01/29/tworzenie-aplikacji-react-js-dzieki-create-react-app/ :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Kamil		2019-09-19 17:54

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

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	tomek		2019-01-04 11:27

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

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

Wszystko jest napisane w błędzie, prawdopodobnie zapomniałeś wyeksportować klasę?

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Kiszuriwalilibori		2019-01-04 11:27

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

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

Nie wiem czy o to pytasz, ale wszystkie metody w klasie mają dostęp do this.props.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Jurko		2019-02-07 17:26

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 (
		<img src={imgUrl} alt="Avatar" className="ui mini rounded image" />
	)

}

}


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

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-02-07 17:31

Wygląda w porządku :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Jurko		2019-02-08 09:10

Dzięki. Teraz przepiszę to na Hooki ;)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Rafal		2019-02-14 17:29

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

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-02-14 17:55

Dzięki wielkie! :D

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Miłosz Kulesza		2019-04-13 18:19

Przerobiłem wszystkie funkcje na klasy, odpaliłem w przeglądarce i jest błąd :D

Element type is invalid: expected a string (for built-in
components) or a class/function (for composite components) but got:
undefined.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Michał Graczyk		2019-05-05 19:33

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.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-05-05 20:48

Są takie rzeczy, o których nie przyszłoby mi do głowy napisać, bo ja to robię z automatu, intuicyjnie już :D Dzięki za tę poradę!

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Michał Graczyk		2019-05-05 21:44

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.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Patrycja Bąk		2019-10-29 19:12

"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

 
 

Komentarz zaimportowany z WordPressa