Vendosa ta shkruaj këtë artikull për të gjithë njerëzit që fillojnë me projekte të reja React, me shpresën se do t'i ndihmojë në një farë mënyre.

Pse të reagoni? Është shumë e thjeshtë, në këtë pikë të jetës sime sapo po hyja në kozmosin e Uebit dhe React ishte korniza më e njohur e front-endit.

Aplikacioni që ndërtova është përdorur për Zgjedhjet e Qeverisë së Trupit Studentor në Kolegjin tim dhe m'u deshën afërsisht 2 muaj për ta përfunduar atë. Lidhja me depon e GitHub: https://github.com/shadxx7/elections-frontend. Pra, le të fillojmë:

Menaxhimi i Shtetit

Nëse e keni mësuar mjaftueshëm React dhe për këtë çështje ndonjë kornizë të mirë të pjesës së përparme të JS, do ta dinit rëndësinë e menaxhimit të shtetit. Menaxhimi i mirë i gjendjes është çelësi për një aplikim të shkallëzuar dhe fleksibël.

React ju lejon të përdorni biblioteka të ndryshme menaxhuese shtetërore, më e popullarizuara është Redux dhe siç pritej e përdora edhe në këtë projekt, por më lejoni të jem i qartë, Redux nuk është gjithmonë zgjidhja. Tani mos më keqkuptoni, Redux është i mrekullueshëm, por *po, famëkeqi, por* nuk është menduar për të gjitha projektet. Redux, siç e përkufizon vetë, është një "Kontejner i gjendjes së parashikueshme", që në thelb do të thotë se ju mundëson të mbani një gjendje globale në të gjithë aplikacionin tuaj React dhe mund ta lidhni këtë gjendje në çdo komponent që dëshironi. Të gjitha duken të shkëlqyera? Problemi shfaqet kur kuptoni sasinë e kodit të përgjithshëm që duhet të shkruani për ta arritur këtë. Disa do të argumentonin se cili është problemi? Problemi është se ndonjëherë nuk është thjesht e nevojshme për të mbajtur një gjendje globale dhe kjo, natyrisht, ndryshon me rastin tuaj të përdorimit, por nuk mund të them se sa kohë do të kisha kursyer nëse do të vendosja t'i bëja gjërat ndryshe.

Pra përfundimi; nuk përdorni Redux? Jo, është më shumë si përpara se të vendosni për një bibliotekë shtetërore, është më mirë të vlerësoni nevojat e aplikacionit, të studioni bibliotekat e ndryshme si MobX ose ndoshta edhe të përdorni React Context API dhe më pas të finalizoni se çfarë dëshironi të përdorni dhe ku.

Duke testuar

Në testim, kjo fjalë e vetme është në gjendje të shkaktojë emocione urrejtjeje te miliona zhvillues në mbarë botën. Sido që të mendoni, bëra gabimin e tmerrshëm duke e shmangur derisa mbarova pjesën më të madhe të aplikimit. Në fillim, nuk duket kurrë e dukshme të shkruash teste për çdo UI/funksion të vogël që shtoni në aplikacionin tuaj, por kur jeni duke finalizuar aplikacionin tuaj dhe keni nevojë të kryeni teste të plota, është e dhimbshme t'i bëni ato me dorë dhe gjithashtu nga ana njerëzore e pamundur për të mbuluar të gjitha. rastet e ndryshme të testimit, veçanërisht kur bëhet fjalë për testimin e UI. Kjo është kur kuptoni se shkrimi i testeve së bashku me shkrimin e komponentëve tuaj është vërtet i dobishëm. Aktualisht, për të shkruar testet e mia, unë jam duke përdorur "react-testing-library" dhe e kam parë të shkëlqyeshme deri më tani. Ekzistojnë gjithashtu biblioteka të tjera, si "enzima" e Airbnb.

Klasa dhe Komponentët Funksionalë

Kur filloni në React, të gjithë zakonisht preferojnë komponentët e klasës mbi ato funksionale. Fillimisht përdora edhe komponentët e klasës kudo. Përsëri, ka kuptim vetëm, pasi metodat e ciklit jetësor React janë të disponueshme vetëm për komponentët e klasës (kjo po supozon se Hooks nuk janë lëshuar), por përdorimi i komponentëve funksionalë është shumë i rëndësishëm. Kjo për shkak se ata janë thjesht më të shpejtë për sa i përket performancës në krahasim me komponentët e klasës. Ato mund të bëjnë mjaft ndryshimin kur faqet tuaja marrin komponentë të rëndë dhe për më tepër ato duken më të pastra për sa i përket kodit, duke rritur kështu lexueshmërinë e kodit.

