Boost your Development speed using Birla

Subscribe to my newsletter and never miss my upcoming articles

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

Comments (1)

Aditya Agarwal's photo

Thanks for using my library and writing a post about it. 🥳