DEV Community

loading...

Increasing React components development productivity

streletss profile image nikita ・2 min read

Every react project is unique and may follow some conventions on how every component should be structured. It always depends on the size of the project, team preferences, etc. Here is an example of a typical react component in my projects:

|__Button
| |__Button.module.scss
| |__Button.stories.mdx
| |__Button.spec.ts
| |__Button.tsx
| |__index.ts
| |__README.md
Enter fullscreen mode Exit fullscreen mode

While I personally find this structure convenient and self-contained, it is a bit painful to create all of the files from scratch for every new component. So I usually end up with copy and pasting the whole folder, renaming filenames and contents, fixing imports, etc.

It's definitely a bit faster but still takes some time. That's why I decided to create and use a tool that would make this process easier and faster. If you're interested in its development process here's an overview article.

GitHub logo streletss / bystro

A CLI utility library for scaffolding code templates and boilerplates.

To see it in action let's create a custom react-component template. Do this from the project root:

mkdir .bystro
mkdir .bystro/react-component
cd .bystro/react-component
Enter fullscreen mode Exit fullscreen mode

Then describe its structure by simply creating desired files:

|__<<Name>>
| |__<<Name>>.module.scss
| |__<<Name>>.stories.mdx
| |__<<Name>>.spec.ts
| |__<<Name>>.tsx
| |__index.ts
| |__README.md
Enter fullscreen mode Exit fullscreen mode

<<Name>> is a variable that would be replaced with real component name you'll enter later. It could be used in file contents as well:

import React from "react";
import styles from "./<<Name>>.module.scss";

type <<Name>>Props = {
  className?: string;
  onClick?: (e: React.MouseEvent) => void;
  children: React.ReactNode;
};

const <<Name>> = (props: <<Name>>Props) => {
  return null;
};

<<Name>>.defaultProps = {};

export default <<Name>>;
Enter fullscreen mode Exit fullscreen mode

There could be as many variables you like but to make them processable you need to create a .templaterc file inside of template folder. In our case it is touch .bystro/react-component/.templaterc:

{
  "variablePrefix": "<<",
  "variableSuffix": ">>",
  "variables": [
    { "name": "Name", "description": "React component name"}
  ]
}
Enter fullscreen mode Exit fullscreen mode

And that should be it, our template is ready.
Let's create a new component from it. From inside the project root run:

npx bystro react-component ./src/components
Enter fullscreen mode Exit fullscreen mode

After that you'll be prompted to fill all of the variables:

? Enter Name (React component name): 
Enter fullscreen mode Exit fullscreen mode

For example, enter Title and there you have it! Navigate to
./src/components to see your newly created component:

|__Title
| |__Title.module.scss
| |__Title.stories.mdx
| |__Title.spec.ts
| |__Title.tsx
| |__index.ts
| |__README.md
Enter fullscreen mode Exit fullscreen mode

Thanks for reading.
Would <3 to receive some feedback.

Discussion (0)

Forem Open with the Forem app