«React Advanced» рекомендует 8 отличных библиотек инструментов React, очень рекомендуемую коллекцию ~

внешний интерфейс JavaScript React.js
«React Advanced» рекомендует 8 отличных библиотек инструментов React, очень рекомендуемую коллекцию ~

Как говорится, если вы хотите делать хорошую работу, вы должны сначала заточить свои инструменты. При разработке проектов React автор суммирует некоторые очень хорошие библиотеки React, которые могут повысить эффективность разработки и удовлетворить потребности бизнеса.Далее я представлю их одну за другой.

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

Если говорить о самой популярной библиотеке компонентов пользовательского интерфейса React, то первое, что приходит мне на ум, этоAnt Design,Ant DesignПредоставляет десятки часто используемых компонентов, таких какButton,Menu,TableЖдать.

Ant DesignЭто не только мощная, но и гибкая конфигурация, любимая большинством разработчиков React. И на гитхабе было сделано74.6k+изstar

1.jpg

2.jpg

3.jpg

4.jpg

редактор форматированного текста braft-editor

braft-editorосновывается наdraftjsизWebРедактор форматированного текста, подходящий для платформы React, совместимый с основными современными браузерами. draft-js — компилятор форматированного текста с открытым исходным кодом facebook.Функция braft-editor расширена на основе draft-js.

braft-editorПолучил на гитхабе4.2k+изstar.

5.jpg

Давайте взглянемbraft-editorбазовое использование.

# Install using yarn
yarn add braft-editor
# Install using npm
npm install braft-editor --save

import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'

export default function BraftEditorDemo(){
   const [ editorState , setEditorState ] = useState(null)
   const handleEditorChange = ()=>{ /* 富文本  */

   }
   return <div className="box" >
       <BraftEditor
           onChange={handleEditorChange}
           value={editorState}
       />
   </div>
}

BraftEditor по-прежнему очень удобен в использовании, поддержкаполноэкранный,перетащить загрузить,кодовый блок,Цитироватьи другие функции.

6.jpg

Инструмент управления состоянием Двайс

Двайс основан наredux,react-redux,redux-sagaинструмент управления состоянием,

В два, синхронно срабатываетreducers, срабатывает асинхронноeffectsи подписывайтесь на мониторингsubscriptionsПредставляет собой организационную модель государственного управления.dvajsсуществуетgithubв настоящее время получить15.8k+звезда .

7.jpg

Схема:

8.png

Начать работу с dvajs тоже очень просто.

9.jpg

Перетащите библиотеку React dnd

React dnd — это push-библиотека для React, которую очень удобно использовать.react-dndсуществуетgithubпопал на16.4k+изstar.

10.jpg

11.jpg

Для начала работы с react-dnd на официальном сайте уже есть очень подробная информация, заинтересованные студенты могут попробовать.

Графики визуализации

echarts-for-reactЭто библиотека диаграмм, основанная на инкапсуляции электронных диаграмм с использованием React, которая может удовлетворить основные требования к визуальным диаграммам. Передайте параметры конфигурации диаграмм через реквизиты компонентов React. Сейчас я вgithubпродолжать3.3k+звезда .

12.jpg

Начните быстро:

npm install --save echarts-for-react

import React from 'react';
import ReactECharts from 'echarts-for-react';  
// or var ReactECharts = require('echarts-for-react');

<ReactECharts
  option={this.getOption()}
  notMerge={true}
  lazyUpdate={true}
  theme={"theme_name"}
  onChartReady={this.onChartReadyCallback}
  onEvents={EventsDict}
  opts={}
/>

13.jpg

средство предварительного просмотра уценки

Если вы хотите, чтобы ваш проект React показывалmdотформатировать структуру документа, затемreact-markdownхороший выбор. Использовать React-markdown очень просто.

Давайте взглянемreact-markdown,В настоящее времяreact-markdownПолностью доступно на github7.7k+🌟.

19.jpg

использовать:

import React from 'react'
import ReactMarkdown from 'react-markdown'
import ReactDom from 'react-dom'
import remarkGfm from 'remark-gfm'

ReactDom.render(
  <ReactMarkdown remarkPlugins={[[remarkGfm, {singleTilde: false}]]}>
    This ~is not~ strikethrough, but ~~this is~~!
  </ReactMarkdown>,
  document.body
)

Отображение результатов:

14.gif

Отображение QR-кода qrcode.react

Если вы хотите использовать ссылку для создания QR-кода в проекте React, вы можете попробовать это.qrcode.react, который доступен на github2.6k+🌟.

15.jpg

Начать:

import QRCode from 'qrcode.react'

export default function Index(){
    return <div>
          <QRCode fgColor={'pink'} size={100}  value="https://juejin.cn/user/2418581313687390" />
          <QRCode fgColor={'blue'} size={200} value="https://juejin.cn/user/2418581313687390" />
          <QRCode size={300} value="https://juejin.cn/user/2418581313687390" />
    </div>
}

Эффект:

16.jpg

Страницы кеша React-keepalive-router

Этот плагин был разработан автором, в основном, для нужд некоторых страниц, которые необходимо кэшировать в React, Позвольте мне продвигать его здесь, и в настоящее время он доступен на github.519🌟.Студенты, которые чувствуют себя хорошо, могут наградить их маленькой звездой 🌟.

17.jpg

Этот плагин основан на компоненте кэширования реакции, разработанном react 16.8+ и react-router 4+, который можно использовать для кэширования компонентов страницы, аналогичноvueизkeepaliveпакет vue-routerфункция эффекта.

  • Адрес проекта + справочные документы:портал 
<KeepaliveRouterSwitch withoutRoute >
  <div>
     <Route path="/a" component={ComponentA}  />
     <Route path="/b" component={ComponentB}  />
     <KeepaliveRoute path={'/detail'} component={ Detail } />
  </div>
</KeepaliveRouterSwitch>

Эффект:

18.gif

Суммировать

Сегодня я познакомлю вас с некоторыми хорошими инструментальными библиотеками React, и я надеюсь, что друзья, увидевшие их, смогут попробовать их использовать.

Категории