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:

Image for post
Image for post
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
Image for post
Image for post

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:

Image for post
Image for post

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:

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post
index.js
myComponent.js
Image for post
Image for post
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
Image for post
Image for post

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

Image for post
Image for post

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store