react-component-files-generator

Warning This documentation is still being drafted

react-component-files-generator is a CLI tool helping developers creating react components faster with a simple command.

Usage

Install rcfg using npm :

1  npm install react-component-files-generator

Init rcfg to an existing react project by running the following command:

  npx rcfg --init

By default, components are generated in the same folder but you can change it by editing the config file:

|-- /src
    |-- /components
        |-- /Button
            |-- Button.component.js
            |-- Button.props.js
            |-- Button.style.scss
            |-- Button.test.js

You can now generate components by running:

  npx rcfg --build

Files generated are autofilled with generic content and the imports needed :

Component - (e.g. Button.component.tsx)

1import React from 'react';
2import './Button.module.scss';
3import { ButtonProps } from './Button.props.ts';
4
5const Button = (): ButtonProps => {
6  return (
7    <div>Button</div>
8  )
9}
10
11export { Button };

Testing file - (e.g. Button.test.tsx)

1import { render } from '@testing-library/react';
2import { Button } from './Button.component.tsx';
3
4const component = () => {
5    return <Button />;
6};
7
8describe('[Component] Button', () => {
9    let container: any = null;
10
11    beforeEach(() => {
12        container = document.createElement('div');
13        document.body.appendChild(container);
14    });
15
16    afterEach(() => {
17        container.remove();
18        container = null;
19    });
20
21    it('should render Button component', () => {
22        render(component(), container);
23    });
24})

Config File

When you run --init for the first time, it will ask you a series of questions to customize the cli to your needs and will generate a "rcfg.config.json" config file.

Example of the rfsb.config.json config file:

1{
2    "name": "my project",
3    "componentEntryPoint": "./src/components",
4    "component": {
5        "extension": ".tsx",
6        "nameExtension": ".component.tsx",
7        "export": "default"
8    },
9    "style": {
10        "extension": ".less",
11        "nameExtension": ".module.less",
12        "module": true
13    },
14    "test": {
15        "extension": ".tsx",
16        "nameExtension": ".test.tsx"
17    },
18    "props": {
19        "extension": ".ts",
20        "nameExtension": ".props.ts"
21    },
22    "fixture": {
23        "extension": ".ts",
24        "nameExtension": ".fixture.ts"
25    }
26}