codereview react redux js opinia

pytanie zadane 26 lipca 2020 w JavaScript przez rob Bywalec (2,440 p.)
edycja 26 lipca 2020 przez rob

Proszę o code review, dopiero zacząłem pisać ale jestem ciekawy czy podążam we właściwym kierunku, co robię źle, co można poprawić? Chodzi mi o funkcjonalność react, redux,js nie skupiałem się bardzo na css to będzie do poprawy, i jeszcze jedno apka inaczej wyświetla się na githubie a inaczej na localhost, na githabie jest wyraźnie większa - pracuję nad tym, ale ktoś wie dlaczego?

live

https://robkot500.github.io/to_do/

code

https://github.com/robkot500/to_do

proszę o pomoc

komentarz 26 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

Z tego co widzę w podlinkowanym repo, to znajdują się tam zbundlowane pliki - a takie raczej nie nadają się do (komfortowego) czytania przez ludzi. Więc jakbyś mógł, to dorzuć oryginalne pliki źródłowe (przed procesem bundlowania i minifikacji).

1	komentarz 26 lipca 2020 przez rob Bywalec (2,440 p.) https://github.com/robkot500/to_do/tree/master chyba chodzi o to?

1 odpowiedź

odpowiedź 26 lipca 2020 przez Aisekai Nałogowiec (42,190 p.)
wybrane 26 lipca 2020 przez rob

Najlepsza

Mały projekt ale zawsze coś do poprawy:

1. Zbędne console.log

2. Zbędny zakomentowany kod

3. React udostępnia możliwość tworzenia styli i "modulowania" ich - unikanie konfliktów css między komponentami https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/

4. W Add.js - if do wywalenia, do zastąpienia switchem.

5. Tak samo w Header.js

6. Stylowanie za pomocą 'px', stylowanie po elemencie zamiast klasie.

7. Zbyt płaska struktura projektu.

8. Akcje bezsensownie nazwane np Akcja: "DELETE" - zbyt ogólnie, za mało specyficzne. Zmieniłbym to na coś: "[TASKS] DELETE". Nazwy akcji bym wydzielił do jakiegoś enuma. Zastosowałbym pattern Action Creator.

9. Jak poznasz routing - do zastąpienia mechanizm zmiany widoku (w sensie zastosowanie routingu).

komentarz 26 lipca 2020 przez imklau Nałogowiec (42,090 p.)

6. Ja tam widzę dużo stylowania za pomocą % a nie px
7. Wypadałoby wytłumaczyć, w czym problem z "płaską strukturą kodu"

komentarz 26 lipca 2020 przez Aisekai Nałogowiec (42,190 p.)

7) Na temat struktury projektów, jest mnóstwo artykułów łatwo dostępnych w internecie - wystarczy wpisać frazę w Google "React Project Structure".

Pierwszy wynik:

https://medium.com/@Charles_Stover/optimal-file-structure-for-react-applications-f3e35ad0a145

komentarz 26 lipca 2020 przez rob Bywalec (2,440 p.)
edycja 26 lipca 2020 przez rob

dziękuję za review i inne wypowiedzi

@Aisekai, można dwa zdania przybliżenia odnośnie tej płaskiej struktury? tak własnymi słowami?

nie rozumię też

9. Jak poznasz routing - do zastąpienia mechanizm zmiany widoku (w sensie zastosowanie routingu).

komentarz 26 lipca 2020 przez rob Bywalec (2,440 p.)

@Noemi, mam link do arta ale czy można w dwóch zdaniach wytłumaczyć o co chodzi ze strukturą projektu? dzieki za wypowiedź

komentarz 26 lipca 2020 przez Aisekai Nałogowiec (42,190 p.)

Odnośnie płaskiej struktury:

Masz wszystkie komponenty wrzucone do jednego folderu. To powoduje dwa dość poważne problemy:

1) przyrostowa ilość plików w folderze - jeżeli będziesz miał 100 komponentów, to nagle zrobi Ci się 100 plików w jednym folderze. Nie mówiąc już o klasach odpowiedzialnych za jakąś logikę aplikacji

2) Brak jakiejkolwiek hierarchii. Jeżeli masz np komponenty wykorzystywane do zarządzania Taskami - wrzuciłbym je do folderu np. tasks. Jeżeli masz komponenty wykorzystywane do zarządzania postami - wrzuciłbym je do folderu posts. Gdybym miał komponent wykorzystywany tu i tu - wrzuciłbym do shared. Łatwiej będzie zlokalizować jakąś konkretną klasę/komponent

Odnośnie routingu - wykorzystujesz teraz coś takiego do wyświetlania różnych "podstron":

props.position.position

W routingu wykorzystujesz Link / NavLink (nie pamiętam już). Dalej będziesz miał SPA ale będziesz miał w pewnym sensie "udawany" routing (nie będą ładowane inne pliki html, tylko React-Router zajmie się podmianą pewnych wyświetlanych komponentów).