DEV Community

Cover image for Create A File Structure For React Components Using Xargs Command
Honza
Honza

Posted on

Create A File Structure For React Components Using Xargs Command

When I need to quickly knock up a bunch of React components, I like to use my command line. This is how I create a directory structure, where each element has its own folder. Let's say I want something like this:

my-web-app/src
├── App
│   └── App.jsx
├── CtaButton
│   └── CtaButton.jsx
├── CurrencyBar
│   └── CurrencyBar.jsx
├── Discount
│   └── Discount.jsx
├── DomainForm
│   └── DomainForm.jsx
├── DomainInput
│   └── DomainInput.jsx
├── Header
│   └── Header.jsx
├── RadioButton
│   └── RadioButton.jsx
└── Results
    └── Results.jsx
Enter fullscreen mode Exit fullscreen mode

I'd go to the src folder:

cd my-web-app/src
Enter fullscreen mode Exit fullscreen mode

Create all folders:

md App CtaButton CurrencyBar Discount DomainForm DomainInput Header RadioButton Results
Enter fullscreen mode Exit fullscreen mode

And then run the following command to create all the JSX files within their folders, keeping the same name as the folders.

find . -type d | xargs -I{} basename {} | xargs -I_ touch _/_.jsx
Enter fullscreen mode Exit fullscreen mode

Cover image: Variegated Aerialist, Emma Plunkett Art © 2019

Top comments (0)