получить 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 }]} />
Каждый компонент имеет свой собственный компонент / класс оболочки, так что его можно изменить в одном месте кода.