@rootquotient/react-generator v1.1.1

React TS Generator

A CLI Generator for React typescript projects

It generates a starter kit for react typescript projects with all the necessary folders and starter files. In an existing project, it enables the creation of multiple

• Project Setup
• Components / Shared Components
• Services
• Models
• Forms
• Validators

Installation

npm install -g @rootquotient/react-generator

Usage

Using CLI, go to the folder inside which the new project is to be created. Ensure that, the current working directory isn't a git repository.

react-generate

As shown above, a list displays,

• use the up and down arrow keys to navigate over the list
• select the list item

Create a Project

Select Project option fron the react-generate list. Enter the project name when prompted (as words separated with space Ex. food app) A react application gets created with name food-app and the folder structure as shown below:

For example we create a food-app,

• Context - contains all the context files while working with ContextApi, a user context is created here by default
• Enums - contains shared constants used in the app
• Interceptor - axios interceptor for http requests
• Models - contains object models using the json collection used in serialization and deserialization of objects while sending requests and receiving response from DB
• Routes - contains routes and route constants for both api and app routes
• Services - contains http request services file
• Shared - contains shared components, hooks and utilities of the application
• Styles - contains global shared scss files
• Views - contains functional components rendered at different routes of the app
• The project contains a ts config file too

Note: To generate components, services, models, forms or/and validators, using the CLI, go to the project folder inside which you want to create those

Component

• From CLI, enter react-generate
• Select Component option from the list
• Enter the component name (as words separated with space)
• Press 'Y' if its a shared component else 'n'
• A default path gets displayed, press enter to proceed or input the desired path relative to the root directory. Ex: ./src/views/ProductsList
• The component is created at the desired path containing a typescript and an scss file with the basic starter code
• Repeat the steps to create multiple components

Service

• From CLI, enter react-generate
• Select Service option from the list
• Enter the service template name (as words separated with space) Ex: menu item
• menuItem.services.ts file is created inside the services folder
• The MenuItemService function contains the necessary react states such as MenuItems, loading, error and necessary functions fetchMenuItem, createMenuItem, updateMenuItem, deleteMenuItem
• Repeat the steps to create multiple services

Output Folder path

Model

To create all the object models, move the json collection to the project root as input.json It automatically creates all the required models

input.json File Sample

{
    "model":{
        "menu_items": [
            {
                "id": 1,
                "name": "pasta",
                "category": "veg",
                "cuisine": "italian",
                "status": "available",
                "created_at": "2022-05-31T11:53:45.000Z"
            }
        ],
        "restaurants":[
            {
                "id":"1",
                "name":"itc",
                "business id": "PK6aSizckHFWk8100xt5DA",
                "full address":"400 Waterfront Homesteadomestead, PA 15120",
                "open": true,
                "categories": [
                    "Burgers",
                    "Fast Food",
                    "Restaurants"
                ],
                "city": "Homestead",
                "review count": 5,
                "neighborhoods": ["Homestead",1],
                "state":"PA",
                "stars": 2,
                "latitude":40.412086,
                "attributes": {
                "Take-out": true,
                "Wi-Fi": "free",
                "Drive-Thru": true,
                "Good-For": {
                    "dessert": false,
                    "latenight": false,
                    "lunch": false,
                    "dinner": false,
                    "breakfast": false,
                    "brunch": false
                },
                "Caters": false,
                "Noise Level":"average",
                "Takes Reservations": false
                }
            }
        ],
        "reviews":[
            {
                "id":1,
                "text":"Goog and tasty",
                "created_at":"2022-05-30T11:53:45.000Z",
                "header":"fg gjhgs jkghx",
                "rating":"4",
                "author":"u621e1",
                "restaurant":"1",
                "dish":"2"
            },
            {
                "id":2,
                "text":"Must try",
                "created_at":"2022-05-30T11:53:45.000Z",
                "header":"fg gjhgs jkghx",
                "rating":"5",
                "author":"u121s1",
                "restaurant":"1",
                "dish":"1"
            }
        ],
        "search_result": true
    }
}

Output

All the models required for the existing collections would be created. For eg. the good for and attributes model, required inside the restaurant model have also got created

Output folder path

Form

It generates a formik form containing the various fields such as Input, dropdown, radio, switch, upload and OTP fields with Lets create a form to create a menu item and update it in our foodapp,

• From CLI, enter react-generate
• Select Form option from the list
• Enter the name (as words separated with space)
• Select the fields one by one and enter the name
• Enter the desired path with relative to the root directory. Ex: ./src/views/someComponent
• a formik form with the default initial values is created

Output Folder path

Validator

To create a validation schema for a formik form

• From CLI, enter react-generate
• Select Validator option from the list
• Enter the name of the validator (as words separated with space). Ex: create menu item
• Enter the validation key for eg. name and choose the criteria such as string, number, email, required, mixed, bool, min
• you can select multiple criteria using key down and enter
• enter all the validation keys present in the form

Output File

Output folder path

License

MIT