Автоматизация создания React-компонентов

Учимся создавать React-компоненты через командную строку на базе заготовленных шаблонов. Разные типы компонентов с гибкой конфигурацией.
Библиотека из видео github.com/arm...
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru...
paypal.me/mish...

[@manfred7_2023]

Бомбически полезная штука! Автоматическая генерация css модулей под компонент - это очень удобно!

[@АдилетАлдажарбеков]

Спасибо Михаил. Очень полезные вещи освещаете. Одно удовольствие смотреть ваши видео

[@romandeveloper7720]

Господи! Ты вообще супер! Спасибо, это очень нужно, я уже задолбался вручную это делать)

[@NikitaShmidt-v4f]

Спасибо, Михаил, очень крутое видео, сразу же добавил в свой проект)

[@РоманНарожнов]

Огонь! Спасибо!

[@sammylain]

На апрель 2024 имена файлов создаются в нужном кейсе при наборе команды. То есть в шаблоне файлы должны называться TemplateName, но при создании через команду npm run component template-name создаст файл в кебаб-кейсе и т.д.

[@Sylar7773]

Спасибо, каждый день жду Ваших обучающих видео 💪👍

[@myrichstory]

Использовал Folder Templates для VS Code. Но эта утилита ещё круче, вроде бы. Спасибо, Михаил!😊

[@serjdenisov2114]

Спасибо, Михаил. Буду пробовать использовать в работу.

[@bronik04]

Спасибо за интересный контент!

[@ViktorP4elkin]

Я простой человек: вижу новое видео от Михаила - ставлю лайк, потом смотрю!

[@promoabys]

После Ангулара, где есть встроенный CLI искал похожую штуку для реакта. Видел этот проект, но что-то активность использования этого проекта не поразила, поэтому не стал даже пробовать. В принципе основу файла достаточно быстро можно сделать при помощи расширений snippets в IDE или использовать близкий по коду компонент. Проекты на реакте не такие строгие по структуре, поэтому там не всегда и возникает такая необходимость в создании сразу набора файлов. В ангуляре же кроме обязательного создания наборов разных структурных файлов они ещё корректно прописывались в требуемых конфигах, что также облегчало работу. Спасибо за видосик ))

[@iwannabekoshka]

Прикольная библиотечка, спасибо автору за инфу!

[@katada]

Очень интересно!

[@AndrewFloatrx]

в WebStorm есть еще такая штука как File and Code Templates. Позволяет делать все тоже самое... но если у вас VSC или другая IDE - тула очень удобная! давно искал что-то подобное )) обязательно попробую. Спасибо

[@Евгений-х7п9с]

Ты круто объясняешь. Спасибо 🙏

[@igortrifonov9339]

Сначала ставлю лайк, затем смотрю :)

[@xoxo2880808]

Спасибо, очень полезное видео

[@Pipal96]

Очень удобно. Большое спасибо )

[@romangoncharuk4455]

отлично!

[@focus12024]

Полезно было посмотреть 🫡

[@sergeylunyaka4315]

просто щикарно!

[@snatvb]

обычно в проекте будет иерархия компонентов, потому эта CLI пока что просто прикольная игрушка

[@andrewsmal5173]

Было бы круто увидеть урок про lodash особенно с использованием реакт

[@mishanep]

Там особо нечего разбирать. Простейшая библиотека хэлперов. У меня есть плейлист по другой либе хэлперов, ramdajs, там въехать сложнее. А с лодашем надо просто спокойно брать хэлпер за хэлперов и смотреть что он делает.

[@Moishe_Rubinstein]

Безума я от автора. Скачал плейлистов парочку, которые планирую пересмотреть.

[@haibova_irisha]

добрый день Михаил . очень полезные видео , не планируете сдлеать видео для джунов TypeScript, Redux Toolkit, RTKQuery ? Спасибо Вам

[@mishanep]

Приветствую! У меня есть на канале видео на темы, о которых вы спрашиваете.

[@snowshark6206]

Folder Templates (extension) - хорошо подойдет для vs code

[@art7653]

👍

[@danil_lans]

