Am testat acum și pare în regulă (cu jsconfig.json
din repo):
{
"compilerOptions": {
"baseUrl": "src"
}
}
Singura problemă fiind aici:
src\components\Header\RightMenu\RgtMenu.jsx
Line 6:1: `components/Buttons/SignIn/SignInButton` import should occur before import of `./RgtMenu.module.css` import/order
I.e. import
-urile relative ar trebui să fie ultimele:
import { BsThreeDotsVertical } from 'react-icons/bs';
- import styles from './RgtMenu.module.css';
- import SignInButton from 'components/Buttons/SignIn/SignInButton';
+ import SignInButton from 'components/Buttons/SignIn/SignInButton';
+ import styles from './RgtMenu.module.css';
O chestie observată și care îți va creea probleme in the long run: modularizarea componentelor.
În momentul de față ai componente de genul:
Header/Logo
Header/Navigation
Sidebar/SidebarOpen/SidebarBox1
Sidebar/SidebarOpen/SidebarBox2
Treaba asta aduce niște probleme:
- Legi componentele de layout. Dacă vrei să refolosești conținutul din
SidebarBox1
în… footer, de exemplu, cum procedezi?
- Folosești
state
-ul în numele componentei. Componentele ar trebui să nu știe pe ce lume trăiesc (din același motiv ca mai sus: dacă vrei să folosești componenta în altă parte cum faci? Dacă vrei să le separi, ai putea să le spui widgets
, de exemplu.
- Denumirea lucrurilor. Dacă ar fi să citești doar denumirea componentelor, ce nume ți se pare că este mai descriptiv?
SidebarBox1
sau BestOf
? SidebarBox2
sau YoutubeUpsells
?
Altfel spus, primele două probleme le-ai putea rezolva dacă încetezi să te mai gândești „cum sunt așezate lucrurile în pagină” și pivotezi spre un raționament de genul „componenta asta nu trebuie să știe ce părinți are”
Funcția asta nu are ce căuta aici. Extrage-o într-un modul separat.
Adițional, aceeași problemă ca mai sus: dacă vrem să afișăm thumbs de video într-un carusel, de exemplu (sau related to
, cum este în pagina de video) ce facem? Importăm HomePage/Videos
în sidebar?
Nu sunt foarte sigur de treaba asta, dar cred că aș extrage Video
și Videos
în două componente: una iterează, cealaltă doar afișează.
Ai făcut treabă bună la clonarea vizuală. Hai să vedem cum te descurci la interacțiuni:
- categoriile de sus să filtreze ce se afișează jos (fă asta fără request-uri extra spre server, ca să exersezi interacțiunea între componente)
- search-ul să conțină și sugestii (fă asta cu request-uri spre api, afișează un „loading” în zona thumbs dar ȘI în search box). (exersezi interacțiunea între componente și request-urile async)
- meniul pentru fiecare video (atât ăsta de mai jos cât și „watch later” / „add to queue”)