A CLI that gives opinion to React
This library is only preview at the moment
Next.js and Sass support will be available soon
How to install?
npm i -g react-modelling
The problem
What is the problem in React? Your projects quickly and easily can become a trash. Disorganization reigns because there is no a main pattern to React. And in a big team? Nobody can understand that structure. And what about writing boilerplates to create components or router all the time? React Modelling solves all of these organization problems using the CLI.
Here are the proposed structure: under construction
src
└───domain - Non-reusable components
└───components - Reusable components
└───pages - Pages folder
└───routes - Routes folder
└───constants - Variables folder. e.g.: theme variable
└───utils - Utilities. e.g.: validators and formatters
└───styles - Global styles
└───assets - Assets folder. e.g: icons and images
└───@types - Typescript Interfaces and Types
Going ahead...
src
└───components
│ └───Header
│ │ index.tsx
│ │ styles.ts
or using modularization
src
└───components
│ └───Layout
│ └───Header
| | index.tsx
| | style.ts
|
| └───Form
│ └───Input
| | index.tsx
| | style.ts
│ └───Button
| | index.tsx
| | style.ts
CLI Commands
You can use in your terminal, the aliases remod, react-modelling, react-m or r-m to call the React Modelling.
Configure project
To configure the project
remod init
After this you should execute yarn or npm install
Page
To create a new page
remod page <name>
or you can create inside a module
remod page <name> <module-directory>
Example:
remod page Login users/authentication
Components
To create a new component
remod component <name>
Use the flag -r to generate an reusable component and -u for a non-reusable component. By default reusable component will be created.
or you can create inside a module
remod component <name> <module-name>
Example:
remod component LoginError users/messages
Router
To create a new router
remod router --init