Introduction
Whatever framework you choose to build your app, you have to write some amount of boilerplate, be it some import statements, linking the component to its own style files, linking the component to your state. If you are someone who is not using any css-in-js library that means you also have to create a style file along with the js file.
You want to keep the code structure so it's easy to scale and intuitive for any new developer keeping it as modular as possible for reusability.
I have found that to be something hard to do when you are moving fast or chasing the deadline or just feeling lazy.
Here is a simple solution for you now.
Birla
Birla is a library that can enable you to have a custom template for components and state handlers.
It's like using the Angular CLI to create new modules but on any project you want.
Usage
File structure
birla-templates
└───simple-component
└───$NAME_s
$NAME_h.css
$NAME.js
index.js
// /birla-templates/simple-component/$NAME_s/$NAME.js
const $NAME = () => {
return <div>$NAME</div>
}
export default $NAME;
and then you can create a component like this
birla -n NewComponent -t simple-component app/components/
Birla supports different case styles which make it very easy to create complex templates like adding a default container class to the above example,
/* /birla-templates/simple-component/$NAME_s/$NAME.css */
.$NAME_s-container{
}
import './$NAME.css'
const $NAME = () => {
return <div className="$NAME_s-container">$NAME</div>
}
Protip
You can add these templates to your package.json to make it easier to execute
{
"createComponent": "birla src/Components/UI/ -t component -n",
"createPage": "birla src/Page/ -t component -n",
}
and then you can do something like
yarn createPage LoginPage
Hope this helps you as it did for me. Feel free to leave any queries or share how this would help your development