получить Jet запуск ваших приложений

у вас должно быть базовое понимание реакции и сокращения, чтобы понять это

Если вы хотите разрабатывать приложения с использованием React, вам определенно понадобится помощь полных библиотек, чтобы вы могли быстро начать работу и не столкнуться с ненужными вещами, такими как создание собственной сетки данных, числовое текстовое поле и т. Д.

Большинству современных приложений сегодня требуются некоторые общие элементы управления [сетка, выбор даты и времени], пользовательский интерфейс [показывает счетчик во время обработки], и вы хотите, чтобы этот опыт был одинаковым во всем приложении, чтобы помочь со всеми этими основными вещами, я разработал структуру, чтобы собрать все это вещи.

для полного кода https://github.com/asifsha/react-jet

Rest API в узле JS для этого фреймворка https://github.com/asifsha/react-jet-api

особенности для реактивной струи

  • Axios - API Helper
  • React-block-ui - Отображение счетчика для пользовательского интерфейса
  • React-bootstrap-table2 - Редактируемая сетка
  • Reactstrap - Укладка
  • Redux - Государственный магазин
  • Реагировать-виджеты - DropDownList, DatePicker, NumericTextBox
  • Реакция-переключатель - кнопка переключения
  • Toastr - Уведомление для отображения любого типа сообщений
  • Валидатор - Подтвердить ввод пользователя
  • Каждый элемент управления / компонент используется с оболочкой, поэтому вы можете заменить его, если хотите, только в одном месте.

если вы хотите узнать больше о React и Redux, см. this

структура кода

axios используется для отправки запросов на сервер, если вы хотите использовать любой другой, например fetch, просто замените в этом файле

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

Спиннер из react-block-ui

Сетка от react-bootstrap-table2, она имеет множество полноценных функций, таких как редактирование Ингрид, сортировка, методы множественного выбора и так далее.

Если вы хотите заменить эту сетку каким-либо другим элементом управления сеткой, вы можете сделать это в этом файле.

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

reactstrap - Простые в использовании компоненты React Bootstrap 4, используемые для стилизации приложения.

Всплывающее окно из reactstrap модальное

Реагировать-виджеты - DropDownList, DatePicker, NumericTextBox

Выпадающий список привязан к удаленным данным

Реакция-переключатель - кнопка переключения

Toastr - Уведомление для отображения любого типа сообщений

Валидатор - Подтвердить ввод пользователя

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

Я разработал несколько многоразовых компонентов, таких как src / components / common /DynamicButtonToolbar.js, для динамического добавления кнопок.

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;

И назовите это так

<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

                }]} />

Каждый компонент имеет свой собственный компонент / класс оболочки, так что его можно изменить в одном месте кода.