5 потрясающих библиотек React.js, которые стоит попробовать!

Автор: Луис Петрик. Переводчик: Front-end Xiaozhi Источник: среда

Ставьте лайк и смотрите снова, формируйте привычку

эта статьяGitHub GitHub.com/QQ449245884…Он был включен в вышеизложенное, и более ранние статьи с высокими похвалами были классифицированы, а также было систематизировано множество моих документов и учебных материалов. Добро пожаловать в Star and Perfect. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Надеюсь, у нас что-то получится вместе.

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

В этой статье я представляю 5 библиотек React, которые, я надеюсь, помогут вам.

1. react-portal

Я думаю в РеактеПорталызнакомы большинству людей, даже если они редко используются. Вот как они описаны в документации React:

PortalПредоставляет отличное решение для рендеринга дочерних узлов в узлы DOM, которые существуют вне родительского компонента.

Как правило, все наше приложение React отображается в одном узле DOM в HTML. но поportals, мы можем определить дополнительные узлы, на которые мы можем монтировать части приложения, такие как отдельные независимые компоненты.

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

сейчасreact-portalПрименение:

import { Portal } from ‘react-portal’
<Portal node={document && document.getElementById(‘portal’)}>
  <p>This is portaled into the portal div!</p>
</Portal>

Просто используйте селекторы, такие какgetElementById) в HTML-кодеportalКонтейнер можно использовать как мишень.

существуетReact.jsПрограммыpublic/index.htmlВ файле:

<div id=”root”></div>
<div id=”portal”></div>

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

Конечно, мы также можем динамически переключатьсяportal

{this.state.show ? (
 <Portal node={document && document.getElementById(‘portal’)}>   
   <p>Portal content</p>
 </Portal>
) : null}

2. react-toastify

В современной веб-разработке предоставление динамической информации конечным пользователям является абсолютной необходимостью. К сожалению, в JavaScriptalert()Функции не лучший выбор для этой цели, как всем известно, поэтому существуют различные UI-библиотеки.

Вот плагин подсказки Reactreact-toastify, это небольшая и настраиваемая библиотека, следующаяофициальныйПриведены примеры:

Использование заключается в следующем:

import { ToastContainer, toast } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css'
toast.configure({
  autoClose: 2000,
  draggable: false,
  position: toast.POSITION.TOP_LEFT
})
const notify = () => toast('Wow so easy !')

const App = () => (
  <div className="App">
    <button onClick={notify}>Notify !</button>
  </div>
)

Скажите это шаг за шагом:

• Сначала импортируйте саму библиотеку, но потом важно импортировать необходимый CSS.
• затем настройтеtoast,autoCloseозначаетtoastОн исчезнет автоматически через долгое время.
• используяtoast()функцию, так чтоtoastпоявляться.

более крутые функции

мы также можемtoastПоместите JSX в:const notify = () => toast(<h1>Big Text</h1>).

autoCloseможно заменить наfalse, поэтому он никогда не закрывается автоматически.

Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.

3. react-contextmenu

Трудно представить приложение без контекстного меню, которое также необычно для веб-сайта. Это уже не потому, что все больше и больше веб-приложений приближаются к реальным настольным приложениям, которые часто уже предлагают столь же хорошую производительность и множество функций, которые мы никогда не ожидали несколько лет назад.

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

Обычно используется для отображения так называемых контекстных меню, для этого есть очень удобныйReact.jsбиблиотека. Использование заключается в следующем:

import React from 'react'
import { ContextMenu, MenuItem, ContextMenuTrigger } from 'react-contextmenu'

const App = () => (
	<React.Fragment>
		<ContextMenuTrigger id="TriggerID"> {/* ID for every instance must be individual */} 
			<p>Right click on me!</p>
		</ContextMenuTrigger>

		<ContextMenu id="MenuID">
			<MenuItem onClick={() => alert('first ')}>
				<button>1. Item</button>
			</MenuItem>

			<MenuItem onClick={() => alert('second')}>
				<button>2. Item</button>
			</MenuItem>
		</ContextMenu>
	</React.Fragment>
)

export default App

<ContextMenuTrigger>это компонент, который нам нужен, чтобы щелкнуть правой кнопкой мыши, чтобы переключить меню. Само меню находится в<ContextMenu>определяется в обертке. Для каждого предмета есть<MenuItem>компонент, мы можем дать емуonClickсобытия для обработки нашего пользовательского ввода.

4. react-lazy-load-image-component

Для отображения большого количества изображений на нашем веб-сайте требуется некоторое время. Часто загружаемые и всплывающие изображения вызывают у пользователя неприятные ощущения от пользовательского интерфейса, чего, конечно же, мы хотим избежать.

Мощная библиотека, которая оптимизирует все, что связано с изображениями для пользователя.response-lazy-load-image-component. Мы можем не только создать хороший эффект размытия, как в моем примере ниже, для соединения загруженных изображений, но мы также можем лениво загружать изображения. Это можно найти в следующемв официальном примереВидеть:

5. react-onclickoutside

Важным правилом проектирования пользовательского интерфейса является тщательная оценка как можно большего количества вводимых пользователем данных. Каждый должен знать об этом, но иногда может быть сложно реализовать что-то подобное в коде.

Возможным примером является меню, которое сворачивает пользователь. Если вы хотите закрыть его снова,90%пользователей, как правило, просто нажимают на мертвые зоны веб-сайта (то есть элементы, которые не реагируют сами по себе). Это точно так же почти на всех профессиональных сайтах. Чтобы закрыть меню, просто нажмите рядом с ним еще раз, вместо того, чтобы переключаться непосредственно на него.

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

В приведенном ниже примере вы можете увидеть, как мы можем создать простойh1а такжеbuttonреализовать эту функцию. только при нажатии на что-либо, кроме этих двух,console.logбудет выводиться. Функция, обрабатывающая это событие, должна вызыватьhandleClickOutside.

import React, { Component } from 'react'
import onClickOutside from 'react-onclickoutside'

class App extends Component {
	handleClickOutside = evt => {
		console.log('You clicked outside!')
	}

	render() {
		return (
			<div>
				<h1>Click outside!</h1>
				<button>Don't click me!</button>
			</div>
		)
	}
}

export default onClickOutside(App)

Суммировать

Надеюсь, это поможет вам. Спасибо за прочтение!

---

источник:Веб-разработка hub.net/articles/Спешите…

Ошибки, которые могут существовать после развертывания кода, не могут быть известны в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку журнала.Кстати, я рекомендую всем полезный инструмент мониторинга ошибок.Fundebug.

---

общаться с

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.