„React“ yra viena iš pirmaujančių sąsajų su „JavaScript“ kūrimo sistemų. Tai natūraliai komponentais pagrįstas metodas, kai surenkate savo programą iš daugkartinio naudojimo nepriklausomų funkcijų dalių.
Logiškas žingsnis yra atskirti pagrindinius vartotojo sąsajos komponentus nuo konkrečiam scenarijui būdingo programos kodo. Sukūrę komponentų biblioteką, galite naudoti paruoštus kūrimo blokus, kuriuos galite įtraukti į kitą projektą.
Šiame straipsnyje mes surinksime paprastą React komponentų rinkinį su Storybook, o tada supakuosime juos su Babel. Storybook yra patogus būdas patikrinti komponentus jų kūrimo metu ir po jo. Tai sąsaja, skirta naršyti bibliotekoje, eksperimentuoti su įtrauktais komponentais ir rodyti dokumentus.
Šiame straipsnyje nesigilinsime į jokią konkrečią technologiją: vietoj to tai yra bendras vadovas, kaip sukurti, supakuoti ir vizualizuoti komponentus naudojant „React“, „Storybook“ ir „Create-React-App“ derinį.
Kas yra pasakų knyga?
Pasakojimų knyga yra tiesiog įrankių rinkinys, skirtas atskiriems komponentams kurti ir pateikti, neatsižvelgiant į kontekstą, kuriame jie rodomi jūsų programoje. Jame pateikiamas komponentų kūrimo, jų valdiklių dokumentavimo ir interaktyvių pavyzdžių pateikimo žiniatinklio vartotojo sąsajoje mechanizmas. Storybook yra sistemos agnostikas – galite naudoti su Angular, Vue, Ember, Svelte ir kitais, be React.
Komponentai sukuriami parašant įprastą React kodą ir pridedant antrą papildomą failą, aprašantį to komponento „istorijas“. Tikrasis jo komponentas nesikeičia; Storybook gauna visą reikiamą informaciją iš |_+_|failo. Storybook automatiškai aptinka šiuos failus ir naudoja jų turinį, kad sukurtų įrašus jūsų bibliotekos žiniatinklio vartotojo sąsajoje.
Pamatysime modelį veikiantį vėliau, kai pradėsime rašyti komponentus. Pirmiausia turite sukurti naują React projektą ir prie jo pridėti Storybook.
Inicijuoja React projektą
Projektui inicijuoti ketiname naudoti populiarų „create-react-app“ (CRA) įrankių rinkinį. Tai suteikia jums viską, ko reikia „React“ komponentams kurti. Jis taip pat visiškai suderinamas su Storybook.
Atidarykite terminalą ir įveskite šią komandą, kad sukurtumėte biblioteką:
|_+_|paspauskite |_+_| kad patvirtintumėte |_+_| įdiegimą jei niekada anksčiau nenaudojote įrankio. Diegimo procesas gali užtrukti keletą minučių. Baigę pereikite prie naujojo |_+_| katalogas. CRA pridės „React“ priklausomybes prie jūsų |_+_| ir įdėjo pagrindinę React programą į |_+_| ir |_+_| katalogai.
CRA daro prielaidą, kad kuriate kodo bazę, kuri bus pristatyta tiesiai į naršyklę. Kadangi iš tikrųjų kuriame biblioteką, kuri neveiks kaip atskira programa, galite saugiai pašalinti numatytąją biblioteką |_+_| ir |_+_| katalogus, jei norite.
Pridėti pasakų knygą
Prie esamo CRA projekto lengva pridėti Storybook. Vykdydami šią komandą gausite viską, ko jums reikia:
|_+_| 
Būkite pasiruošę vėl palaukti kelias minutes, kol prie projekto bus įtraukti istorijų knygos paketai. Diegimo programa sukurs naują |_+_| ir |_+_| katalogai. Pastarajame yra pavyzdinių komponentų rinkinys. Ištrinkite šį katalogą dabar, nes mes jo nenaudosime.
Failai viduje |_+_| nustatykite savo istorijų knygos serverį. |_+_| yra visuotinių parametrų, pvz., failų pavadinimų šablonų, skirtų istorijų paieškai. |_+_| valdo, kaip istorijos pateikiamos Storybook žiniatinklio vartotojo sąsajoje. Šių dviejų failų nuorodos yra istorijos knygos dokumentuose; kol kas reikia tik vieno pakeitimo.
Pagal numatytuosius nustatymus pasakojimų knyga ieško istorijų jūsų |_+_| katalogas. Tai nėra prasminga projektui, kuris yra tik komponentų biblioteka. Komponentus su jų istorijomis patalpinsime tiesiai į |_+_| kataloge, naudojant formatą |_+_| ir |_+_|. Pakeiskite |_+_| lauke jūsų |_+_| failą, kuriame nurodoma |_+_| katalogas vietoj |_+_|:
|_+_|Šis fragmentas reiškia, kad Storybook atras istorijas failuose, esančiuose |_+_| katalogas, kuriame yra |_+_| priesaga; |_+_| (Reaguoti JSX), |_+_| ir |_+_| Taip pat palaikomi (TypeScript) variantai. Jei nenorite naudoti šios failų struktūros, skirkite laiko dabar, kad pritaikytumėte Storybook atitikimo šablonus pagal savo skonį.
Parašykite savo komponentus
Dabar esate pasirengęs parašyti pirmąjį komponentą. Kurkite komponentus žinomu būdu, naudodami bet kokį jums patinkantį metodą. Čia yra paprastas mygtukas, kurį norime naudoti visuose savo sąsajos projektuose:
|_+_|Tada sukurkite komponento istorijos failą. Taip Storybook suras komponentą ir supras jo konfigūraciją.
|_+_|modulis |_+_| eksportas teikia metaduomenis į Storybook. Turi būti objektas, kuriame yra |_+_| ir |_+_| savybės |_+_| naudojamas komponentui pažymėti Storybook vartotojo sąsajoje; |_+_| yra funkcija arba komponentų klasė, kurią atskleidžiate.
Istorijos knygos |_+_| yra lygiaverčiai React |_+_|. |_+_| Numatytoji eksportavimo ypatybė iš tikrųjų nustato numatytąsias rekvizitų reikšmes, kurios bus taikomos komponentų egzemplioriams, kuriuos pateikia Storybook. Čia mygtukai pažymėti |_+_| jei priedas vėliau nepakeičiamas.
Jūsų modulio pavadinti eksportai apibrėžia faktinius komponentų egzempliorius, kurie bus pateikti jūsų pasakojimų knygoje. Būtinas bent vienas. Čia sukuriami du, |_+_| numatytosios būsenos mygtuką ir |_+_| mygtuką, kuris nustato |_+_| palaikymas |_+_|.
Dabar paleiskite Storybook kūrimo serverį:
|_+_| 
Apsilankykite |_+_| naršyklėje, kad pamatytumėte savo komponentų biblioteką. Turėtumėte matyti savo |_+_| komponentas šoninėje juostoje su dviem pavadintais istorijos variantais. Spustelėjus vieną iš istorijų, bus rodoma pateikta komponento būsena.
Skirtukas „Valdikliai“, esantis po pateikimo drobe, leidžia dinamiškai keisti rekvizitų reikšmes Storybook vartotojo sąsajoje. Tai leidžia greitai ir lengvai eksperimentuoti su įvairiais priedų deriniais, kai atrandate kitų sukurtus komponentus. Yra keletas skirtingų būdų, kaip Storybook gali rasti valdiklius; šiuo atveju jie kilę iš |_+_| priskirtas |_+_| komponentas.
Pasakojimų knyga automatiškai apdoroja komponento „veiksmus“, pvz., mūsų |_+_| mygtuką. krantu aukštyn. Tikroje programoje šiam valdikliui turite pateikti funkciją, kuri bus iškviesta spustelėjus mygtuką. Istorijų knygoje spustelėjus mygtuką, po drobės esančiame skirtuke „Veiksmai“ užregistruojamas įvykis. Tai apima iškviestos nuosavybės pavadinimą ir parametrus, kurie būtų perduoti atgaliniam skambučiui.
Statyba su Babeliu
Dabar rašome paprastą React komponentą, sukuriame jam istoriją ir naudojame Storybook, kad patikrintume, ar komponentas pateikia taip, kaip tikėjomės. Kitas žingsnis – sukurti komponentų biblioteką ir supakuoti ją su npm, paruoštą įtraukti į kitą programą.
Deja, jūs negalite tiesiog |_+_| neapdorotus „JavaScript“ failus. „Create React App“ neperkels JSX jūsų programos paketuose |_+_| aplanką, todėl bandydami paleisti projektą su jo komponentais gausite kūrimo klaidą. Prieš paskelbdami turite perkelti komponentų biblioteką naudodami tokį įrankį kaip „Babel“.
Pradėkite pridėdami |_+_| failą, kuris eksportuos viešąją jūsų modulio API:
|_+_|Tai leis jūsų paketo naudotojams pasiekti |_+_| modulį įvesdami:
|_+_|Tai suteikia jums laisvę ateityje keisti failų kelius nepažeidžiant bibliotekos vartotojų. Jūsų paketo viešoji API dabar apibrėžta eksportuojant |_+_|.
Tada pridėkite „Babel“ prie projekto naudodami šią komandą:
|_+_|Sukurti |_+_| failą savo projekto šaknyje su tokiu turiniu:
|_+_|Ši „Babel“ konfigūracija įgalina „React“ palaikymą naudojant naują JSX transformaciją. Tai reiškia, kad jums nereikia |_+_| kiekvieno JSX naudojančio failo viršuje.
Galiausiai prie |_+_| pridėkite šias eilutes skiltį jūsų |_+_| procedūros:
|_+_||_+_| npm automatiškai paleidžia scenarijų prieš paskelbiant paketą registre. Jis čia naudojamas komponentams kompiliuoti kiekvieną kartą, kai pristatote naują versiją.
Dabar galite paleisti |_+_| kad sukurtumėte išleisti paruoštą bibliotekos versiją. Išvesties failai bus deponuoti |_+_| katalogas. Tai gera idėja pridėti prie savo |_+_| procesus.
Dar reikia padaryti du pakeitimus. npm pirmiausia turi būti nurodyta skelbti tik failus, sukurtus jūsų |_+_| katalogas. Tai valdoma |_+_| lauke jūsų |_+_|. Antrasis nustatymas yra nuoroda į kompiliuotą jūsų |_+_| versiją kaip paketo įvesties tašką naudojant |_+_| kaimas:
|_+_|Jūs baigėte! Dabar galite |_+_| jūsų paketą ir |_+_| vienoje iš jūsų programų. Atsisiųstame pakete bus tik sukompiliuotas kodas, be JSX ir paruoštas naudoti jūsų projekte. Išbandykite tai naudodami minimalų pavyzdį naujoje CRA programoje:
|_+_|Jūsų komponentas turėtų atrodyti taip pat, kaip ir pasakojimų knyga. Bet kokie neatitikimai atsiranda dėl visuotinių stilių, kurie filtruojami iš jūsų programos CSS.
išvada
Norint sukurti „React“ komponentų biblioteką, reikia šiek tiek iš anksto padirbėti. Turite parašyti pačius komponentus, rasti būdą, kaip juos apžiūrėti kūrimo metu, o tada pateikti mechanizmą, kad vartotojai galėtų atrasti, išbandyti ir sužinoti apie turimus komponentus. Atėjus laikui paskelbti paketą, turite sukonfigūruoti transliaciją ir sukonfigūruoti npm, kad būtų aptarnaujami jūsų sukompiliuoti failai.
Storybook išsprendžia pirmąjį iš šių iššūkių suteikdama specialią sąsają, skirtą pateikti ir eksperimentuoti su komponentais. Tai lengva integruoti su „Create React“ programa, nereikia keisti tikrųjų komponentų ir puikiai sutampa su „React“ koncepcijomis.
Galite išspręsti platinimo problemas naudodami „Babel“, kad sukurtumėte perkeltus komponentų statymus prieš juos paskelbdami. npm |_+_| ir |_+_| Laukai naudingi kontroliuojant, kas supakuota, ir teikiant vartotojams patogią viešąją API. Baigę jį nustatyti, galite paskelbti paketą npm registre arba savo privačiame serveryje ir importuoti iš anksto sukurtus komponentus, kur tik jų reikia.
Ką tu manai?
