React-construct NPM

react-construct

react-construct is a cli tool built for react apps to generate react components and other useful seperate files (eg. hooks).

Installation/Run

npx react-construct <command> <relativePath>

npm install react-construct -g or yarn global add react-construct

Usage

To use react-construct just type react-construct <commands> in your terminal.

Commands	Description
fc	For functional components
f	For simple function file
h	For hook file
help	For help
v	For version

Example

Commands	Example
fc	`react-construct fc <component_name> <relative_path>`
f	`react-construct f <function_name> <relative_path>`
h	`react-construct h <hook_name> <relative_path>`

Functional component

react-construct fc Boo ./Foo/Faa, this command will generate required scalable files for a functional component.

|-- /Foo
    |-- /Faa
        |-- /Boo
            |-- Boo.tsx
            |-- Boo.model.tsx
            |-- Boo.styles.ts
            |-- Boo.constants.ts
            |-- Boo.view.tsx

File	Description
Boo.tsx	Your main FC file
Boo.model.tsx	This file will have your business logic
Boo.view.tsx	Your view or JSX file
Boo.styles.tsx	Your CSS file
Boo.constants.ts	Here FC constants

Why such file structure?

Tons of lines of code hurts your eyes.
Imagine 10000+ line of a code in just a single file.
Searching\debugging becomes a mess.
Before adding something new in between will make you think twice.
Managing your components can become a mess.

After using react-construct

Your FC will split into seperate files.
Less line of a code in a file
Business logic, styles and view will be in a seperate file.
Wanna make some changes in view file, you know where to find.
Change in business logic, directly switch to model file and make the required changes.
Reviewing such FC code becomes damn easy.

#Project in progress...