Отличное видео, Михаил, Вы использовали раньше нативные сниппеты vs code на проектах?

[@mishanep]

Да, конечно. И сейчас активно использую.

[@web2905]

Очень классная штука, было бы ещё гибкая система, а не линейная

[@dk1840]

Палец вверх👍

[@andrewgarfeild6987]

Было бы очень круто увидеть от вас видео о регулярных выражениях!

[@SuhushinAS]

Просто создаю компонент example со всеми нужными файлами, а когда надо копирую с автозаменой. То же самое с feature, entity и чем угодно...

[@andriitkach6775]

Миша Привет! Уже доступен курс по ТС? Если нет, когда стоит ожидать?

[@ОлегНизиёв-р9ж]

есть уже

[@victormog]

Кто-то хитрожёлтый хакнул Angular? 😉 P.S. должен расстроить - по поводу регистра названий файлов и вложенных директориев вопрос висит на форуме гитхаба без ответа с 1 июля 2021 года...

[@demos.]

sass из коробки, как я понял нету, можно только через шаблоны?

[@puych0525]

Спасибо за видео, скажи что за тема у тебя установлена в vscode? похожа на Сodesandbox Black

[@mishanep]

Вроде она и есть

[@romanmed9035]

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

[@DmitriyDev]

Ты зависимость можешь удалить в конце

[@mishanep]

Это же dev зависимость, в сборку она не идет. В принципе можно вообще не устанавливать, но тогда команда длиннее будет =) Копипастить файлы - лично мне не нравится такой подход.

[@romanmed9035]

@@DmitriyDev так а в чем суть всего деяния, когда что-то установил, кучу ручной работы провел, потом это используешь? можно просто свои заготовки сделать и так же использовать. а удаление не равно тому что вообще неустанавливал. хвостики все равно остаются. явного плюса нет ведь.

[@DmitriyDev]

​@@romanmed9035 Ты можешь и с этим плагином заготовку сделать 1 раз и потом использовать во всех проектах

[@romanmed9035]

@@DmitriyDev вот так оно конечно лучше.

[@maximbuldov9437]

Может кто-нибудь знает как создавать файлы в разных папках и модифицировать другие файлы?

[@deanArtDev]

Разве не через пременную скрипта задается ? `npm run component Lodader --path="./src/components/Button/componentns/"

[@mishanep]

Можно и через переменную. Это общая практика, когда одно и то же можно сделать разными способами - либо опциями cli, либо записями в конфиге.

[@deanArtDev]

@@mishanep видимо мне стоило добавить контекста, вы говорили в конце видео о проблемма вложенно создания. Я вот об этом. 🙂

[@mishanep]

@@deanArtDev да, речь шла о том, чтобы одной командой создать компонент, у которого в одной директории будет, скажем 4 файла, плюс 1-2 поддиректории с доп файлами. Например, часто люди для тестов создают отдельную поддиректорию.

[@deanArtDev]

@@mishanep Понял, да такого в доке тоже не увидел

[@artemish]

посмотри plopjs

[@mishanep]

Выглядит многообещающе. Спасибо

[@Kurkulio_]

Глянул, Plop.js даже более гибкий чем generate-react-cli, пасиба

[@sega21rus98]

+ он лучше

[@VitaliiHalytskyi]

В jetbrains ide, есть такое с коробки в каждом их редакторе

[@danil_lans]

в vs code тоже, кстати, сниппеты называются)

[@mishanep]

Сниппеты не создают группу файлов, а наполняют один уже существующий.

[@КириллСмирнов-ь5ъ]

Как называется?

[@VitaliiHalytskyi]

@@mishanep idea все это делает, создает группу файлов

[@VitaliiHalytskyi]

@@КириллСмирнов-ь5ъ "File and Code Template"

[@romandeveloper7720]

С ESLint + prettier + typescript возникает проблема. При таком создании по шаблону в созданный экземпляр не попадают некоторые функции, типа console.log + пропадают фигурные скобки, заменяясь на круглые, по этой же причине пропадает return. Это печалька, но в комментах написали, что есть расширение для VScode, время попробовать и его)