Hekayə kitabından istifadə edərək reaktiv inkişaf meydançası necə qurulur

Joshua Aragon-un Unsplash-dakı şəkli

Son vaxtlar React komponentlərimdə yeni şeylər sınamaq və yeni texnologiya və ya nümunələri sınamaq istəyirdim. Hər dəfə yeni bir tətbiq başlatmadan bunları sınaqdan keçirə biləcəyim bir yerə ehtiyacım vardı.

Bu yaxınlarda gələcək layihələr üçün yeni bir dizayn sistemi qurmaq üçün iş yerində React Storybook istifadə etməyə başladım. Bundan əlavə, komandamızın üzərində işlədiyi yeni bir məzmun yazma vasitəsinin bir neçə versiyasını prototipləşdirmək üçün istifadə etdim. Bu aləti komponentlər yaratmaq və yeni şeylərlə oynamaq istəyimlə birləşdirmək mükəmməl görünürdü. Bu yeni "şeylər" in bəzi nümunələri "React Context", "SlateJs" və "React Hooks" dır.

Bu portfel kimi də istifadə edilə bilər və işinizi nümayiş etdirmək üçün əla bir yol ola bilər. Storybook bağımsız bir tətbiq olaraq yerləşdirilə bildiyindən, potensial işəgötürənlər və ya müştərilərə göstərə biləcəyiniz müxtəlif layihələr və komponentlərlə bir veb səhifə yerləşdirə bilərsiniz. Bir dəfə yerləşdirildikdən sonra, hekayə kitabınıza bir link göndərmək çox asandır.

Bu yazı React mühiti üçün hekayə kitabının yaradılmasına yönəldilib və gələcəkdə orada yaratdığım şeylər haqqında yazmağı hədəfləyəcəyəm!

Sooo ... hekayə kitabı nədir?

Özüm daha yaxşı qoya bilmədiyim üçün birbaşa Storybook veb saytından götürülmüşəm:

“Storybook istifadəçi interfeysləri üçün inkişaf mühiti və UI komponentləri üçün oyun meydançasıdır. Alət, inkişaf etdiricilərə müstəqil olaraq komponentlər yaratmağa və təcrid olunmuş inkişaf mühitində interaktiv şəkildə təqdim etməyə imkan verir.
Storybook əsas tətbiqetmənin xaricində işləyir, beləliklə istifadəçilər tətbiqetmə üçün xüsusi asılılıq və tələblər barədə narahat olmayaraq UI komponentlərini ayrı-ayrılıqda inkişaf etdirə bilərlər. "

Bu o deməkdir ki ... React tətbiqinin işləməsindən asılı olmayaraq komponentlər yarada və görüntüləyə / onlarla əlaqə qura bilərəm! Və bu layihə tək bir tətbiqin performansına və ya quruluğuna diqqət yetirmədiyi üçün, çoxsaylı prototiplərə və komponentlərin versiyalarına sahib ola bilərəm, belə ki, onları nəzərdə tutduqları tətbiqə daxil etməzdən əvvəl onları mükəmməlləşdirə, maraqlı tərəfləri təsdiqləyə və s. Üçün. Komponentləri necə hazırlayacağımı və daha əvvəl qeyd etdiyim yeni texnologiyanı necə tətbiq edəcəyimi öyrənmək üçün də istifadə edə bilərəm.

İndi quraq!

Əsas cavab tətbiqi yaradın

npx oyun meydançam yaradın-reaksiya verin

Mövzu işə salmaqla tətbiqinizin uğurla qurulduğundan əmin ola bilərsiniz. Localhost: 3000 üçün brauzerinizdə yuxarıdakı kimi yeni bir pəncərə görünməlidir. Təsdiqləndikdən sonra ⌘ + C düymələrini basaraq dayandırmaq olar.

Nağıl kitabı əlavə edin

Əvvəlcə layihənizin əmr sətrinə aşağıdakı əmrdən istifadə edərək hekayə kitabını əlavə etməlisiniz.

npx -p @ hekayə kitabı / cli sb init

Daha sonra istifadə edərək hekayə kitabını işə sala bilərsiniz:

İplik hekayə kitabı

İndi brauzerinizdə aşağıdakı kimi bir ekranı görməyə hazır olmalısınız:

Şəkil kitabının brauzer görünüşü

Layihə qovluğuna baxsanız, bəzi sənədlərin əlavə olunduğunu, digərlərinin isə yeniləndiyini görəcəksiniz:

