Json-to-react-module NPM

Overview

json-to-react-module is a command line tool developed to generate react based module.

Installation and update

npm install -g json-to-react-module

Usage

Before creating a module, create React app using below commands. If you have already created react app please ignore the command.

npx create-react-app my-app

Navigate to your app and start the server.

cd my-app
npm start

Install the dependencies

There are some dependencies required for the created module to work.

npm i react-redux redux redux-immutable redux-saga normalizr lodash-es immutable axios reselect antd uuid

Create a module

Creates module

j2rm cm

Following question related to the module will be asked.

1. Module Name

Provide the module name you want to create

2. Data List Endpoint (get method)

Provide the data list endpoint

Note:

Since all the end points are not public and also json retured might have null values which can actually be of any type, recommendation is to create endpoints locally by creating json file in your public folder with the json value for which you want to create module. Now you can provide the endpoint after starting the server.

Component in ./src/your component name/index can now be rendered in your app.

A folder named common with supporting files will also be generated in ./src, which will be shared by all the modules.

For the generated module to work there are some dependencies: Install the dependencies:

Add pagination to the module list view

Updates the module to add pagination.

j2rm ap

Example list API responses

Example 1

{
  "total_entries": 115,
  "results": [
    {
      "id": "269762",
      "name": "Still Life",
      "price": 15.99,
      "rating": 4.5,
    }
  ]
}

Example 2

{
  "pagination": {
    "total": 115,
  }
  "results": [
    {
      "id": "269762",
      "name": "Still Life",
      "price": 15.99,
      "rating": 4.5,
    }
  ]
}

Following question related to the module will be asked.

1. Component Name

Provide one of the already existing module

2. Pagination Key (hit enter if pagination data are in root)

Provide key of the object having pagination data. Leave it blank if pagination date is in root object of the api response.

If the API response is something like example 1 then leave blank and hit enter.

If the API response is something like example 2 then type pagination and hit enter.

3. Total Entries Key

Provide the key of that has the total number of entries.

If the API response is something like example 1 then type total_entries and hit enter.

If the API response is something like example 2 then type total and hit enter.

4. Key of the array of objects that will be affected by this pagination

Provide the key of the list endpoint response objects key that you want to apply pagination. In case of both the examples above, type results and hit enter.