От реагира приказка може да се развие и да се изработи компонентите на потребителския интерфейс извън вашите приложения в изолирана среда. Това ще се промени, докато се развие компоненти на потребителския интерфейс.

Преди да започнем

Днес, сървърни системи са станали много прости, благодарение на рамки като Meteor и облачни услуги, като например Firebase. Неща като GraphQL Falcor и донесоха системи от задния до ново ниво.

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

Просто разчита на броя на редовете, които сте написали на клиент страна на заявлението, и ще разберете какво имам предвид.

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

Добре. Ние прекарваме много време в проектирането на компоненти от потребителския интерфейс. Какво мислите за това?

е трудно

Поради горещия рестартиране (топла презареждане), ние можем много бързо проектиране и възпроизвеждане на потребителския интерфейс. Обикновено това е в нашата молба.

Но е трудно да се развива на компонентите в рамките на дадено приложение. Нека ви покажа на проблема.

Представете си, че имаме със задачи, списък компонент. Така, че има няколко държави, а ние трябва да промените потребителския интерфейс за тях. Ето списък на държави:

• Списъкът още няма елементи;
• В списъка има няколко елемента (тя не е празна);
• Няколко елемента от списъка, са завършени;
• Всички елементи на списъка са завършени;

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

Мога да се изброят много примери, свързани с този проблем. Но аз се надявам, че ме разбираш.

Да. Това е проблем, пред който сме изправени всеки ден. Какво можете да направите за него?

Запознайте реагират книга с разкази

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

След като настроите, можете да стартирате реагират книга с разкази пишете в командния ред:

Екипът ще започне на уеб сървър на порт 9001, което е, както следва:

След това, ние трябва да поставяме нашите компоненти (с различните им държави) в конзолата по-горе. Ние правим това чрез написването на поредица от stroies.

Story един трябва да върне реагират елемент. По този начин можете да си взаимодействат с него реагират книга с разкази.

В следния код сме написали няколко истории за нашия списък със задачи компонент, с различни условия.

(Където нашия списък със задачи компонент, по-нататък "MainSection")

След това можете да си взаимодействат с тях в рамките на React книга с разкази:

Ето защо, други хора от вашия екип може да ви даде своето мнение за компоненти на потребителския интерфейс.

Можете да видите този пример на локалния ви компютър, просто клонинг това хранилище. Тя няма да ви отнеме повече от 2 минути.

Уау. Хладно е. Но аз не съм чувал за други подобни инструменти, като UI Harness и Atellier.

Реагират книга с разкази готов

Реагират Stroybook е вдъхновен UI Harness и ние благодарим на Фил Cockfield неговата невероятна концепция.

Ние сме разработили реагират книга с разкази от самото начало за работа с всяко приложение, реагират, дали Redux, Relay или метеор. Реагират книга с разкази - е, че можете да използвате с вашата кандидатура веднага. Той има много функции, включително:

• Напълно изолирана среда за вашите компоненти (с помощта на различни тактики за вградени рамки);
• HMR - замяна модули (дори без функционалните компоненти на състояния);
• Реагират работа с всяко приложение (независимо дали Redux, Relay, Метеор или някоя реагират приложение);
• Подкрепа за CSS (независимо дали това е добрата стара CSS, CSS модули, или нещо необичайно);
• Чисто и бързо потребителски интерфейс;
• Тя работи в приложението Ви (така го използва НРП модули на вашата кандидатура и Бабел конфигурация с изваждането от кутията);
• Служи статични файлове (ако ги поставите в приложението Ви);
• Extensible, както се изисква (подкрепа за потребителски WebPACK програми за изтегляне и плъгини);

Cool. Как да започнете?

Просто посетете реагират книга с разкази хранилище и ще намерите инструкции, за да започнете. Той разполага с цялата информация, която имате нужда в хранилището.