jQuery и React — популярные библиотеки JavaScript для фронтенд-разработки. В то время как jQuery — это библиотека для работы с DOM, React — это библиотека JavaScript для создания пользовательских интерфейсов.

Узнайте, как перенести существующее приложение с jQuery на React.

jQuery против Реагировать?

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

Зачем переходить с jQuery на React?

Есть несколько причин, по которым вы можете захотеть перенести свое приложение с jQuery на React.

  • React быстрее, чем jQuery: Если мы говорим о чистой производительности, React быстрее, чем jQuery. Это связано с тем, что React использует виртуальный DOM, который представляет собой JavaScript-представление фактического DOM. Это означает, что когда пользователь взаимодействует с приложением React, будут обновляться только те части DOM, которые изменились. Это более эффективно, чем полное манипулирование DOM в jQuery.
    instagram viewer
  • React более удобен в сопровождении: Еще одна причина перехода на React заключается в том, что он более удобен в сопровождении, чем jQuery. Это связано с тем, что компоненты React являются автономными, поэтому вы можете легко использовать их повторно. Это означает, что если вам нужно внести изменения в компонент React, вы можете сделать это, не затрагивая остальную часть кодовой базы.
  • React более масштабируем: Наконец, React более масштабируем, чем jQuery. Он использует компонентную архитектуру, которая более масштабируема, чем монолитный подход jQuery. Это означает, что вы можете легко расширять и изменять приложение React по мере необходимости.
  • React лучше поддерживает модульное тестирование: Когда дело доходит до модульного тестирования, React имеет лучшую поддержку, чем jQuery. Поскольку вы можете легко изолировать компоненты React, для них проще писать модульные тесты.

Как перенести ваше приложение с jQuery на React

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

Предпосылки

Прежде чем приступить к процессу переноса, необходимо выполнить несколько действий, чтобы все настроить. Во-первых, вам нужно создать React-приложение используя приложение create-реагировать.

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

Наконец, вы можете перейти к отдельным частям своей кодовой базы и обновить их соответствующим образом.

1. Обработка событий

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

$("кнопка").клик(функция() {
// сделай что-нибудь
});

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

сортКнопкарасширяетРеагировать.Компонент{
 обработатьклик() {
// сделай что-нибудь
 }
 оказывать() {
возвращаться (
<кнопка onClick={this.handleClick}>
 Нажми на меня!
</button>
 );
 }
}

Здесь компонент Button содержит определение метода handleClick(). Когда кто-то нажимает кнопку, этот метод запускается.

Каждый метод имеет свои плюсы и минусы. В jQuery события легко присоединяются и удаляются. Тем не менее, может быть трудно отслеживать их, если у вас много событий. В React вы определяете события в компонентах, что упрощает их отслеживание. Но их не так просто прикрепить и снять.

Если вы используете React, вам нужно будет обновить свой код, чтобы использовать новый метод обработки событий. Для каждого события, которое вы хотите обработать, вам нужно будет определить метод в компоненте. Этот метод запустится при срабатывании события.

2. Последствия

В jQuery вы можете использовать методы .show() или .hide(), чтобы показать или скрыть элемент. Например:

$("#элемент").показывать();

В React вы можете использовать хук useState() для управления состоянием. Например, если вы хотите показать или скрыть элемент, вы должны определить состояние в компоненте:

Импортировать { состояние использования } от "реагировать";
функцияКомпонент() {
константа [isShown, setIsShown] = useState(ЛОЖЬ);
возвращаться (
<див>
 {Показано &&<див>Привет!</div>}
<кнопка onClick={() => setIsShown(!isShown)}>
 Переключать
</button>
</div>
 );
}

Этот код определяет переменную состояния isShown и функцию setIsShown(). Реакция имеет различные виды крючков которые вы можете использовать в своем приложении, одним из которых является useState. Когда пользователь нажимает кнопку, переменная состояния isShown обновляется, и элемент отображается только при необходимости.

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

3. Получение данных

В jQuery вы можете использовать метод $.ajax() для получения данных. Например, если вы хотите получить некоторые данные JSON, вы можете сделать это следующим образом:

$.ajax({
 URL: "https://example.com/data.json",
 тип данных: "json",
 успех: функция(данные) {
 // делать что-нибудь с в данные
 }
});

В React вы можете использовать метод fetch() для получения данных. Вот как вы можете получить данные JSON, используя этот метод:

принести("https://example.com/data.json")
 .тогда (ответ => ответ.json())
 .тогда (данные => {
 // делать что-нибудь с в данные
 });

В jQuery метод $.ajax() прост в использовании. Тем не менее, может быть трудно обрабатывать ошибки. В React метод fetch() более подробный, но с ним проще обрабатывать ошибки.

4. CSS

В jQuery вы можете указать CSS по страницам. Например, если вы хотите стилизовать все кнопки на странице, вы можете сделать это, нацелившись на элемент кнопки:

кнопка {
 цвет фона: красный;
 белый цвет;
}

В React вы можете использовать CSS по-разному. Один из способов — использовать встроенные стили. Например, если вы хотите стилизовать кнопку, вы можете сделать это, добавив к элементу атрибут стиля:

<стиль кнопки = {{backgroundColor: 'красный', цвет: 'белый'}}>
 Нажми на меня!
</button>

Другой способ стилизации компонентов React — использование глобальных стилей. Глобальные стили — это правила CSS, которые вы определяете вне компонента и применяете ко всем компонентам в приложении. Для этого вы можете использовать библиотеку CSS-in-JS, например styled-components:

Импортировать стилизованный от 'стилизованные компоненты';
константа Кнопка = стилизованная.кнопка`
 цвет фона: красный;
 белый цвет;
`;

Нет правильного или неправильного выбора между встроенными и глобальными стилями. Это действительно зависит от ваших требований. Как правило, встроенные стили проще использовать для небольших проектов. Для более крупных проектов лучше использовать глобальные стили.

Легко разверните свое приложение React

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

Вы также можете бесплатно разместить свое приложение React на страницах GitHub.