How to Generate React Components from your Terminal

And speed up your workflow

Photo by Bernard Hermant on Unsplash

Adding a new component can be a cumbersome task, especially if you’re writing tests and using something like Storybook. A file structure for a single component could potentially look like this:

You can save a lot of time by writing a node script that will take whatever component templates you need and generate these files, rather than writing them all by hand every time.

There are currently npm packages available that you can download and try out, but the added benefit of this approach is that you can tweak the component templates to fit you and your team’s needs on a project by project basis.

What You’ll Need

1. File template functions
2. A node script to generate and populate files
3. Logic in the script to update the components/index.ts file (optional)
4. An npm script to run the node script (optional)

Let’s start by creating a directory in the root folder of our project to house the template functions and the logic.

take .generate_component
touch component_templates.js
touch index.js

Component Templates

An example of the structure of a basic component that my team uses looks like this:

componenents/Navbar/Navbar.tsx

In our component_templates.js file, we can add a function to generate the component template like so:

.generate_component/component_templates.js

The function will receive the name argument when running the node script.

Depending on what files you want to include in your folder structure, you can add additional component templates. In my case, I want to add the following template functions:

• component
• story
• test
• barrel

The complete file for that folder structure would look like this:

.generate_component/component_templates.js

Node Script

The tasks of the node script will be:

1. Accept an argument (for the component name) from the terminal when running the script
2. Create a Folder for the new component
3. Add desired files to the folder
4. Read from the components/index.ts file and insert the new component into it (optional)*

* This is assuming that you use a barrel file to export all the components in your components folder. Here is an example of the barrel file that we use for reference:

components/index.ts

If you don’t follow the pattern of including the newly generated component in components/index.ts, then I would suggest removing that block of code in the upcoming example following the comment that says “Optional”.

.generate_component/index.js

Now that the script and template functions in place, you can run the script by entering the following command in your terminal:

node ./generate_component ComponentName

Alternatively, if you don’t want to run the node script directly, you can write an npm script to run the command for you in your package.json file.

Here’s an example of what that could look like:

"scripts": {
  "gc": "node .generate_component $1"
}

The $1 in the above script will be whatever component name you pass into the npm script when running it.

Now that you’ve written your npm script, you can run the following command in your terminal:

npm run gc ComponentName

If you executed everything correctly, a new folder should appear in the components folder and the component should be included in your components/index.ts file.

I hope that you can incorporate this pattern into your workflow and save yourself a ton of time!