DEV Community

Manindu Wijewickrama
Manindu Wijewickrama

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

I just created two components named Button and Input.

  Button
  |_Button.css
  |_Button.js
  |_Button.test.js
  |_index.js
Enter fullscreen mode Exit fullscreen mode
  Button
  |_Input.css
  |_Input.js
  |_Input.test.js
  |_index.js
Enter fullscreen mode Exit fullscreen mode

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"
  ]
Enter fullscreen mode Exit fullscreen mode

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

  manindu@dev:~$ npx crcf components/Button Input
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  Button
  |_Input.js
  |_Input.module.scss
  |_Input.test.js
  |_index.js
Enter fullscreen mode Exit fullscreen mode

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

Happy Coding!!!

Top comments (2)

Collapse
 
dance2die profile image
Sung M. Kim • Edited

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

Collapse
 
manindu profile image
Manindu Wijewickrama

Glad you like it :)