Creating React Components From Command Line

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!!!

Comments

[Sung M. Kim]

That's a very handy little tool~
Thanks for the post, Manindu~

[Manindu Wijewickrama]

Glad you like it :)