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.
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
The structure of your project will look something like this:
|-- /src |-- /components |-- /SomeComponent |-- SomeComponent.js |-- SomeComponent.css |-- SomeComponent.test.js
When you use the
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
Also, you can override the default behavior by adding one-time instructions when writing the
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.