In this tutorial, I'm going to show you an easy way to configure your React project for creating components from the command line.

Let's get started by creating a new React project using create-react-app.

Execute the following command in your terminal. This will create a new project named components-demo.

manindu@dev:~$ create-react-app components-demo

Next we have to install create-react-component-folder (created by Snær Seljan Þóroddsson - GitHub) NPM package as a development dependency in our project. As the name implies, this is the package which allows us to create components using the command line.

manindu@dev:~$ npm i --save-dev create-react-component-folder

Now it's time to create some components!!. I would like to create a directory named components and create my components inside that. We can do that by executing the command below.

manindu@dev:~$ npx crcf components/Button Input

I just created two components named Button and Input.

  Button
  |_Button.css
  |_Button.js
  |_Button.test.js
  |_index.js

  Button
  |_Input.css
  |_Input.js
  |_Input.test.js
  |_index.js

Now we have two components with .css files for each of them. However, I prefer to use SASS with CSS modules for our project. We can do that by adding a configuration fie create-react-component-folder

In the project root, create a file named .crcfrc and add the code below.

  [
    "scss",
    "cssmodules"
  ]

Delete the Button and Input components that we created earlier and run the same command as below.

  manindu@dev:~$ npx crcf components/Button Input

This time you will get the same components with .module.scss files which means now you can use SASS with CSS modules for styling (you have to install node-sass for using sass)

  Button
  |_Button.js
  |_Button.module.scss
  |_Button.test.js
  |_index.js

  Button
  |_Input.js
  |_Input.module.scss
  |_Input.test.js
  |_index.js

You can read more about the create-react-component-folder on their documentation.

Happy Coding!!!