Создание компонентов сборника рассказов для ReactJS с помощью NX и Nrwl: подробное руководство
Storybook — это мощный инструмент для изолированной разработки компонентов пользовательского интерфейса. Это позволяет разработчикам создавать компоненты независимо и интерактивно демонстрировать компоненты в изолированной среде разработки. В сочетании с ReactJS, популярной библиотекой JavaScript для создания пользовательских интерфейсов, Storybook становится еще более мощным инструментом. Но как мы можем еще больше улучшить этот процесс? Введите NX и Nrwl.
NX — это набор мощных, расширяемых инструментов разработки, которые помогут вам проектировать, тестировать и строить в любом масштабе, легко интегрируясь с современными технологиями и библиотеками, обеспечивая надежный интерфейс командной строки, кэширование, управление зависимостями и многое другое. Nrwl, компания, разработавшая NX, предоставляет набор расширений, добавляющих мощные возможности в рабочее пространство NX.
В этой статье мы проведем вас через процесс создания компонентов Storybook для ReactJS с использованием NX и Nrwl. Мы будем использовать общедоступные данные и ресурсы, чтобы гарантировать, что вы сможете следить за нами независимо от уровня вашего опыта.
Шаг 1. Настройка рабочего пространства NX
Во-первых, вам нужно настроить рабочее пространство NX. Если вы еще не установили NX, вы можете сделать это, выполнив следующую команду в своем терминале:
npx create-nx-workspace@latest
Следуйте инструкциям в терминале, чтобы настроить рабочее пространство. Когда вас попросят выбрать предустановку, выберите React.
Шаг 2: Добавление плагина Nrwl/React
После того, как ваше рабочее пространство настроено, вам нужно добавить плагин Nrwl/React. Этот подключаемый модуль предоставляет набор схем для создания приложений и библиотек React в рабочей области NX. Запустите следующую команду в своем терминале:
npm install --save-dev @nrwl/react
Шаг 3: Создание библиотеки React
Теперь давайте создадим библиотеку React, в которой мы будем создавать наши компоненты Storybook. Запустите следующую команду в своем терминале:
nx generate @nrwl/react:library mylib
Замените mylib на имя вашей библиотеки.
