How to Use CLI to Generate Components in ReactJS

1. Use generate-react-cli to Generate Components for React Project
2. Use Visual Studio Code Extensions

React web applications are often made up of complex component trees. Therefore it can be beneficial to have an organized structure for storing all the components in the project folder.

There are many ways to generate an initial environment for building React application. The easiest is to use create-react-app, developed by the React team at Facebook.

React developers often need to copy and paste basic boilerplate codes for generating components. However, many solutions are available for quickly generating the necessary code.

Use generate-react-cli to Generate Components for React Project

This package can help you save a lot of time spent on copy-pasting boilerplate code when creating new components.

Install this package and run the following basic command in the command line interface.

npx generate-react-cli component SomeComponent

It will generate a new folder named SomeComponent, which will have custom JavaScript, CSS, and other files, depending on your project type.

The structure of your project will look something like this:

|-- /src
    |-- /components
        |-- /SomeComponent
            |-- SomeComponent.js
            |-- SomeComponent.css
            |-- SomeComponent.test.js

When you use the generate-react-cli command to generate a component for the first time, it will ask you questions, which you can answer to get the specific type of files for your project. For example, you can specify that you need TypeScript files instead of generic JavaScript.

Once you’ve answered all questions, GRC will create a generate-react-cli.json file that stores your choices. The command will check this file to determine what type of files to generate by default.

You can go to this file and change the options to adjust the functionality of the generate-react-cli command.

Also, you can override the default behavior by adding one-time instructions when writing the generate-react-cli command.

Let’s imagine you also want to generate a storybook file for one component. You can do that by running the following command.

npx generate-react-cli component Box --withStory=true

By default, GRC will continue to generate component files without a storybook. But a single time, it will generate a storybook file as well.

Use Visual Studio Code Extensions

A simpler solution is to use code extensions available for Visual Studio Code.

You have to manually create folders and files for components, but you can use shortcuts to generate the boilerplate code.

For example, with this extension, you can enter rcc and hit the tab, and the extension will generate the necessary code for you.