Bevezetés a reakció történetkönyvébe
A React StoryBook segítségével az alkalmazáson kívül tervezheti és tervezheti az UI összetevőket egy elszigetelt környezetben. Az UI összetevők fejlesztésénél fog változni.
Mielőtt elkezdenénk
Napjainkban a szerverrendszerek nagyon egyszerűvé váltak olyan kereteknek köszönhetően, mint a Meteor és a felhőszolgáltatások, mint például a Firebase. Az olyan dolgok, mint a GraphQL és a Falcor, új szintre emelték a kiszolgálórendszert.
Ebben a tekintetben elég sok időt töltünk az alkalmazás fejlesztésében az ügyfél oldalon, ahelyett, hogy a szerver részen dolgoznánk. A React megváltoztatta a felhasználói felületek létrehozásának módját, de még mindig keményen kell dolgoznunk a nagy felületek létrehozása érdekében. Ehhez sok kódot írunk az ügyfél oldalán.
Csak számold meg az alkalmazás kliens részében írt sorokat, és meg fogod érteni, hogy miről beszélek.
Még a kliens oldali alkalmazásban is, a legtöbb idő több UI összetevő fejlesztésére összpontosít, és általában nincs semmi köze az alkalmazás többi részéhez. Még akkor is, ha új szolgáltatásokat hajt végre, sok időt fordítanak a felhasználói felületek fejlesztésére.
Rendben van. Sok időt töltünk az UI komponensek fejlesztésében. Mit gondolsz erről?
Kemény
A forró újratöltésnek köszönhetően nagyon gyorsan tervezhetjük és reprodukálhatjuk az UI-t. Általában ez az alkalmazásunk.
De nehéz az összetevők fejlesztését az alkalmazáson belül. Hadd mutassam meg a problémát.
Képzeld el, hogy van egy todo lista összetevője. Tehát több állammal rendelkezünk és megváltoztatnunk kell az UI-t. Itt az államok listája:
- Nincsenek elemek a listában;
- A lista több elemet tartalmaz (ez nem üres);
- A lista több eleme elkészült;
- A lista összes eleme teljes;
Még akkor is, ha megtaláljuk az utat az alkalmazásban rejlő állapot létrehozásához, valamilyen módon dokumentálni kell őket. Ellenkező esetben egy új fejlesztő vagy tervező nem lesz képes együttműködni ezen felhasználói felület összetevőivel.
Számos példát sorolhatok fel ehhez a problémához. De remélem, hogy megértett engem.
Igen. Ez egy olyan probléma, amellyel nap mint nap szembesülünk. Mit tehetünk erről?
Ismerje meg a React Storybook-ot
A fenti problémák nagy részét a React Storybook segítségével próbáljuk megoldani. Ezzel fejlesztheti a felhasználói felületen található összetevőket az alkalmazásán kívül, és lehetővé teheti a többi ember számára, hogy együttműködjön velük.
A konfigurálás után a React Storybook programot a parancssorba írja be:
A parancs elindítja a webszervert a 9001-es porton, amely így néz ki:
Ezután fel kell tennünk komponenseinket (a különböző állammal) a fenti konzolban. Ezt úgy csináljuk, hogy sorozatot írunk.
Az egyik történetnek vissza kell adnia egy React elemet. Tehát a React Storybook-ban kölcsönhatásba lépsz.
A következő kódban néhány történetet írtunk a todo listás komponensünkhöz, különböző államokkal.
(Itt a listánk todo komponense neve "MainSection")
Ezután kölcsönhatásba léphet velük a React Storybookban:
Így a csapata más személyei visszajelzést adhatnak az Ön felhasználói felületéről.
Ezt a példát láthatja a helyi számítógépen, egyszerűen klónozva ezzel az adattárat. Nem fog több mint 2 percig tartani.
Wow. Hűvös. De hallottam más hasonló eszközökről is, mint például az UI Harness és az Atellier.
React Storybook kész
A React Stroybookot az UI Harness ihlette, és köszönjük Phil Cockfield-nek a csodálatos koncepcióját.
A React Storybook-ot a semmiből kiindulva dolgozunk bármely React alkalmazással, legyen az Redux, Relay vagy Meteor. A React StoryBook valami, amit azonnal alkalmazhat az alkalmazásával. Sok funkciója van, többek között:
- Teljesen elszigetelt környezet az összetevők számára (különböző iframe taktikával);
- HMR - hot swappable modulok (még funkcionális komponensek nélkül is);
- Munka bármely React alkalmazással (akár Redux, Relay, Meteor vagy bármilyen React alkalmazás);
- CSS támogatás (legyen az jó régi CSS, CSS modul vagy valami szokatlan);
- Tiszta és gyors felhasználói felület;
- Működik az alkalmazáson belül (ezért alkalmazza az alkalmazás NPM moduljait és a babel konfigurációt a dobozból);
- Statikus fájlokat használ (ha az alkalmazásodban van elhelyezve);
- Szükség esetén bővíthető (egyedi Webpack rakodók és plug-inek támogatása);
Cool. Hogyan kezdjünk el használni?
Csak látogasson el a react React Storybookba, és megtalálja az utasításokat az induláshoz. A tároló rendelkezésére áll minden szükséges információ.