Как да организирате приложението си React

Снимка на Андрю Симан на Unsplash

Едно от най-добрите неща, които трябва да се добавят към JavaScript, е модулната система. Животът преди модулите не беше лесен. В наши дни ние сме в състояние да модулираме кода си в отделни файлове, насърчаващи добрите принципи на програмиране като D.R.Y. (Не се повтаряйте отново), повторно използване на код и абстракция на код.

Но не всичко е розово. С възможността да модулираме кода си в отделни файлове, сега имаме ново предизвикателство: „Организиране на нашите файлове.“ Намирането на правилния баланс на разделяне на код може да бъде трудно, а как да го направите може да бъде много зависим от вашето приложение и какви технологии използвате. Това определено е вярно в приложенията React.

Как организирате кода си е много лично и няма да се опитвам да кажа, че има един начин да го направите. Това каза, че има няколко принципа, които можете да използвате, за да поддържате своя код организиран, докато расте.

Не бързайте да създавате нови файлове

Софи Алперт наскоро го обобщи в този туит:

Понякога сме толкова развълнувани от разделянето на нашия код в отделни файлове, че не смятаме какво означава да ги поддържаме. Нека вземем този код за пример:

В нашия много опростен пример по-горе, кодът не взема много редове код, но тъй като нараства, много лесно е да си представим колко трудно може да бъде управлението на всичко това в един компонент. Затова решаваме, че нашите секции за навигация, основни и отстрани могат да бъдат разделени на свои компоненти. Може да е много примамливо да ги поставите в отделни файлове, но това може да затрудни поддържането на този компонент. Преди да ги разделите в собствените си файлове, бих препоръчал да направите нещо подобно:

Това ви помага да запазите ползата от абстракция на кода, като същевременно поддържате общ код близо един до друг. Докато кодирате, може да откриете необходимостта да ги издърпате в отделни файлове, например раздел Nav може да е необходим на други страници. В този момент трябва да изтеглите този компонент в собствения му файл.

Не бързайте да правите директории

И файловете, и директории са чудесни инструменти за организиране на нашия код, но двата се използват за различни цели. Файловете ни помагат да групираме свързания код и директории ни помагат да групираме свързани файлове. Това, което често може да се случи, е, че в крайна сметка създаваме файлови папки с един единствен index.js под страх, че може да се наложи да добавим свързани файлове и не искаме да рефакторираме кодовата ни база по-късно. За щастие можем да си вземем тортата и да я изядем и нея. Как? Нека ти покажа.

Когато импортирате от файл, не е нужно да поставяте .js в края, за да може горната част на файла да изглежда така:

// името на файла е Nav.js
импортиране на Nav от './Nav';

Това не е голяма работа, сигурен съм, че сте го правили през цялото време или редакторът на вашия код го е направил вместо вас, без да мислите много за това. Това, което наистина е страхотно в това, е, че да кажем, че искате да разфасовате някакъв код в отделен файл, но все пак искате да го групирате заедно, т.е. искате да го групирате в директория. Това се прави много лесно. Всичко, което трябва да направите, е да създадете директория със същото име като компонента, да преместите файла в директорията и да го преименувате index.js. Не е нужно да правите нищо за своите извлечения, тъй като импортирането е достатъчно интелигентно, за да използвате файла index.js, когато импортирате от директория.

Най-голямото отнемане от това не бързайте да решавате проблеми, които нямате. Започнете просто, поддържайте го просто и нека сложността се случи естествено. Вашият файл ще бъде много по-лесен за поддържане, ако го направите.