ფაილების სტრუქტურა

რექატი ამის მხრივ ძალიან ბევრ თავისუფლებას გვაძლევს, რასაც რათქმუნდა კარგი და ცუდი მხარეები აქ, და ამის გამო ადვილია შენ თავს ფეხში ესროლო, ამიტომაც რამოდენიმე წესი გვაქ რაც არსროლაში დაგეხმარება:

1. უპირველეს ყოფლისა რათქმუნდა ერთადერთ რეაქტის წესს უნდა გავყვეთ რაც არის ის რომ ჩვენ კოდი src საქაღალდეში უნდა ვწეროთ

2. სურათები უნდა იყოს src/assets-ში

3. ჩვენ .svg-ი ფაილები არ უნდა იყოს .svg-ი ფორმატში, ამის მაგივრად svg-ის კოდი უნდა იყოს რეაქტის ფუნქციონალურ კომპონენტში, ეს მაღალ კონფიგურაციის უფლებას გვაძლევს props-ის საშუალებით

4. ერთერთი ყველაზე ცნობილი წესი ის არის რომ ჩვენი კომპონენტები უნდა იყოს src/componenet-ს საქაღალდეში მოთავსებული, მაგრამ ერთი განსხვავებული რამ ჩვენთან ამ ზოგად წესთან დაკავშირებული ის არის რომ ამ src/component საქაღალდეში მარტო გლობალურ კომპონენტებს ვინახავთ

5. ჩვენ საიტზე თითქმის ყოველთვის იქნება რამოდენიმე გვერდი, ამ გვერდის კომპონენტი უნდა მოვათავსოტ src/pages-ს საქაღალდეში, ოღონდ კომპონენტი საქაღალდეში უნდა იყოს, მაგ: src/pages/login/login.jsx კომპონენტის საქაღალდეში მოთავსების მიზეზი შემდეგ წესში გახდება გასაგები,

6. კომპონენტები რომლებსაც მარტო ერთ გვერდზე ვიყენებთ უნდა მოვათავსოთ გვერდის კომპონენტის საქაღალდეში, მაგ: src/pages/login/componenets/Input.jsx ეს Input.jsx-ის ფაილი არის ისეთი ინპუტი რომელსაც სხვაგან არსად არ ვიყენებთ რის გამოც ის აქ ჩავსვით,

7. თუ გვერდის რომელიმ კომპონენტს ჭირდება type-ების ფაილი (TS-ის პროექტის შემთხვევაში), ჰელპერების ცალკე ფაილი, ცალკე custom hook-ი, და ამათ მარტო ერთ ადგილას (ამ კომპონენტში) ვიყენებთ შეგვიძლია ეს კომპონენტის ფაილი ჩავსვათ იგივე სახელის საქაღალდეში და ჩვენი ჰელპერი/ჰუკი/ტიპები იმავე საქაღალდეში შევინახოთ

8. context და redux-ის store-ის ფაილები უნდა შევინახოთ src/state-ს საქაღალდეში,

9. custom hook-ები უნდა შევინახოთ src/hook-ს საქაღალდეში

10. თუ ჩვენი საიტი მრავალ ენოვნია თარმგნების json ფაილი უნდა შევინახოთ src/locales-ს საქაღალდეში, ეს იმ შემთხვევაში თუ ბიბლიოთეკას რომელსაც იყენებთ სხვა რაიმე მოთხოვნა არ აქვს და ამის გაკეთება შეუძლებელია

11. თუ TS-ის პროექტში ვართ შეიძლება დაგვჭირდეს გლობალური ტიპების შექმნა მათი კარგი შესანახი ადგილი არის, src/types-ის საქაღალდე, და თუ მარტო ერთ კომპონენტს ეკუთვნის ტიპი როგორ უნდა მოიეცეთ 5-ე წესში ვახსენე

12. გლობალრუი ჰელპერები უნდა შევინახოთ src/helpers-ში

13. თუ readme-ისთვის რაიმე დამხმარე ფაილები გვაქ ის შეგვიძლია საქაღალდის root-ში readme-ში შევინახოთ, src-ის გარეთ რადგანაც ის კოდში არ გვჭირდება და უბრალოდ ზედემტია

14. API-ზე request-ებზე და მათი მოთავსების ადგილზე ქვემოთ ცალკე სექცია იქნება #iv.-api-requests-bekendshi-inpormatsiis-gagzavnis-motsesrigeba

რაც შეეხება nextjs ყველაფერი იგივე რჩება გარდა src-ის, მნიშნელობა არ აქვს რომელ დირექტორიას ვიყენებთ ჩვენი პროექტისთვის app-ს თუ pages, კომპონენტები მაინც არ უნდა მოვათავსოთ გვერდებთან და მაინც კომპონენტების საქაღალდეში უნდა გავიტანოთ

თუ ამის ასე ადვილად აღქთქმა ძნელი არის თქვენთვის რაც მოსალდენლია და რის გამოც შეგიძლიათ ამ პატარა სამაგალითო პროექტს შეხედოთ: react-folder-structure-example ოღონდ readme-ს მაგალითად არ გამოიყენოთ ან შეგიძლიათ ამ დიაგრამას შეხეოთ უკეთესი ვიზუალიზაციისთვის, მაგისთვის პროექტის და კოდის ხარისხის ზოგადი კრიტერიუმები ნახეთ