File Structure

Το React δεν έχει απόψεις για το πώς βάζετε τα αρχεία σε φακέλους. Ωστόσο, υπάρχουν μερικές κοινές προσεγγίσεις που είναι δημοφιλείς στο οικοσύστημα τις οποίες ίσως θέλετε να λάβετε υπόψη.

Ομαδοποίηση κατά χαρακτηριστικά ή διαδρομές

Ένας κοινός τρόπος για τη δομή των project είναι να τοποθετήσετε τα CSS, JS και tests μαζί σε φακέλους ομαδοποιημένους ανά χαρακτηριστικό ή διαδρομή.

common/
  Avatar.js
  Avatar.css
  APIUtils.js
  APIUtils.test.js
feed/
  index.js
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  FeedAPI.js
profile/
  index.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css
  ProfileAPI.js

Ο ορισμός του “χαρακτηριστικού” δεν είναι καθολικός και εξαρτάται από εσάς να επιλέξετε την ευαισθησία. Εάν δεν μπορείτε να βρείτε μια λίστα φακέλων ανώτερου επιπέδου, μπορείτε να ρωτήσετε τους χρήστες του προϊόντος σας από ποια βασικά μέρη αποτελείται, και να χρησιμοποιήσετε το νοητικό τους μοντέλο ως προσχέδιο.

Ομαδοποίηση κατά τύπο αρχείου

Ένας άλλος δημοφιλής τρόπος δομής των project είναι η ομαδοποίηση παρόμοιων αρχείων, για παράδειγμα:

api/
  APIUtils.js
  APIUtils.test.js
  ProfileAPI.js
  UserAPI.js
components/
  Avatar.js
  Avatar.css
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css

Μερικοί προτιμούν επίσης να χωρίσουν τα components σε διαφορετικούς φακέλους ανάλογα με το ρόλο τους στην εφαρμογή. Για παράδειγμα, το Atomic Design είναι μια μεθοδολογία σχεδιασμού που βασίζεται σε αυτήν την αρχή. Να θυμάστε ότι είναι συχνά πιο παραγωγικό να αντιμετωπίζετε τέτοιες μεθοδολογίες ως χρήσιμα παραδείγματα, παρά αυστηρούς κανόνες που πρέπει να ακολουθήσετε.

Αποφύγετε την υπερβολική εμφώλευση

Υπάρχουν πολλά προβληµατικά σηµεία που σχετίζονται με εμφωλευμένους καταλόγους σε JavaScript projects. Γίνεται πιο δύσκολο να γράψετε relative imports μεταξύ τους ή να ενημερώσετε αυτά τα imports κατά τη μετακίνηση των αρχείων. Εκτός αν έχετε πολύ επιτακτικό λόγο να χρησιμοποιήσετε μια εμφωλευμένη δομή φακέλων, σκεφτείτε να περιοριστείτε σε τρεις ή τέσσερις ένθετους φακέλους το πολύ σε ένα project. Φυσικά, αυτή είναι μόνο μια πρόταση και ενδέχεται να μην σχετίζεται με το project σας.

Μην το σκέφτεστε υπερβολικά

Εάν ξεκινάτε τώρα ένα project, μην δαπανήσετε περισσότερα από πέντε λεπτά για την επιλογή της δομής των αρχείων. Διαλέξτε οποιαδήποτε από τις παραπάνω προσεγγίσεις (ή βρείτε τις δικές σας) και ξεκινήστε να γράφετε κώδικα! Ενδεχομένως να θέλετε να το ξανασκεφτείτε ούτως ή άλλως, αφού γράψετε κάποια ποσότητα κώδικα.

Εάν αισθάνεστε να έχετε κολλήσει, ξεκινήστε διατηρώντας όλα τα αρχεία σε έναν φάκελο. Τελικά θα μεγαλώσει αρκετά ώστε να θέλετε να διαχωρίσετε ορισμένα αρχεία από τα υπόλοιπα. Μέχρι τότε θα γνωρίζετε αρκετά ώστε να πείτε ποια αρχεία επεξεργάζεστε πιο συχνά μαζί. Γενικά, είναι καλή ιδέα να διατηρείτε αρχεία που αλλάζουν συχνά μαζί, κοντά το ένα στο άλλο. Αυτή η αρχή ονομάζεται “colocation”.

Καθώς τα projects μεγαλώνουν, συχνά χρησιμοποιούν μία μίξη και των δύο παραπάνω προσεγγίσεων στην πράξη. Επομένως, η επιλογή του “σωστού” στην αρχή δεν είναι και πολύ σημαντική.