Code Review, o które prosiłeś na Discordzie

[typeofweb]

Appka

• Niepoprawnie używane labele - kliknięcie w nie powinno powodować "focus" danego elementu. Najlepiej element umieścić w środku labela.
• Mało semantyczny HTML (prawie brak znaczników innych niż div).

Kod

• Błędem jest nieużywanie CRA, bo tylko komplikuje projekt.
• Niepotrzebnie robisz dwa exporty, sam pierwszy wystarczy: https://github.com/houdini22/another-react-boilerplate/blob/5e0b0abf2f2a90969579e9a9dd1872715bccc643/WWW/src/js/components/form/TextArea/TextArea.js#L16-L17
• Bardzo wybiórczo używasz PropTypes – niektóre propsy są tam dodane, a niektóre nie: https://github.com/houdini22/another-react-boilerplate/blob/5e0b0abf2f2a90969579e9a9dd1872715bccc643/WWW/src/js/components/form/TextArea/TextArea.js#L12-L14
• Zresztą samo używanie PropTypes w 2020 roku jest raczej niepożądane – czemu nie TypeScript?
• Biblioteka redux-form nie jest zalecana, a trzymanie stanu każdego formularza w globalny storze jest błędem. https://github.com/houdini22/another-react-boilerplate/blob/5e0b0abf2f2a90969579e9a9dd1872715bccc643/WWW/src/js/store/configure-store.js#L5
• Niepoprawnie używasz Promise. W praktyce prawie nigdy nie musisz robić new Promise(…), więc to raczej sygnał ostrzegawczy. Przykładowo, w funkcji login wystarczyłoby dać return przed http.post i new Promise stanie się zbędny. https://github.com/houdini22/another-react-boilerplate/blob/5e0b0abf2f2a90969579e9a9dd1872715bccc643/WWW/src/js/reducers/auth.js#L26-L41
• Czemu nie używasz polecanej i oficjalnej biblioteki Redux Toolkit? To by znacznie uprościło Twój kod.
• Wszystkie komponenty są klasowe, dlaczego nie funkcyjne?
• Używanie constructor do tak prostych rzeczy, jak ustawienie stanu jest zbędne. https://github.com/houdini22/another-react-boilerplate/blob/5e0b0abf2f2a90969579e9a9dd1872715bccc643/WWW/src/js/components/form/Checkbox/Checkbox.js#L16-L18
• A pusty constructor to już w ogóle do usunięcia. https://github.com/houdini22/another-react-boilerplate/blob/5e0b0abf2f2a90969579e9a9dd1872715bccc643/WWW/src/js/components/ui/ButtonGroup/ButtonGroup.js#L11-L13
• Zapis {(e) => this.handleClick(e)} to to samo co po prostu {this.handleClick}. https://github.com/houdini22/another-react-boilerplate/blob/5e0b0abf2f2a90969579e9a9dd1872715bccc643/WWW/src/js/components/form/Checkbox/Checkbox.js#L52
• W komponentach klasowych lepiej deklarować funkcje jako arrow functions. https://github.com/houdini22/another-react-boilerplate/blob/5e0b0abf2f2a90969579e9a9dd1872715bccc643/WWW/src/js/components/form/Checkbox/Checkbox.js#L31
• FormField jest przekomplikowany, należałoby go podzielić. Sygnałem ostrzegawczym jest już użycie let (let inputComponent) – jeśli się tego pozbędziesz i poprawisz, to będzie lepiej. https://github.com/houdini22/another-react-boilerplate/blob/5e0b0abf2f2a90969579e9a9dd1872715bccc643/WWW/src/js/components/form/FormField/FormField.js#L31
• Używasz jQuery w komponentach reaktowych, co jest błędem.
• W komponencie Container trzymasz elementy w state – to błąd. https://github.com/houdini22/another-react-boilerplate/blob/5e0b0abf2f2a90969579e9a9dd1872715bccc643/WWW/src/js/components/ui/Popover/Popover.js#L15-L22
• W tym samym komponencie źle zaimplementowałeś componentWillUnmount – document.removeEventListener nie usunie listenera, bo tworzysz nową funkcję. https://github.com/houdini22/another-react-boilerplate/blob/5e0b0abf2f2a90969579e9a9dd1872715bccc643/WWW/src/js/components/ui/Popover/Popover.js#L28 https://github.com/houdini22/another-react-boilerplate/blob/5e0b0abf2f2a90969579e9a9dd1872715bccc643/WWW/src/js/components/ui/Popover/Popover.js#L57
• Niepoprawnie używasz AppContext.Provider – przy każdym renderze tworzony jest nowy obiekt value a w nim nowe funkcje. https://github.com/houdini22/another-react-boilerplate/blob/5e0b0abf2f2a90969579e9a9dd1872715bccc643/WWW/src/js/components/ui/Popover/Popover.js#L109-L112
• Zapis this.handleOutsideHover = this.handleOutsideHover.bind(this) jest zbędny, bo możesz używać arrow functions w klasach. https://github.com/houdini22/another-react-boilerplate/blob/5e0b0abf2f2a90969579e9a9dd1872715bccc643/WWW/src/js/components/ui/Popover/Popover.js#L177
• this.__reactstandin__isMounted – wydaje się, że nigdy tego nie ustawiasz, zresztą jest to zbędne. https://github.com/houdini22/another-react-boilerplate/blob/5e0b0abf2f2a90969579e9a9dd1872715bccc643/WWW/src/js/components/ui/Popover/Popover.js#L189
• W środku <AppContext.Consumer> masz taki kod: this.contentElement = contentElement – po co to przypisanie? Do jakiego this tutaj przypisujesz? https://github.com/houdini22/another-react-boilerplate/blob/5e0b0abf2f2a90969579e9a9dd1872715bccc643/WWW/src/js/components/ui/Popover/Popover.js#L221-L226

Pewnie jest coś więcej, więc jak poprawisz te uwagi, to mogę zerknąć jeszcze raz :)

Pozdro!

[houdini22]

przerost formy nad treścią.

[typeofweb]

Mimo, że minęło sporo czasu, to review jest nadal aktualne. Jak poprawisz te błędy, które znalazłem, to chętnie zerknę ponownie.

[typeofweb]

@houdini22 Review nadal aktualne, a może nawet bardziej niż dawniej – szczególnie w obliczu Twoich postów na Facebooku o problemach ze znalezieniem pracy.