Podział na komponenty w React.js #82
Replies: 22 comments 37 replies
-
Hejka, bardzo fajna seria artykułów do reacta, sam aktualnie jestem w trakcie nauki i sie bardzo przydają. Mam takie pytanie, czy jak tworzymy bezstanowy komponent to lepiej korzystac z klas (tak to jest często robione w przykładach w dokumentacji reacta ) czy lepiej uzyc jednak zwyklych funkcji, ma to jakiś wpływ np na wydajność? Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Podobno funkcje są wydajniejsze, tym bardziej, że jest to rozwiązanie zalecane m.in przez Airbnb: https://github.com/airbnb/javascript/tree/master/react#class-vs-reactcreateclass-vs-stateless. Jeśli skonfigurujesz sobie pod Airbnb eslinta to domyślnie będzie chciał właśnie funkcje i to zwykłe, nie arrow function. Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Funkcje. Są krótsze, bardziej czytelne, i prawdopodobnie szybsze. Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Super czekam na więcej Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Jutro :) Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
nie wiem na jaką ocenę wykonałem zadanie domowe. Ale dopiero jestem w "przedszkolu w gupie REACT-ki". Pozdrawiam Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Mam kilka uwag, ale mimo to wygląda bardzo dobrze :) Świetna robota!
Ostatecznie kod mógłby wyglądać tak: Oczywiście do gravatara należałoby przekazać hash z maila (md5), ale to tutaj pominę. Można by się też zastanowić czy nie przenieść tej logiki do jeszcze osobnej funkcji (i osobnego pliku). Zawsze użycie Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Dziękuję bardzo za cenne uwagi. Oczywiście zaraz kod dostosuję zgodnie z sugestiami. Co do className to w kodzie mam prawidłowo, ale nie za bardzo wiem jak tutaj wkleić mój kod, tak aby był oryginalny. Wyżej użyłem znaczników code/code i tam wkleiłem swój kod. Ale to nie jest chyba dobra rozwiązanie. Jeszcze raz dzięki za naukę i podrawiam serdecznie. :) Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Zgodnie z dokumentacją Disqusa można właśnie przez |
Beta Was this translation helpful? Give feedback.
-
Dzięki. Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Moim zdaniem Angular nie jest tylko skomplikowany — on jest absolutnie przesadnie przeinżynierowany i to praktycznie na każdym kroku. Chcesz dodać prosty komponent? Super! Stwórz 3 pliki i zmodyfikuj 2 kolejne ;) React pod tym względem zdecydowanie wygrywa. Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Cześć, Pytanie to łącze z ćwiczeniem do samodzielnego rozwiązania, które kończy poprzedni temat. Co można, a czego nie przekazać w propsie (czy tylko stringa?) Pozdrowienia :) Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
A kto powiedział, że nie możesz przekazać w propsie całego URL-a? Możesz. Możesz przekazać co chcesz. Spójrzmy na to jeszcze inaczej: Gdyby nagle miał się zmienić sposób wyświetlania avatarów i zamiast URL-a do gravatara chciałbyś mieć URL-a do innego serwisu. W moim przykładzie wystarczy zmiana komponentu ContactItem. W sugerowanym przez Ciebie rozwiązaniu natomiast, gdy URL jest przekazywany jako props, musiałbyś odnaleźć wszystkie komponenty, które używają ContactItem i je pozmieniać. To złamanie elementarnych zasad dobrej architektury. Co do stringów — jako props możesz przekazać co chcesz, stringi, obiekty, funkcje. Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Dziękuję bardzo za odpowiedź! Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Cześć, Pozdrowienia! Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Coś tu z wielkością znaków jest nie tak ;) powinno być Poza tym wygląda spoko ;) Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
a tak, jakoś po przyklejeniu do komentarza, znaki zmieniły wielkość . Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Cześć, uparłem się, że to zrozumiem. Dlaczego nie wyświetla mi poprawnych avatarów? Przecież w wywołaniu ContactAvatar w ContactItem podaję atrybut, a w funkcji ContactAvatar zaciągam go i wklejam w source w stringa. Komentarz zaimportowany z WordPressa |
);
}
Beta Was this translation helpful? Give feedback.
-
klasy są camelCase, a komponenty z dużej i camelCase, tylko tak się kopiuje ;/ Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Niepotrzebny cudzysłów dookoła Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Dzięki, myślałem, że wcisnę element js do atrybutu jsx Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Jak najbardziej, w JSX kod wewnątrz { i } jest wykonywany (prawie) jak zwykły JS. Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Dynamiczne property do komponentow reactowych podajemy bez cudzysłowiów, chyba, że chodzi nam konkretnie o string. Błąd w funkcji "ContactItem", 3 linijka, do poprawy teoretycznie. Chodź widzę, że system komentarzy tego bloga sam psuje formatowanie kodu i dodaje cudzysłowia. Ciężko stwierdzić jak kod wyglądał w oryginale. Podejrzewam, że chodzi o poprawę linijki Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Dlaczego trzeba wszystko zmieniać na className, skąd taki zamysł autorów czy nie łatwiej by było zostać przy class? Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Głównie ze względów historycznych. Dzisiaj — nie ma to takiego znaczenia, ale Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Cześć, Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Na pewno w konsoli znajdziesz jakiś błąd :) Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
dzięki Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Dlaczego nie działa mi nawet zaimplementowany kod od Ciebie, jedynie jak przekopiuje cały kod w czystym JS to wtedy śmiga :) ale kod wtedy jest kompletnie nie zrozumiały i wygląda całkowicie inaczej niz w poprzednich odcinkach. Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Mam podpięte 3 biblioteki o których wspominałeś w poprzednich odcinkach. kopiuje do swojego pliku index.html. Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Czyli zgaduję, że nie kompilujesz JSX ani nie masz biblioteki do tego? :P No to nie będzie działać, bo JSX to nie JS. Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
a można się dowiedzieć jak kompilować jsx jak to z konfigurować ? Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Najprościej tak: https://typeofweb.com/2018/01/29/tworzenie-aplikacji-react-js-dzieki-create-react-app/ ;) Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Dziękuje :) Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
function Avatar({login}) } function ContactItem({ login, name, department }) { return ( ); Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Nie trzeba stosować cudzysłowu. Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Nom, trochę ból :/ Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Powinno. Wszystkie komponenty powinny być z wielkiej litery :) Obawiam się tylko, że to Disqus tak psuje nam kod w komentarzach. Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
function ContactItem({login, name, department}) { {name}{department} ); } function get_gravatar(email, size) { // MD5 (Message-Digest Algorithm) by WebToolkit // Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
czy przy zerowej/minimalnej wiedzy JS warto dalej kontynuować ten poradnik? czy lepiej pierw liznąć trochę czystego JS? Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Zrozumienie tego kursu wymaga dobrej znajomości JavaScriptu. Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
To ja dodam rezultat od siebie w code sandbox'ie: md5 zainstalowane z pakietów a regex z walidacja emaila ze stack'a :D Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Czy tylko mi przy przenoszeniu struktury opisanej w rozdziale "Podział na komponenty" pierwszy element listy (Lena) chowa się gdzieś na górze? pod poprzednim Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Zabierz w hederze class fixed i po sprawie Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Wszystko jest wyjaśnione niżej :) Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
To może napisze o co chodzi, jakby ktoś robił ten kurs jeszcze: usunięcie position fixed rozwiązuje problem :P Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Mi się nie chowa :/ Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
function AvatarItem({login}) {
Dodanie gravatara wymaga przekonwertowania maila np tak: https://css-tricks.com/snippets/javascript/javascript-md5/ no i przydałby się jakiś if do sprawdzenia, czy otrzymano jakąś odpowiedź. Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Hotfixy dla tych z nerwicą co się męczą z CSSem przy tym ćwiczeniu, a chcieliby jak najszybciej pójść dalej ;) 1. Pierwszy element z listy jest niewidoczny / znajduje się pod headerem. Odp.: Trzeba usunąć klasę "fixed" w elemencie header 2. Elementy listy mają u mnie bullety przed każdym elementem, a w przykładzie ich nie ma Odp.: Trzeba każdy element ul i li zamienić na div (tak jak z przykładów w doc'sach Semantic UI) i powinno być w porządku. Co do tutorialu to jest super! Czegoś takiego szukałem! Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Coś się musiało zmienić w samym Semanticu — zaktualizuję ten odcinek kursu :) Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Ad.2 Można też dodać dodatkowy styl modyfikujący li:first: ul.ui.relaxed.list> li:before {
content: "";
}
Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Pogubiłem się :( . Mógłby mi ktoś wytłumaczyć o co chodzi w dodatkowym poleceniu? Czym/kim jest Gravatar? O jaki e-mail chodzi? EDIT: Poszperałem trochę w komentarzach i mi się udało. Jakby ktoś miał z tym problem, tak jak ja, to Gravatar to taki program do losowania avatarów jakiś ludzi, a e-mail podajemy tam, gdzie login. W swoim projekcie skorzystałem z wtyczki faker do VS Code, zamiast Gravatar, niżej podaję kod ;)
<title>Podział na komponenty w React.js</title>
<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>
<script type="text/babel">
function AppHeader() {
return (
Komentarz zaimportowany z WordPressa |
Lista kontaktów
Beta Was this translation helpful? Give feedback.
-
Cześć, uparłem się, że to zrozumiem. Dlaczego nie wyświetla mi poprawnych avatarów? Przecież w wywołaniu ContactAvatar w ContactItem podaję atrybut, a w funkcji ContactAvatar zaciągam go i wklejam w source w stringa. Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Pierwsze zadanie: Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Drugie zadanie: Nie zagłębiałam się w api gravataru , po prostu wygenerowałam inny obrazek :) Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
api.adorable.iojest już niestety niedostępne. Można je zastąpić przez: https://api.hello-avatar.com/adorables/55/ Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Cześć. 
na
Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Podział na komponenty w React.js
W tej części skupisz się na teorii i praktyce dzielenia zaprojektowanych aplikacji na poszczególne komponenty. Zaczniesz też tworzyć prostą appkę — menedżer kontaktów. W planach wyświetlanie, dodawanie i edycja kontaktów. Ale najpierw — musimy przecież zaprojektować HTML i CSS dla tej aplikacji.
https://typeofweb.com/podzial-komponenty-react-js
Beta Was this translation helpful? Give feedback.
All reactions