При переходе от Angular и Ember одной из первой вещи, которую мне не хватало в React, был генератор кода для быстрой настройки новых компонентов.

Angular и Ember предлагают такие готовые инструменты (например, Angular CLI). Вы просто запускаете команду, которая генерирует все файлы, необходимые для начала разработки нового компонента (файлы для контроллера, разметки, тестов и стилей).

В этом руководстве мы собираемся создать похожий скрипт для использования с компонентами React 🚀 (и компонентами любой другой библиотеки/фреймворка). Вы создадите свои собственные файлы схемы компонентов. Эта схема позже будет использоваться в качестве основы для создания новых компонентов React.

1. Создайте свой компонент Blueprint

Прежде чем мы начнем работать над сценарием генератора, нам сначала нужно подготовить базовую папку компонента со всеми файлами, которые мы обычно хотим видеть в обычном компоненте.

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

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

Base.tsx (компонент)

Сердце наших файлов чертежей: сам компонент.

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

В моем случае я хочу, чтобы моя команда использовала тип Typescript type, а не interface для определения свойств компонента.

💡 Это всего лишь простой пример. Я уверен, что у вас уже есть некоторые рекомендации и правила. Просто включите их в свой компонент проекта. В будущем он будет направлять вас и ваших товарищей по команде при создании новых компонентов.

Base.test.tsx (тест)

Здесь я определил фиктивный тест. Позже каждый разработчик должен привнести в него какой-то смысл, когда он/она добавил какую-то функциональность в связанный компонент.

Base.module.scss (стили)

Файл модуля (S)CSS определяет класс корневого компонента basis. Позже наш скрипт заменит эту строку именем компонента kebab-case.

Я также хотел, чтобы каждый разработчик мог сразу использовать глобальные переменные и утилиты. Вот почему я импортировал их сюда. Не стесняйтесь адаптировать его под свои нужды! Вы можете использовать только модули CSS или поместить любые элементы, связанные со стилем (styled-components и т. д.), в основную базу. тсх.

2. Настройте сценарий генерации компонентов

Как только мы настроим план нашего компонента со всеми необходимыми файлами, мы, наконец, сможем приступить к скрипту генерации кода!🚀

Поскольку вам интересна эта статья, я предполагаю, что у вас уже есть некоторый опыт работы с JS и экосистемой Node. Поэтому я не буду вдаваться здесь в подробности.

index.js (скрипт генератора)

Короче сценарий…

  1. извлекает путь и имя нового компонента из пользовательского ввода
  2. читает наши подготовленные файлы чертежей
  3. заменяет все вхождения «базы» в файлах чертежей (только в памяти)
  4. сохраняет файлы нового компонента с правильным именем в нужном месте

Конечно, вы также можете использовать несколько заполнителей, например «база». Поступая таким образом, вы можете ориентироваться на разные области файлов компонентов, как я, например, сделал с «путем» в Base.module.scss.

Добавьте скрипт в ваш package.json

После настройки скрипта и адаптации его к вашим потребностям вы должны добавить новый блок скрипта в свой package.json:

"scripts": {
   "g": "node tools/create-component/index.js"
},

Попробуй!

yarn g components/input/text-area

or

npm run g components/input/text-area

Поздравляем! 🎉 Вы только что создали свой первый компонент с помощью собственного генератора компонентов React!