Одной из сильных сторон React является то, насколько хорошо он взаимодействует с другими. Откройте для себя некоторые из лучших инструментов для интеграции с фреймворком.
React — это известная библиотека JavaScript, которую можно использовать для создания пользовательских интерфейсов для универсальных веб-приложений. React легко адаптируется, и вы можете комбинировать его с другими технологиями, чтобы создавать более мощные и эффективные приложения.
Узнайте, как интегрировать React с различными технологиями, и вы получите преимущества из нескольких источников.
1. Реагировать + Редукс
Redux — это библиотека управления состоянием, используемая в сочетании с React. Redux упрощает централизованное управление состоянием приложения. При создании сложных приложений с множеством состояний React и Redux хорошо работают вместе.
Вот иллюстрация того, как использовать Redux с React:
Импортировать Реагировать от«реагировать»;
Импортировать { создать магазин } от«редукс»;
Импортировать { Провайдер } от'реагировать-редукс';
константа начальное состояние = { считать: 0 };функцияредуктор(состояние = начальное состояние, действие) {
выключатель (действие.тип) {
случай'УВЕЛИЧЕНИЕ':
возвращаться { считать: штат.количество + 1 };
случай'ДЕКРЕМЕНТ':
возвращаться { считать: штат.количество - 1 };
по умолчанию:
возвращаться состояние;
}
}константаИмпортировать Реагировать от«реагировать»;
Импортировать {используйте запрос, gql} от'@аполло/клиент';
константа GET_USERS = gql`
запрос GetUsers {
пользователи {
идентификатор
имя
}
}
;
функцияПользователи() {
константа {загрузка, ошибка, данные} = useQuery (GET_USERS);
если (загрузка) возвращаться<п>Загрузка...п>;
если (ошибка) возвращаться<п>Ошибка :(п>;
возвращаться (
store = createStore (редуктор);
функцияПрилавок() {
константа количество = использоватьселектор(состояние => штат.количество);
константа диспетчеризация = использованиеDispatch();
возвращаться (Количество: {count}</p>
В этом примере создается хранилище Redux с начальным состоянием 0.. Затем функция редуктора обрабатывает УВЕЛИЧЕНИЕ и ДЕКРЕМЕНТ операции. В коде используется использованиеселектор и использованиеОтправка крючки для получения текущего счета и отправки действий по отдельности.
Наконец, чтобы сделать хранилище доступным для всего приложения, оберните компонент счетчика компонентом поставщика.
2. Рендеринг на стороне сервера с помощью Next.js
Next.js — это фреймворк для разработки, который оптимизирует скорость веб-сайта и SEO тактика путем передачи HTML клиентам и использования рендеринг компонентов React на стороне сервера.
Его мощный набор инструментов работает вместе с React, обеспечивая исключительную производительность и высокий рейтинг в поисковых системах.
// страницы/index.js
Импортировать Реагировать от«реагировать»;
функцияДом() {
возвращаться (
Привет, Мир!</h1>
Это серверный компонент React.</p>
</div>
);
}
экспортпо умолчанию Дом;
В этой модели вы характеризуете компонент React, называемый Дом. Next.js создает статическую HTML-страницу с содержимым этого компонента при его рендеринге на сервере. Когда страница получает посещение от клиента, она отправляет HTML клиенту и увлажняет компонент, позволяя ему функционировать как динамический компонент React.
3. Получение данных с помощью GraphQL
GraphQL — это язык запросов для API, который предлагает профессиональную, сильную и адаптируемую альтернативу REST. С GraphQL вы можете быстрее получать данные и быстрее обновлять пользовательский интерфейс.
Это иллюстрация того, как использовать GraphQL с React:
Импортировать Реагировать от«реагировать»;
Импортировать {используйте запрос, gql} от'@аполло/клиент';
константа GET_USERS = gql`
запрос GetUsers {
пользователи {
идентификатор
имя
}
}
;
функцияПользователи() {
константа {загрузка, ошибка, данные} = useQuery (GET_USERS);
если (загрузка) возвращаться<п>Загрузка...п>;
если (ошибка) возвращаться<п>Ошибка :(п>;
возвращаться (
{данные.пользователи.карта(пользователь => (
- {имя_пользователя}</li>
))}
</ul>
);
}
функцияПриложение() {
возвращаться (
Пользователи</h1>
</div>
);
}
экспортпо умолчанию Приложение;
Эта модель называет использовать запрос функцию от @аполло/клиент библиотека для получения списка клиентов из интерфейса программирования GraphQL. Затем список пользователей отображается в пользовательском интерфейсе.
4. Стилизация с помощью CSS-in-JS
CSS-in-JS — это основанный на JavaScript метод стилизации компонентов React. Это упрощает управление сложными таблицами стилей и позволяет писать стили в модульном и компонентном стиле.
Вот иллюстрация того, как использовать CSS-in-JS с React:
Импортировать Реагировать от«реагировать»;
Импортировать стилизованный от'стилизованные компоненты';
константа Кнопка = стилизованная.кнопка`
фоновый цвет: #007лучший друг;
цвет: #fff;
заполнение: 10пикс. 20пкс;
радиус границы: 5пкс;
размер шрифта: 16пкс;
курсор: указатель;
&: наведите {
фоновый цвет: #0069д9;
}
;
функцияПриложение() {
возвращаться (
Этот пример создает стилизованная кнопка компонент, использующий стилизованный функция. Он определяет тон восприятия кнопки, тон текста, амортизацию, развертку линии, размер текста и курсор.
Также определено состояние наведения, которое изменяет цвет фона, когда пользователь наводит курсор на кнопку. Наконец, кнопка визуализируется с использованием компонента React.
5. Интеграция с D3 для визуализации данных
D3 — это библиотека JavaScript для обработки и визуализации данных. Вы можете создавать мощные и интерактивные визуализации данных с помощью React. Иллюстрация того, как использовать D3 с React, выглядит следующим образом:
Импортировать Реагировать, {useRef, useEffect} от«реагировать»;
Импортировать * как d3 отд3;
функциягистограмма({ данные }) {
константа ссылка = использоватьСсылка();
использоватьЭффект(() => {
константа svg = d3.select(ref.current);
константа ширина = svg.attr('ширина');
константа высота = svg.attr('высота');
константа х = d3.scaleBand()
.домен (данные.карта((д) => д.этикетка))
.диапазон([0, ширина])
.заполнение(0.5);
константа у = d3.scaleLinear()
.домен([0, d3.max (данные, (d) => d.value)])
.range([высота, 0]);
svg.selectAll('прямой')
.данные (данные)
.входить()
.добавить('прямой')
.аттр('Икс', (d) => x (d.label))
.аттр('у', (d) => y (d.значение))
.аттр('ширина', x.пропускная способность())
.аттр('высота', (d) => высота - y (d.value))
.аттр('наполнять', '# 007bff');
}, [данные]);
возвращаться (
Этот код определяет гистограмма компонент, который принимает данные prop в предыдущем фрагменте кода. Он называет useRef hook, чтобы сделать ссылку на компонент SVG, который будет использовать его для рисования контура.
После этого он отображает столбцы диаграммы и определяет шкалы с помощью хук useEffect(), который сопоставляет значения данных с координатами экрана.
6. Добавление функциональности в реальном времени с помощью WebSockets
Внедрение WebSockets устанавливает полностью работоспособный двусторонний канал, обеспечивающий непрерывную связь между клиентом и сервером. Они позволяют React постоянно добавлять полезные функции в веб-приложения, например доски обсуждений, оперативные обновления и предупреждения.
Вы используете WebSockets следующим образом с React:
Импортировать Реагировать, {useState, useEffect} от«реагировать»;
Импортировать ио от'socket.io-клиент';
функциячат() {
константа [сообщения, setMessages] = useState([]);
константа [inputValue, setInputValue] = useState('');
константа сокет = ввод(' http://localhost: 3001');
использоватьЭффект(() => {
сокет.включен('сообщение', (сообщение) => {
setMessages([...сообщения, сообщения]);
});
}, [сообщения, сокет]);
константа обработатьОтправить = (е) => {
e.preventDefault();
socket.emit('сообщение', входное значение);
установить значение ввода ('');
};
возвращаться (
{сообщения.карта((сообщение, я) => (
- {сообщение}</li>
))}
</ul>
В этом примере вы определяете чат компонент, использующий socket.io-клиент библиотека для подключения к серверу WebSocket. Вы можете использовать использование состояния крючок, чтобы справиться с изложением сообщений и ценностью информации.
Получив новое сообщение, использованиеЭффект ловушка регистрирует прослушиватель для запуска обновления события сообщения в списке сообщений. Чтобы очистить и отправить входное значение для сообщения о событии, существует ручкаОтправить функция.
После этого на экране отобразится как форма с полем ввода и кнопкой, так и обновленный список сообщений.
При каждой отправке формы, призывая ручкаОтправить функция неизбежна. Чтобы доставить сообщение на сервер, этот метод использует сокет.
7. Интеграция с React Native для мобильной разработки
React Local — это система для создания локальных универсальных приложений с использованием React, которые подключаются для продвижения портативных приложений для этапов iOS и Android.
Используя интеграцию React Native с React, вы можете использовать компонентный дизайн и повторно используемый код React на мобильных и веб-платформах. Это сокращает циклы разработки мобильных приложений и время выхода на рынок. React Native — это популярный фреймворк для разработки нативных мобильных приложений, в котором используется библиотека React.
Представляем жизненно важные программы и библиотеки, такие как Node.js, Ответить на локальный интерфейс командной строки, и Xкод или Android-студия, имеет основополагающее значение для дизайнеров, работающих с iOS и Android по отдельности. Наконец, простые компоненты React Native позволяют разработчикам создавать надежные и многофункциональные мобильные приложения для платформ iOS и Android.
Комбинируйте React с другими технологиями
React — популярная и эффективная библиотека для создания онлайн-приложений. React — отличный вариант для создания пользовательских интерфейсов, но он также используется с другими технологиями для расширения своих возможностей.
Интегрируя React с этими технологиями, разработчики могут создавать более сложные и продвинутые приложения, которые предлагают лучший пользовательский интерфейс. React и его экосистема инструментов и библиотек охватывают все необходимое для создания простого веб-сайта или сложного веб-приложения.