Creating Multiple React or React Native Components in One Command

As software developers we always try to find shortcuts to speed up our workflow and productivity. When working on big or small projects I find that structuring and organizing your files and folders is really important. In React.js this is no exception. My typical React component structure is like this:

Typical component structure

Coming in to a big project or starting a new one, I always found myself creating the same component folder structure over and over again. So I created a NPM package which does this in one command 🎉. It is called create-react-component-folder.

Let’s dive in and see how it works! First you need to install the module from NPM. Then fire up your favorite terminal and type.

$ npm install --save-dev create-react-component-folder

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

Now let´s create one component and make it in a folder called /components. Type the following in your projects root directory:

$ npx crcf components/myComponent

Pretty easy right! The module creates the /components folder for you and of course the React component.

Next we will create multiple components at once. Type the following:

$ npx crcf components/header footer button navigation

This will create four new components inside the components folder. It will also create the components folder if it doesn’t exist. Here is the output:

Nice! This will hopefully speed up your React development. But this is not all the NPM module can do. I created some options which can be seen in the image below:

The module has multiple options. It has for example support for Typescript, React Native, SASS, LESS, JSX and stateless functional components. You can also skip the test or CSS files or have your component files start with a uppercase letter by default. Let’s try out some of these options. Type the following in your terminal:

$ npx crcf -p -s -u --typescript components/button navigation

This command creates two Typescript components which both have .sass files instead of CSS files. They both start with an uppercase letter and have prop-types included in the react component. Let´s see the output of the command.

Now let’s take a look inside of all the components. I will show you the contents of /myComponent files. The CSS, SASS and less files will always be created empty.

index.js
myComponent.js
myComponent.test.js

All the components run through the awesome Prettier formatter so you will have all your components nicely formatted.

Update 19.04.2018

I have added support for both .jsx extension and also to create the component as React stateless functional component. Please use the help command for further instructions.

$ npx crcf --help

Update 20.03.2018

Recently there have been small add-ons from the community. Now there is one more option which is called — createindex. When using createindex options, create-react-components-folder will create index.js file in the root of your desired /components folder. With the index.js created you will now be able to import multiple components in one import statement. Lets see try it out on our components folder

$ npx crcf --createindex src/components

So when I want to import these components I can do the following in one line of code instead of multiple import statements.

The next time you start a new project please consider making your development easier by using create-react-component-folder. It just makes your workflow much quicker!

Thank you for Reading!

Create-react-component-folder has been a huge win for my productivity and workflow. I hope you and your team will find it beneficial as well in your development.

You can find me on Github and if you enjoyed this I would love a star on the module 🌟. You can star me here.