Автоматизация создания React-компонентов
HTML-код
- Опубликовано: 28 сен 2024
- Учимся создавать React-компоненты через командную строку на базе заготовленных шаблонов. Разные типы компонентов с гибкой конфигурацией.
Библиотека из видео github.com/arm...
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru...
paypal.me/mish...
![[Limbus Company - Teaser] Season5 - Oblivion](http://i.ytimg.com/vi/8anKuEeZLeI/mqdefault.jpg)
![Cody Johnson - I'm Gonna Love You (with Carrie Underwood) [Official Music Video]](http://i.ytimg.com/vi/yy9PuYMU29g/mqdefault.jpg)
Спасибо, каждый день жду Ваших обучающих видео 💪👍
После Ангулара, где есть встроенный CLI искал похожую штуку для реакта.
Видел этот проект, но что-то активность использования этого проекта не поразила,
поэтому не стал даже пробовать.
В принципе основу файла достаточно быстро можно сделать
при помощи расширений snippets в IDE или использовать близкий по коду компонент.
Проекты на реакте не такие строгие по структуре,
поэтому там не всегда и возникает такая необходимость
в создании сразу набора файлов.
В ангуляре же кроме обязательного создания наборов разных структурных файлов
они ещё корректно прописывались в требуемых конфигах, что также облегчало работу.
Спасибо за видосик ))
Спасибо, Михаил.
Буду пробовать использовать в работу.
Спасибо за интересный контент!
Было бы круто увидеть урок про lodash особенно с использованием реакт
Там особо нечего разбирать. Простейшая библиотека хэлперов. У меня есть плейлист по другой либе хэлперов, ramdajs, там въехать сложнее. А с лодашем надо просто спокойно брать хэлпер за хэлперов и смотреть что он делает.
Очень удобно. Большое спасибо )
просто щикарно!
Бомбически полезная штука! Автоматическая генерация css модулей под компонент - это очень удобно!
Спасибо, очень полезное видео
Безума я от автора. Скачал плейлистов парочку, которые планирую пересмотреть.
добрый день Михаил . очень полезные видео , не планируете сдлеать видео для джунов TypeScript, Redux Toolkit, RTKQuery ? Спасибо Вам
Приветствую!
У меня есть на канале видео на темы, о которых вы спрашиваете.
Folder Templates (extension) - хорошо подойдет для vs code
Кто-то хитрожёлтый хакнул Angular? 😉
P.S. должен расстроить - по поводу регистра названий файлов и вложенных директориев вопрос висит на форуме гитхаба без ответа с 1 июля 2021 года...
Просто создаю компонент example со всеми нужными файлами, а когда надо копирую с автозаменой. То же самое с feature, entity и чем угодно...
sass из коробки, как я понял нету, можно только через шаблоны?
Отличное видео, Михаил, Вы использовали раньше нативные сниппеты vs code на проектах?
Да, конечно. И сейчас активно использую.
Было бы очень круто увидеть от вас видео о регулярных выражениях!
Может кто-нибудь знает как создавать файлы в разных папках и модифицировать другие файлы?
Палец вверх👍
👍
В jetbrains ide, есть такое с коробки в каждом их редакторе
в vs code тоже, кстати, сниппеты называются)
Сниппеты не создают группу файлов, а наполняют один уже существующий.
Как называется?
@@mishanep idea все это делает, создает группу файлов
@@КириллСмирнов-ь5ъ "File and Code Template"
посмотри plopjs
Выглядит многообещающе. Спасибо
Глянул, Plop.js даже более гибкий чем generate-react-cli, пасиба
+ он лучше
))) вы плохому не учите)) завтра если работодатель узнает, как часы пушить потом )
Господи! Ты вообще супер! Спасибо, это очень нужно, я уже задолбался вручную это делать)
На апрель 2024 имена файлов создаются в нужном кейсе при наборе команды. То есть в шаблоне файлы должны называться TemplateName, но при создании через команду npm run component template-name создаст файл в кебаб-кейсе и т.д.
Использовал Folder Templates для VS Code. Но эта утилита ещё круче, вроде бы. Спасибо, Михаил!😊
в WebStorm есть еще такая штука как File and Code Templates. Позволяет делать все тоже самое... но если у вас VSC или другая IDE - тула очень удобная! давно искал что-то подобное )) обязательно попробую. Спасибо
Спасибо Михаил. Очень полезные вещи освещаете. Одно удовольствие смотреть ваши видео
Очень интересно!
Спасибо, Михаил, очень крутое видео, сразу же добавил в свой проект)
обычно в проекте будет иерархия компонентов, потому эта CLI пока что просто прикольная игрушка
Я простой человек: вижу новое видео от Михаила - ставлю лайк, потом смотрю!
Очень классная штука, было бы ещё гибкая система, а не линейная
Прикольная библиотечка, спасибо автору за инфу!
Сначала ставлю лайк, затем смотрю :)
Полезно было посмотреть 🫡
Ты круто объясняешь. Спасибо 🙏
Огонь! Спасибо!
отлично!
Спасибо за видео, скажи что за тема у тебя установлена в vscode? похожа на Сodesandbox Black
Вроде она и есть
Миша Привет!
Уже доступен курс по ТС?
Если нет, когда стоит ожидать?
есть уже
Разве не через пременную скрипта задается ? `npm run component Lodader --path="./src/components/Button/componentns/"
Можно и через переменную. Это общая практика, когда одно и то же можно сделать разными способами - либо опциями cli, либо записями в конфиге.
@@mishanep видимо мне стоило добавить контекста, вы говорили в конце видео о проблемма вложенно создания. Я вот об этом. 🙂
@@deanArtDev да, речь шла о том, чтобы одной командой создать компонент, у которого в одной директории будет, скажем 4 файла, плюс 1-2 поддиректории с доп файлами. Например, часто люди для тестов создают отдельную поддиректорию.
@@mishanep Понял, да такого в доке тоже не увидел
несомненно видео познавательное, но не проще ли в IDE это сделать или в крайнм случае просто сложить и положить в архив кучку файлв, которую развернуть в нужном месте? зато нет еще одной зависимости. тем более что все равно все вручную приходится заранее делать. так же сделать заготовочки которые потом использовать, только переименовать, что в системе автоматически делается.
Ты зависимость можешь удалить в конце
Это же dev зависимость, в сборку она не идет. В принципе можно вообще не устанавливать, но тогда команда длиннее будет =)
Копипастить файлы - лично мне не нравится такой подход.
@@DmitriyDev так а в чем суть всего деяния, когда что-то установил, кучу ручной работы провел, потом это используешь? можно просто свои заготовки сделать и так же использовать. а удаление не равно тому что вообще неустанавливал. хвостики все равно остаются. явного плюса нет ведь.
@@romanmed9035 Ты можешь и с этим плагином заготовку сделать 1 раз и потом использовать во всех проектах
@@DmitriyDev вот так оно конечно лучше.
С ESLint + prettier + typescript возникает проблема. При таком создании по шаблону в созданный экземпляр не попадают некоторые функции, типа console.log + пропадают фигурные скобки, заменяясь на круглые, по этой же причине пропадает return. Это печалька, но в комментах написали, что есть расширение для VScode, время попробовать и его)