./Storybook qovluğunda hekayə kitabınız üçün bir çox parametr quracaqsınız. Daha çox funksionallıq əlavə etmək üçün layihənizə müraciət edə biləcəyiniz hər cür əlavə var. Config.js sənədində ümumiyyətlə əlavələr tətbiq edəcək və hekayə kitabına hekayələrinizi harada tapacağınızı izah edəcəksiniz. Konfiqurasiya default olaraq aşağıdakı kimidir:

{configure} '@ hekayə kitabından idxal / reaksiya';
Funksiya loadStories () {tələb ('../ src / stories'); }
konfiqurasiya (loadStories, modul);

Bu, Storybook'a yazdığınız hekayələr üçün ../src/stories qovluğuna baxmağı tövsiyə edir. Hələlik hekayə kitabı sizin üçün bəzi standart hekayələr əlavə etdi. Hekayələrin necə yazılacağına dair bir fikir əldə etmək üçün bunlara nəzər yetirə bilərsiniz. Komponentlərinizi yalnız öz funksiyaları daxilində göstərəcəksiniz və istədiyiniz hər şeyi paylaya bilərsiniz.

Aşağıdakı nümunədə gördüyünüz kimi, sadəcə fərqli rekvizitlər göstərməklə eyni komponentin birdən çox versiyasını yarada bilərsiniz.

Ancaq təsəvvür etdiyiniz kimi, daha çox komponent yaratdıqdan sonra bu fayl çox böyüyəcək və src qovluğunuzdakı hər hansı bir dosyaya ad verməklə, konfiqurasiyanızda göstərmək istədiyiniz hekayələr ilə hər dosyanı yazmaq məcburiyyətində qalmayacaqsınız. stories.js və sonunda hekayə kitabına stories.js olan bütün faylları dinamik olaraq tapmasına icazə verin. SRC qovluğunuzda konfiqurasiya sənədinizə aşağıdakıları əlavə edəcəksiniz:

"@ Hekayə kitabından / reaksiya" dan {configure} idxal edin
Funksiya loadStories () {const req = need.context ('../ src', true, /\.stories\.js$/) req.keys (). forEach (fayl adı => req (fayl adı))}
konfiqurasiya (loadStories, modullar)

Bu, daha aydın bir fayl quruluşunu təmin edir və hekayələrinizi proyektə və ya hətta src qovluğunuzdakı komponentə görə təşkil edə bilərsiniz.

Mini layihələrinizi yaradın

Nümunə olaraq React-in kontekstində API öyrənməyə başlamaq üçün sürətli bir nümunə layihəsi yarada biləcəyinizi göstərmək üçün kiçik bir komponent yarataq. Src qovluğumda bir komponenti təyin etdiyim bir faylı əlavə etdiyim bir ContextProject qovluğu yaradıram, sonra hekayəni təyin etdiyim başqa bir qovluq:

İndi hekayə kitabımı yoxladıqda, kontekstim API layihəsi üçün bir menyu seçimim olduğunu gördüm. Aşağıda yaratdığım ev komponentini görmək üçün tıklaya bilərəm:

İndi kontekstimi və digər komponentləri bu qovluğa src-də qurmağa başlaya bilərəm. Yaratdığım komponentləri oynaya və göstərə bilərəm ki, dəyişikliklərimi tez görə biləcəm və yalnız müəyyən bir xüsusiyyəti və ya fikri sınamaq istədiyim hər dəfə yeni bir Reakt tətbiqetməsinə başlamaq məcburiyyətində qalmayım.

Bu da yeni bir fikri tez bir zamanda prototipləşdirməyə çalışarkən böyük bir elastiklik təmin edir. Artıq bir iş mühitiniz var və sevdiyiniz kitabxanaları (məsələn, dizayn edilmiş komponentlər) qura və ya yeni layihələrə asanlıqla idxal edilə bilən əvvəlcədən təyin edilmiş dizaynlardan istifadə edə bilərsiniz. İnkişafı sürətləndirmək üçün layihələr arasında paylaşa biləcəyiniz formatlanmış başlıqlar, divs, düymələr və s. Kimi bəzi əsas komponentləri əvvəlcədən təyin edə bilərsiniz.

Ümid edirəm bu kömək edəcək və ən sevdiyim eklentilər haqqında gələcək yazıları və hekayə kitabımda qurduğum test layihələri barədə təfərrüatlarıma baxın.

Kodlamada əylənin!

İstinadlar:

Mənim Github repom: