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!!!
Top comments (2)
That's a very handy little tool~
Thanks for the post, Manindu~
Glad you like it :)