[Alodnog]

#programowanie #webdev #react
/components/Button/Button.js czy /components/Button/index.js
Które nazewnictwo pliku i dlaczego?

[WypadlemZKajaka]

@Alodnog: ../Button.js
Łatwiej wyszukać plik po nazwie, nie musisz grzebać w hierarchii plików

[Niegrzeczny_gentleman]

@Alodnog: /components/Button.js
Po co jeszcze bardziej rozdrabniać?

[S.....8]

@Alodnog: @WypadlemZKajaka: jedno i drugie, tj obok Button.js tworzysz plik index.js w ktorym robisz export tego co jest w Button.js. Dzieki temu mozesz to importowac piszac import … from „components/Button” zamiast „components/Button/Button”
@Niegrzeczny_gentleman: Jak ma plik osobny ze stylami, jakimis funkcjami, typami itp to ma to sens. Zawsze warto zrobic katalog

[michael94]

@Alodnog: @Sheppard28: Sheppard podał najlepsze rozwiązanie moim zdaniem. No i najważniejsze żeby to był Button.tsx ( ͡° ͜ʖ ͡°)

[Niegrzeczny_gentleman]

@Sheppard28: oj byczq, jeśli masz do jednego atomic component 4 pliki to robisz coś nie tak moim zdaniem xD

A ten plik index.js obok Button.js to największe zło jakie widziałem. Po to react forsuje programowanie funkcyjne żeby takich kwiatków nie robić. export const Button i więcej Ci nie potrzeba.

[michael94]

@Niegrzeczny_gentleman: A co ma komponent funkcyjny do ilości plików? Rozwiązanie z index.js można ograć configiem dla webpacka, ale ciągle jest lepsze niż trzymanie komponentów w jednym zbiorczym katalogu.
Bo na 99% zaraz Ci dojdą jakieś style/testy/mocki danych i będziesz miał turbo bałagan. No chyba że robisz projekt na zaliczenie informatyki ( ͡° ʖ̯ ͡°)

[S.....8]

@Niegrzeczny_gentleman: Pisales kiedykolwiek z uzyciem jakiejs biblioteki typu React? ( ͡° ͜ʖ ͡°)

[Niegrzeczny_gentleman]

@michael94: masz w sumie rację że nic nie ma. W głowie miałem ideę nie pisania niepotrzebnego kodu

jest lepsze niż trzymanie komponentów w jednym zbiorczym katalogu

Mając 20 plików .js a 20 folderów to różnica?

configiem dla webpacka

Można też tak pisać kod żeby nie robić jakiś szpagatów w webpacku.

Bo na 99% zaraz Ci dojdą jakieś style/testy/mocki danych

Style dodajesz wtedy do komponentu (albo powinno się mieć coś takiego jak

[Niegrzeczny_gentleman]

@Sheppard28: coś tam pisałem, jakieś 3 lata stricte w reakcie i jakieś 7 w developerce ogólnie

[S.....8]

@Niegrzeczny_gentleman: to nie chce mi sie wierzyc, ze nie spotkales sie z jakims stajl-gajdem, w ktorym mieliscie wlasnie jakies komponenty typu Button. Jezeli korzystaliscie przy okazji z CSS Modules i TypeScripta to nie ma bata zebyscie to trzymali wszystko w jednym katalogu components ( ͡° ͜ʖ ͡°)

[Niegrzeczny_gentleman]

@Sheppard28: Screen z obecnego projektu (ja nie robiłem struktury ale nie jest tragiczna :D). Ogólnie rozumiem foldery jeśli jest jakiś większy komponent, ale jeśli mówimy o komponentach atomicznych to po co dodawać te foldery. Jak style piszesz w CSS-in-JS lub w styled-components no osobnych plików nie potrzebujesz.

Piszę w taki sposób od dłuższego czasu, ludzie z mojego otoczenia tak piszą, nikt nie ma z tym większego problemu. I nie klepiemy CRUDów

[Krall]

@Niegrzeczny_gentleman: przecież na dzień dobry masz już 3 pliki:
.component.tsx
.module.scss / .styles.ts
.tests.tsx

Jeszcze typy można by było przerzucić do osobnego.

Nie wyobrażam sobie wrzucenia styli w ten sam plik. :0

[zackson]

Dzieki temu mozesz to importowac piszac import … from „components/Button” zamiast „components/Button/Button”

@Sheppard28: wielka różnica XD Sam Ryan Dahl mówi, że index.js to rak i żałuje, że to wprowdział.

/components/Button/Button.js czy /components/Button/index.js

Które nazewnictwo pliku i dlaczego?

@Alodnog: /components/Button/Button.js bo https://youtu.be/M3BM9TB-8yA?t=880

[S.....8]

@zackson: czy Ty mi wlasnie wyslales jakiegos typa, ktory twierdzi, ze "to jest zle bo tak" i to juz przekresla sens istnienia patternu stosowanego wlasciwie przez wszystkie wieksze projekty uzywajace JS/Ts? ( ͡° ͜ʖ ͡°) Wiesz do czego w ogole to sluzy w takim np. typescripcie?

[zackson]

wyslales jakiegos typa

@Sheppard28: nie jakiegoś typa tylko twórce Node.js. Koleś chyba wie o czym mówi.

to juz przekresla sens istnienia patternu stosowanego wlasciwie przez wszystkie wieksze projekty uzywajace JS/Ts?

@Sheppard28: używają bo sam twórca node.js tak chciał i teraz żałuje.

Wiesz do czego w ogole to sluzy w takim np. typescripcie?

@Sheppard28: możesz mnie oświecić co takiego daje ładowanie w każdy folder index.js w projecie TS

[S.....8]

możesz mnie oświecić co takiego daje ładowanie w każdy folder index.js w projecie TS

@zackson: w tym przypadku index.ts. Masz mase artow na ten temat w guglu.

[zackson]

w tym przypadku index.ts. Masz mase artow na ten temat w guglu.

@Sheppard28: masę artów i żaden nie mówi jaki problem rozwiązuje bo tak po prostu działa Node.js by design.

[S.....8]

@zackson: chociazby ten najbardziej oczywisty, ze lepiej zaciagac w jednej linijce kilka modulow z jednego zrodla niz pisac N linijek dla kazdego modulu ktory jest w osobnym pliku. Tak sie eksportuje m.in. typy w kazdej paczce NPMowej. Rozumiem oni wszyscy sie mylą?

[zackson]

chociazby ten najbardziej oczywisty, ze lepiej zaciagac w jednej linijce kilka modulow z jednego zrodla niz pisac N linijek dla kazdego modulu ktory jest w osobnym pliku|

Każde ogarnięte IDE ma auto-import i nic nie muszę pisać. Importy w moim projekcie mam zwinięte bo nikt tego nie czyta. IDE samo dodaje i samo usuwa nieużywane.

Tak sie eksportuje m.in. typy w kazdej paczce NPMowej. Rozumiem oni wszyscy sie mylą?

@Sheppard28: Nie