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

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

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-ის ფაილები უნდა შევინახოთ src/context-ს საქაღალდეში

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

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

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

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

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

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

15. API-ზე request-ებზე და მათი მოთავსების ადგილზე ქვემოთ ცალკე სექცია იქნება ფაილების სტრუქტურა

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

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