react jet - React starter kit with Redux, Popup, Validation, Spinner, Reactstrap, Grid and form Controls

“low angle photography of high-rise buildings with flying plane” by Kelvin Zyteng on Unsplash

get a Jet start to your apps

you should have basic understanding for react and redux to understand this

If you want to develop applications using react, you definitely need some help full libraries so that you can start quickly and does not fall into unnecessary things like creating your own data grid, numeric text box etc.

Most modern apps today require some common controls [Grid, date time picker], UI experience [showing spinner while processing] and you want this experience same throughout the app, to help with all these basic things,I developed a framework to gather all these things.

for the full code, https://github.com/asifsha/react-jet

Rest API in node JS for this framework, https://github.com/asifsha/react-jet-api

features for react-jet

• axios — API Helper
• react-block-ui — Showing Spinner for UI
• react-bootstrap-table2 — Editable grid
• reactstrap — Styling
• redux — State Store
• react-widgets — DropDownList, DatePicker, NumericTextBox
• react-switch — Toggle button
• toastr — Notification to show any type of messages
• validator — Validate user input
• Every control / component is used with a wrapper so you can replace it if you want at only one place.

if you want to learn more about react and redux, see this

code structure

axios is used to send requests to server, if you want to use any other like fetch just replace in this file

import axios from 'axios';

class ServiceApi {

    static getTypes() {

        return new Promise((resolve, reject) => {
            axios.get('/types')
                .then(function (response) {
                    if (response.data != null)
                    {
                        var arr=response.data.map(
                            x => { 
                                var type = { id: x._id, name:x.name };
                                return type;
                         });                                  
                        resolve(arr);
                    }                        
                    else
                        resolve(response.data);
                })
                .catch(function (error) {
                    reject(error);
                })
                .then(function () {
                    // always executed
                });
            //resolve(([]));
        }
        );


    }   
}

export default ServiceApi;

https://raw.githubusercontent.com/asifsha/react-jet/master/src/api/serviceApi.js

Spinner from react-block-ui

Grid from react-bootstrap-table2, it has a lot of use full features like Ingrid editing, sorting, multiple selection methods and so on.

If you want to replace this grid with some other grid control, you can do it in this file

https://raw.githubusercontent.com/asifsha/react-jet/master/src/components/common/Grid.js

reactstrap — Easy to use React Bootstrap 4 components, used to style the app.

Popup from reactstrap modal

react-widgets — DropDownList, DatePicker, NumericTextBox

Drop down is bind with remote data

assign props.itemTypes to data

call the action creator method

dispatch action

actual service method to request data from server

react-switch — Toggle button

toastr — Notification to show any type of messages

validator — Validate user input

import validator from 'validator';


// all the validators should return ture on failure and false on success so that developer
// can skip !(not) operator for return value
class Validator {
    static validateRequired(value){        
        return validator.isEmpty(value + '');
    }

    static validateInteger(value){             
        return !validator.isInt(value + '');
    }

    static validateIntegerWithMin(value, min){             
        return !validator.isInt(value + '', { min: min  });
    }

    static validateIntegerWithMax(value, max){             
        return !validator.isInt(value + '', { max: max  });
    }

    static validateIntegerWithMinMax(value, min, max){          
        return !validator.isInt(value + '', { min : min, max: max  });
    }
}

export default Validator;

https://raw.githubusercontent.com/asifsha/react-jet/master/src/helper/validator.js

I developed some reusable components like src/components/common/DynamicButtonToolbar.js, for dynamically adding buttons

import React from 'react';
import { ButtonGroup, Button } from 'reactstrap';


class DynamicButtonToolbar extends React.Component {

    render() {
       var buttonsItems = this.props.buttons.map(function (button) {
            return (
                <Button key={button.id} id={button.id} color={button.style} onClick={button.handler}>{button.text}</Button>            );
        });
        return(
        <ButtonGroup>
            {buttonsItems}
        </ButtonGroup>
        )
    }
}

export default DynamicButtonToolbar;

And call it like this

<DynamicButtonToolbar buttons={[{
                    id: 'btnadd',
                    text: 'Add',
                    style: 'warning',
                    handler: this.onAdd
                },
                {
                    id: 'btnedit',
                    text: 'Edit',
                    style: 'info',
                    handler: this.onEdit
                },
                {
                    id: 'btnDelete',
                    text: 'Delete',
                    style: 'info',
                    handler: this.onDelete

                }]} />

Every component has its own wrapper component/class so that it can be change from one place in code