Введение в React Storybook

Перевод
Автор оригинала Arunoda Susiripala
Оригинал Introducing React Storybook
Введение в React Storybook

С React StoryBook вы можете разрабатывать и проектировать UI компоненты за пределами вашего приложения, в изолированной среде. Она будет изменяться по мере того как вы разрабатываете UI компоненты.

Прежде чем мы начнём

В наши дни, серверные системы стали очень простыми благодаря фреймворкам таким как Meteor и облачным сервисам таким как Firebase. Такие вещи как GraphQL и Falcor вывели серверные системы на новый уровень.

В связи с этим, мы тратим довольно много времени при разработке приложения на стороне клиента, вместо того чтобы работать над серверной частью. React изменил способ создания пользовательских интерфейсов, но нам всё ещё нужно упорно трудиться над созданием больших интерфейсов. Для этого мы пишем много кода на стороне клиента.

Просто посчитайте кол-во строк, которое вы написали в клиентской части приложения и вы поймёте о чём я говорю.

Даже в client-side приложении большая часть времени сосредоточена на разработке нескольких UI компонентов и они, как правило, не имеют ничего общего с остальной частью приложения. Даже когда вы реализуете новые возможности, много времени тратиться на разработку UI компонентов.

Хорошо. Мы тратим много времени на разработку UI компонентов. Что вы думаете по этому поводу?

Это трудно

Благодаря горячей перезагрузке (hot reloading) мы можем очень быстро проектировать и воспроизводить UI. Обычно он есть в нашем приложении.

Но сложно разрабатывать компоненты внутри приложения. Позвольте мне, показать вам проблему.

Представьте, что у нас есть компонент todo-списка. Итак, у него есть несколько состояний и нам нужно изменять UI для них. Вот список состояний:

  • В списке нет элементов;
  • У списка есть несколько элементов (он не пустой);
  • Несколько элементов в списке завершены;
  • Все элементы списка завершены;

Даже если мы найдём способ пересоздать состояния внутри приложения, нам нужно как-то их задокументировать. Иначе, новый разработчик или дизайнер не сможет работать с этими UI компонентами.

Я могу перечислить много примеров, связанных с этой проблемой. Но надеюсь, что вы меня поняли.

Да. Это проблема с которой мы сталкиваемся каждый день. Что можно с этим сделать?

Знакомьтесь с React Storybook

Мы пытаемся исправить большую часть из вышеперечисленных проблем с помощью React Storybook. С помощью него, вы можете разрабатывать UI компоненты за пределами вашего приложения и позволить другим людям в вашей команде работать с ними.

После настройки, вы можете запустить React Storybook напечатав в командной строке следующее:

npm run storybook

Команда запустит веб-сервер на порту 9001, который выглядит следующим образом:

1-neqv393jtag4ohmdverfhq

После этого, нам нужно положить наши компоненты (с их различными состояниями) в консоль выше. Мы делаем этого написав ряд stroies.

Одна Story должна возвращать React элемент. Таким образом вы взаимодействуете с ним из React Storybook.

В следующем коде мы написали несколько stories для нашего компонента todo списка, с различными состояниями.

(Здесь наш компонент todo списка, назван как "MainSection")

import React from 'react';
import MainSection from '../MainSection';
import { storiesOf, action } from '@kadira/storybook';

storiesOf('MainSection', module)
  .add('all active', () => {
    const todoItems = [
      { id: 'one', text: 'Item One', completed: false },
      { id: 'two', text: 'Item Two', completed: false },
    ];

    return getMainSection(todoItems);
  })
  .add('some completed', () => {
    const todoItems = [
      { id: 'one', text: 'Item One', completed: false },
      { id: 'two', text: 'Item Two', completed: true },
    ];

    return getMainSection(todoItems);
  })
  .add('all completed', () => {
    const todoItems = [
      { id: 'one', text: 'Item One', completed: true },
      { id: 'two', text: 'Item Two', completed: true },
    ];

    return getMainSection(todoItems);
  });

function getMainSection(todos) {
  const actions = {
    clearCompleted: action('clearCompleted'),
    completeAll: action('completeAll')
  };

  return (
    <div className="todoapp">
      <MainSection todos={todos} actions={actions} />
    </div>
  );
}

Затем вы можете взаимодействовать с ними внутри React Storybook:

1-vfynsj1zvmvxd5m9j8wiug

Таким образом, другие люди из вашей команды могут дать вам обратную связь по вашим UI компонентам.

Вы можете посмотреть этот пример на своём локальном компьютере, просто клонировав этот репозиторий. Это не займёт у вас больше 2 минут.

Ничего себе. Это круто. Но, я слышал о других подобных инструментах, таких как UI Harness и Atellier.

React Storybook наготове

React Stroybook был вдохновлён UI Harness и мы благодарим Phil Cockfield за его удивительную концепцию.

Мы разработали React Storybook с нуля, чтобы работать с любым React приложением, будь то Redux, Relay или Meteor. React StoryBook - это то, что вы можете использовать со своим приложением сразу. У него много особенностей, включая:

  • Полностью изолированная среда для ваших компонентов (с использованием различных iframe тактик);
  • HMR - горячая замена модулей (даже для функциональных компонентов без состояний);
  • Работа с любыми React приложениями (будь то Redux, Relay, Meteor или любое React приложение);
  • Поддержка CSS (будь то старый добрый CSS, CSS модули или что-то необычное);
  • Чистый и быстрый пользовательский интерфейс;
  • Работает внутри вашего приложения (так он использует NPM модули вашего приложения и babel конфигурацию из коробки);
  • Обслуживает статичные файлы (если размещать их внутри вашего приложения);
  • Расширяемый при необходимости (поддержка пользовательских Webpack загрузчиков и плагинов);

Круто. Как начать пользоваться?

Просто посетите репозиторий React Storybook и вы найдёте инструкции для начала работы. В репозитории есть вся информация, которая вам нужна.

Комментарии

К сожалению, комментариев пока нет
Для того чтобы оставлять комментарии, вам необходимо авторизоваться. Вход