Thërrakë-zhavorr

Tani me problemet dhe gabimet më të vogla;

a. Përpjekja për të dhënë funksione boshe

Ky gabim humbi orë të tëra të jetës sime. Në thelb, kur përpiqeni të jepni një funksion të klasës si ky:

Do të kthejë një gabim nëse mbështetësit nuk janë ngarkuar në paraqitjen e parë, që do të thotë se nëse po ngarkoni rekuizita me çfarëdo lloj vonese (për shembull - nga fundi juaj i pasme), kodi i mësipërm prishet. Zgjidhja e shpejtë për këtë është të përdorni funksionin 'marr' të bibliotekës lodash dhe të bëni një kontroll të shpejtë nëse mbështetësja është ngarkuar apo jo, si kjo:

b. Struktura e dosjeve dhe skema e emërtimit

Është e nevojshme të kesh një strukturë të mirë dosjeje, por humbja e tepërt e kohës për të është e panevojshme. Thjesht të vendosni për zgjedhjet e njohura dhe më pas t'i ndryshoni ato pak sipas nevojave tuaja, duhet të bëjë punën. Ai që më në fund ndoqa ishte:

/assets për imazhet, ikonat etj. /komponentët për të gjithë komponentët e mi, /ruani për dyqanin dhe veprimet e mia Redux, /style për të gjithë skedarët css, /teste për të gjitha testet dhe /utils për disa skedarë funksioni shtesë të shërbimeve.

Unë rekomandoj të mos vendosni skedarë css në një dosje të stilit të pavarur, në vend të kësaj thjesht t'i hidhni ato në dosjen e tyre përkatëse të komponentëve.

Për emërtimin e skedarëve dhe dosjeve të komponentëve, fillimisht ndoqa metodën e emërtimit të rastit Snake (hello_world) për shkak të projekteve të tepërta të python që kam bërë. Problemi në përdorimin e kësaj skeme emërtimi në projektet React është se nuk përshtatet mirë me rastin e rreptë Pascal (HelloWorld) i përdorur në emërtimin e komponentëve React në JSX. Prandaj, për të shmangur konfuzionin e mëtejshëm dhe për të kënaqur OCD-në time, i ktheva të gjithë skedarët dhe dosjet e mia të komponentëve në rastin Pascal.

c. Duke përdorur Modern React

React po përditësohet shpesh me veçori dhe përmirësime të reja dhe ky nuk duhet të jetë lajm pasi aktualisht është kuadri më i popullarizuar i JavaScript-it në front-end. Edhe pse ekipi kryesor i React rrallë prezanton ndryshime të papritura, është e domosdoshme të vazhdohet me ndryshimet më të reja për të pasur aplikacionet me performancën më të mirë. Vetëm në rrjedhën e këtij projekti, kishte mbi 10 publikime të React. Në këtë moment në kohë, ajo që unë do ta quaja React modern do të ishte React Context API, React Suspense, React Hooks, React Concurrent etj. Kryesisht, ndjeva se mund të kisha përdorur React Context API për të zëvendësuar shumicën e Redux I kam përdorur gjë që do të më kishte kursyer shumë kohë.

d. A duhet të keni përdorur Typescript? Ndoshta.

Kështu që, në kohën e shkrimit të këtij artikulli, unë kam mësuar tashmë shkrimin e shkrimit dhe e shoh qartë rëndësinë e tij. Nuk ka shumë gjëra që mund të shpjegoj drejtpërdrejt nga projekti, por ja çfarë kam për të thënë; Typescript definitivisht ndihmon shumë veçanërisht me projekte më të mëdha. Po, ai shton pak kodin e përgjithshëm, por shkrimi i atij kodi shtesë është ajo që do të preferoni sesa një rrjedhë gabimesh që lidhen me llojet në të cilat do të humbni orë të tëra duke korrigjuar gabimet.

Përfundimi

A janë këto të gjitha gabimet që kam bërë? Jo, sigurisht që jo, ka pasur shumë të tjerë, por nuk mendoj se ia vlen të përmenden, më së shumti sepse ose ishin shkaktuar nga marrëzia ime ose ishin të pashmangshme.