После выполнения корпоративных проектов N+1 я подытожил эти обязательные элементы React.

JavaScript React.js

Для того, чтобы улучшить развитие каждогоReactЭффективность проекта, совмещенная автором с его реальным опытом работы, резюмируется следующим образом.ReactОбщие плагины для проектов.

1. Государственное управление

  • Redux JavaScriptКонтейнер состояния, обеспечивающий предсказуемое управление состоянием
  • MobXУправление состоянием стало простым и расширяемым благодаря функциональному реактивному программированию.
  • Redux Thunk Reduxпромежуточное ПО для асинхронной обработки
  • Redux Saga ReduxПромежуточное ПО для управления приложениямиSide Effect(Побочные эффекты, такие как асинхронная выборка данных, доступ к кешу браузера и т. д.)
  • Dvaна основеreduxиredux-sagaсхема потока данных

2. Библиотека компонентов пользовательского интерфейса

  • Ant designна основеAnt Designдизайн-системаReact UIБиблиотека компонентов, в основном используемая для исследований и разработок средних и конечных продуктов корпоративного уровня.
  • Ant design mobileна основеAnt Designдизайн-системаReact UIБиблиотека мобильных компонентов
  • MaterialUIСамый популярный в мире дизайн на основе текстурReact UIбиблиотека
  • React toolboxнабор использованияCSSРеализация функций модуляGoogleизMaterial DesignнормативныйReactкомпоненты
  • React VirtualizedТот, который может отображать большие списки и таблицыReactрешение
  • Fabric UIМайкрософт с открытым исходным кодомUXНабор фреймворков для создания красивых кроссплатформенных приложений с общим кодом, дизайном и интерактивным поведением.
  • React desktopна основеReactизJavaScriptБиблиотеки, предназначенные для того, чтобы привнести в Интернет привычные возможности рабочего стола, в том числе многиеmacOS SierraиWindows 10компоненты.react-desktopиNW.jsиElectron.jsИдеальное сочетание, но можно использовать в любомJavaScriptиспользуется в управляемых проектах
  • ZentЮзан ПКWebUIнормативныйReactВнедрение, обеспечивающее полный набор основных компонентов пользовательского интерфейса и некоторых часто используемых бизнес-компонентов.
  • react-iconsна основеReactИнкапсулированная богатая библиотека иконок

3. Инструменты

  • react-copy-to-clipboardна основеReactКомпонент «Копировать в буфер обмена»
  • qrcode.reactна основеReactКомпонент, который генерирует QR-код
  • nprogressприменять кYouTube,Mediumи т. д. компонент верхнего индикатора выполнения
  • react-syntax-highlighterна основеReactКомпонент подсветки кода
  • react-contextmenuкомпонент контекстного меню
  • emoji-martна основеReactбиблиотека выражений
  • react-highlight-wordsна основеReactвыделение ключевых слов

4. Визуализация данных

  • AntVВключаютG2,G6,F2,L7И полный набор спецификаций по использованию и дизайну диаграмм для мощной визуализации данных.
  • G2Plotна основеG2Упакованная готовая библиотека визуальных компонентов
  • rechartsиспользоватьReactиD3Создание пользовательской библиотеки диаграмм
  • ViserБиблиотека визуализации, поддерживающая несколько основных фреймворков

5. Эффект анимации/движения

  • HalogenиспользоватьReactКоллекция анимаций загрузки
  • react-moveкрасивый, управляемый даннымиReactАнимация, всего 3.5кб (gzip)
  • react-springБиблиотека анимации, основанная на физике пружин.
  • Ant MotionПредоставляет отдельные элементы, комбинированную анимацию и полные анимационные решения.
  • scenejsна основеJavaScriptиCSSБиблиотека анимации временной шкалы
  • react-text-loopТекстовая карусельная анимация

6. Перетаскивание/сортировка

  • react-beautiful-dndХорошая портативная библиотека перетаскивания списков
  • react-dndПомогает нам создавать сложные интерфейсы перетаскивания, сохраняя компоненты отдельными
  • react-moveableГибкая и мощная библиотека перетаскивания, которая поддерживает свободное перетаскивание, масштабирование и контрольные линии.
  • react-grid-layoutМощная библиотека сортировки и масштабирования с помощью перетаскивания сетки.
  • mixitupМощная библиотека анимации сортировки карточек списка

7. Обработка изображений

  • react-image-cropМощная библиотека обрезки изображений
  • react-sparklinesАвтоматически генерировать линии тренда на основе данных
  • dom-to-imageна основеdomгенерация картинокcanvasбиблиотека
  • react-img-editorредактор изображений

8. Связанный с редактором

  • braft-editorредактор форматированного текста
  • powerNiceредактор уценки/обогащенного текста
  • GGEditorВизуальный редактор диаграмм
  • react-codemirror2редактор кода
  • jsoneditorjson-редактор
  • h5-dooringРедактор страниц H5

9. Карта, связанная

  • google-map-reactПлагин Google Карт
  • react-amapПлагин карты Gaode
  • @uiw/react-baidu-mapКарта Байду

10. Леса

  • Create React AppНеобходим для начинающихReactДурак Леса
  • Next.jsСборка с серверным рендерингомReactстроительные леса
  • umiФреймворк интерфейсных приложений корпоративного уровня
  • webpack3_reactсовместимыйIE9+и предоставить полныйReactВедро для всей семьи

Наконец

Автор синхронизировал документ на github, адрес такой:

В настоящее времяH5-DooringВизуальный редактор также успешно обновил документы по разработке и развертыванию, и заинтересованные друзья могут это почувствовать.

Категории