Автор оригинала: Manindu Wijewickrama.
(Первоначально опубликовано на dev.to )
В этом руководстве я собираюсь показать вам простой способ настроить свой реагировать проект для создания компонентов из командной строки.
Давайте начнем, создав новый проект React Project, используя Create-React-App Отказ
Выполните следующую команду в вашем терминале. Это создаст новый проект по именованным компонентам.
manindu@dev:~$ create-react-app components-demo
Далее мы должны установить Создание-реагирование-компонент-папка (Создан Snær Seljan þóroddsson – Github ) Пакет NPM в качестве зависимости в нашем проекте. Как подразумевает имя, это пакет, который позволяет нам создавать компоненты с помощью командной строки.
manindu@dev:~$ npm i --save-dev create-react-component-folder
Теперь пришло время создавать некоторые компоненты !! Я хотел бы создать каталог с именем Компоненты и создайте мои компоненты внутри этого. Мы можем сделать это, выполняя команду ниже.
manindu@dev:~$ npx crcf components/Button Input
Я только что создал два компонента по имени Кнопка и Вход Отказ
Button |_Button.css |_Button.js |_Button.test.js |_index.js
Button |_Input.css |_Input.js |_Input.test.js |_index.js
Теперь у нас есть два компонента с файлами .css для каждого из них. Однако я предпочитаю использовать SASS с модулями CSS для нашего проекта. Мы можем сделать это, добавив конфигурацию Fie Создание-реагированная компонента-папка
В корне проекта создайте файл с именем .CRCFRC и добавьте код ниже.
Удалить Кнопка и Вход Компоненты, которые мы создали ранее и запустите ту же команду, что и ниже.
manindu@dev:~$ npx crcf components/Button Input
На этот раз вы получите те же компоненты с файлами .Module.scss, что означает, что теперь вы можете использовать SASS с модулями CSS для стилизации (вам необходимо установить Sass Sass для использования Sass)
Button |_Button.js |_Button.module.scss |_Button.test.js |_index.js
Button |_Input.js |_Input.module.scss |_Input.test.js |_index.js
Вы можете прочитать больше о Создание-реагирование-компонент-папка на их Документация Отказ
Счастливое кодирование !!!