ADVANTAGES AND POSSIBILITIES OF REACTJS IN MODERN WEB DEVELOPMENT Текст научной статьи по специальности «Компьютерные и информационные науки»

При розглядi процесiв у резонансних схемах та складанн розрахункових схем замiщення будуть використовуватися наступт припущення:

• розподiленi активнi опори, iндуктивностi, eмностi електроустаткування вважаються лшшними елементами i розглядаються як зосереджет параметри;

• не враховуються активт опори й iндуктивностi ошиновки електричних пiдстанцiй;

• не враховуються втрати на гiстерезiс i вихровi струми в магнггопроводах трансформаторiв;

• iндуктивностi розсiювання трансформаторiв вважаються лiнiйними.

Розподшет параметри електроустаткування станцiй i шдстанцш (активнi опори, iндуктивностi, eмностi) розглядаються як зосереджеш, осшльки !х довжина в порiвняннi з довжиною хвилi промислово! напруги на калька порядив менше.

При складаннi розрахунково! схеми замщення необхiдно враховувати, що в резонансних схемах присутш нелiнiйнi iндуктивностi магнiтопроводiв трансформаторiв, i отже, до тако! схеми не можна повною мiрою застосовувати методи перетворення лшшних електричних к1л. Виходячи з цього, в розрахунковш схемi обираються дшянки, як1

УДК 002.304

складаються тшьки з лiнiйних елеменпв i перетворюються за допомогою методiв перетворення лiнiйних електричних к1л, а перетворення частин розрахунково! схеми замщення, що залишилися, буде залежати ввд математичного моделювання магнiтопроводiв трансформаторiв.

Висновки

1. Для збудження друго!, 2n - i' гармонiки вхвдний отр тни, розглянуто! з боку автотрансформатора i закорочено! з боку джерела, буде eмнiсним при як1й-небудь з частот fn, де п = 2, 4, 6,...;

2. Якщо eмнiсний опiр виявиться досить великим, що наближаеться по величинi до опору холостого ходу трансформатора при тш же частот^ то амплиуда напруги основно! частоти на виводах трансформатора буде досить великою.

Лтратура

1. Лiбкiнд М.С. Вищ1 гармошки парно! кратносп в довгих лшях електропередачi.// Изв. АН СРСР, ОТН, 1956, № 7.

2. Лiбкiнд М.С. Вищi гармонiки, що генеруються трансформаторами./ Изв. АН СРСР, М., 1962,- 100 с.

Shogenov A.M.

Lead Developer, Group of companies «Innotech», expert in software development

ADVANTAGES AND POSSIBILITIES OF REACTJS IN MODERN WEB DEVELOPMENT

Шогенов Алим Музаринович

Ведущий разработчик, Группа компаний «Иннотех», эксперт в области разработки программного обеспечения

ПРЕИМУЩЕСТВА И ВОЗМОЖНОСТИ REACTJS В СОВРЕМЕННОЙ ВЕБ-РАЗРАБОТКЕ

DOI: 10.31618/ESSA.2782-1994.2023.1.93.392

Summary: Studied the features of creating web applications using ReactJS technology. The main advantages and disadvantages of this approach are described, as well as the main methods and areas of application are considered.

Аннотация: Изучены особенности создания веб-приложений с использованием технологии ReactJS. Описаны основные преимущества и недостатки данного подхода, а также рассмотрены основные способы и области применения.

Key words: web development, adaptive application development, front-end library, ReactJS.

Ключевые слова: веб-разработка, разработка адаптивных приложений, фронтенд-библиотека, ReactJS.

Сегодня возникает проблема создания интерфейсов, которые обновляются быстро, и необходимости загрузки большого объема данных на сайт без перезагрузки. В данной статье мы исследуем применение ReactJS в современной веб-разработке и выявим достоинства и недостатки его использования.

React(иногда также называемый Reactjs или ReactJS) - это библиотека JavaScript с открытым

исходным кодом, которая используется для разработки пользовательских интерфейсов. Она основана на языке программирования JavaScript. [1] JavaScript является широко используемым встраиваемым языком программирования для доступа к объектам приложений. Он находит наибольшее применение в браузерах, где используется в качестве скриптового языка для

создания интерактивности на веб-страницах. JavaScript обладает следующими особенностями

• Динамическая типизация - типы данных определяются автоматически во время выполнения программы.

• Слабая типизация - не требуется явное указание типов переменных, что упрощает разработку.

• Автоматическое управление памятью -сборщик мусора автоматически освобождает память от неиспользуемых объектов.

• Прототипное программирование - объекты могут быть созданы на основе других объектов, называемых прототипами.

• Функции как объекты первого класса -функции могут быть переданы как аргументы, сохранены в переменных и возвращены из других функций.

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

Для упрощения процесса разработки программного обеспечения появилось множество JavaScript-библиотек.

Одной из таких библиотек является React, которая предназначена для создания

пользовательских интерфейсов. Она имеет несколько выдающихся особенностей, включая поддержку JSX - языка программирования, который напоминает синтаксис HTML и компилируется в JavaScript. Разработчики могут достичь высокой производительности приложений благодаря использованию Virtual DOM. React также позволяет создавать изоморфные приложения, что позволяет избежать ситуаций, когда пользователь ожидает завершения загрузки данных, прежде чем увидеть содержимое на экране. Высокая степень повторного использования кода способствует лучшей тестовой покрытию и обеспечивает более высокий контроль качества. React отлично подходит для создания крупных приложений. Его компонентная архитектура и эффективный механизм рендеринга упрощают управление и масштабирование обширных кодовых баз. Кроме того, React обеспечивает инструменты и библиотеки, включая Redux, которые помогают разработчикам управлять состоянием приложения и улучшить структуру кода. Наконец, React имеет активное и обширное сообщество разработчиков, которое предоставляет поддержку и ресурсы для создания и поддержки больших приложений. Кроме того, используя React Native, разработчики могут создавать мобильные приложения для Android и iOS, используя свой опыт в JavaScript и React разработке. [2]

1 2

3

4

5

6

7

8

11 12

15

16

17

18

19

20 21 22

23

24

25

26

27

28

29

30

31

32

33

34

35

React был создан Джорданом Уокером, разработчиком программного обеспечения из Facebook. Он получил влияние от XHP -компонентного HTML фреймворка для PHP. React впервые был использован в новостной ленте Facebook в 2011 году и затем в ленте Instagram в

2012 году. Исходный код React был открыт в мае

2013 года на конференции «JSConf US».

В феврале 2015 года на конференции Facebook «React.js Conf» был анонсирован React Native -фреймворк, позволяющий разрабатывать нативные приложения для Android, iOS и UWP с использованием React. Исходный код React Native был открыт в марте 2015 года.[3]

18 апреля 2017 года Facebook объявил о React Fiber - переписанной и оптимизированной версии React. React Fiber стала основой для разработки всех будущих функций и улучшений.

В React.js 17, жизненный цикл компонента осуществляется с использованием хуков. Вот основные этапы жизненного цикла компонента в

React.js 17 без сравнения с методами жизненного цикла:

1. Создание компонента:

• Определяется функциональный компонент с использованием хука useState для управления состоянием компонента.

• Определяются необходимые свойства (props), которые будут переданы компоненту.

2. Рендеринг компонента:

• В функциональном компоненте определяется JSX-шаблон для отображения элементов.

• Компонент возвращает JSX-элемент, который будет отрисован.

3. Монтирование компонента:

• Используется хук useEffect с пустым массивом зависимостей для эмуляции метода componentDidMount. Внутри хука useEffect можно выполнять необходимые действия при монтировании компонента, например, получение данных с сервера.

import { BrowserRouter, Route, Routes > from 'react-router-dom";

import { Main } from './pages/Main';

import { MyProfit > from './pages/MyProfit1;

import { Profile > from './pages/Profile ;

import './styles/main.scss1;

import { AuthProvider > from 1./context/AuthContext'; import 1react-toastify/dist/ReactToastify.ess1; import { ToastContainer } from 1react-toastify1j

const App = () => {

return {

<AuthProvider>

<BrowserRouter> <Routes>

<Route path-"/" eZe/ne/it={<Main />} /> <Route path-'/proiile" eZement={<Profile />} /> <Route pat/?-"/my-profit" element {<MyProfit />} /> </Routes> </BrowserRouter> <ToastContainer

position-"bottom-right"

autoClose {10000}

hideProgressBar={false}

nenfestOnrop={false>

closeOnClick

rtl={false>

pauseOnFocusLoss

draggable

pauseOnHover

/>

</AuthProvider> export default App;

Рис. 1. Пример главного компонента приложения на ReactJS

4. Обновление компонента:

• Используется хук useEffect с массивом зависимостей, содержащим состояния или свойства, от которых зависит компонент. Внутри хука useEffect можно выполнять необходимые действия при обновлении компонента.

5. Демонтаж компонента:

• Используется хук useEffect с функцией-эффектом, который возвращает функцию очистки. Внутри этой функции можно выполнять необходимые действия перед удалением компонента, например, отписываться от событий или очищать ресурсы. [4]

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

Связывание JavaScript и HTML через JSX сделало компоненты более понятными. И хотя смешивание HTML и JavaScript может вызвать некоторое недоумение, на практике работа с JSX компонентами оказывается очень удобной. [5]

Обычно разрабатывая, мы стараемся разделять представление (HTML) от функциональности (JavaScript). Однако это часто приводит к созданию монолитных JavaScript файлов, которые содержат всю функциональность для одной страницы. При таком подходе сложно следить за потоком данных JS->HTML->JS, что может привести к неудобствам.

Связывание функциональности и разметки через JSX и упаковка их в независимые «компоненты» сделало процесс разработки более приятным и улучшило в общем качество кода. Теперь JavaScript "понимает" ваш HTML, и их объединение стало логичным и эффективным подходом.

Рендеринг React на сервере - это важная возможность.

Если вы разрабатываете публичный сайт или приложение и используете только клиентский рендеринг, то это может привести к медленной производительности, как в случае с SoundCloud. Однако, если вы рендерите React на сервере, вы можете достичь значительного улучшения производительности, как видно на примере StackOverflow, которое использует исключительно серверный рендеринг.[6]

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

/ \ / \ 0 N t - \

ф I @ © # NETFLIX -

Facebook j Instagram WhatsApp Twitter Netflix Yahoo! Mail

111 New York

Dropbox Atlassian Salesforce Codecademy Taskade

' Times

Postmates Reddit Cloudflare Tesla BBC GitHub

Br * Ш O .

Asana Flipboard PayPal Podio Uber Airbnb

* x s & a en

Walmart Zendesk Skype SoFi Shopify Twitch

Рис. 1. Тор 30 компаний, которые активно используют React JS[7]

Постоянное развитие и поддержка React квалифицированными разработчиками делают эту библиотеку надежным и перспективным инструментом. Ее популярность растет с каждым годом, что говорит о том, что она будет продолжать улучшаться и развиваться в будущем. Она действительно исполнила свою обязанность как программная библиотека, позволяющая разработчикам создавать большие программные приложения с изменяющимися данными. Благодаря этому, она является превосходным выбором для компаний всех масштабов - от начинающих стартапов до корпоративного уровня - в практически любой сфере бизнеса. [8]

Список литературы:

1. Максимов, Н.В. Современные информационные технологии: Учебное пособие / Н.В. Максимов, Т.Л. Партыка, И.И. Попов. - М.: Форум, 2013. - 512 с.

2. Коновалов А. А. Реализация масштабируемого React-приложения с современными подходами взаимодействия с внешними API // Актуальные исследования. 2022. №36 (115). С. 43-48.

3. Голубенко, Н.Б. Библиотека XXI века: информационные технологии: новая концепция / Н.Б. Голубенко. - СПб.: Проспект Науки, 2013. -192 с.

4. Бартенев, В.А. Современные и перспективные информационные ГНСС-технологии в задачах высокоточной навигации / В.А. Бартенев, М.Н. Красильщиков. - М.: Физматлит, 2014. - 192 с.

5. Мамбетов Р.А. ТЕХНОЛОГИЯ РАЗРАБОТКИ ИЗОМОРФНОГО REACT ПРИЛОЖЕНИЯ // Экономика и социум. 2019. №5 (60). С. 902-905.

6. Берьянов М. С., Салахов И. Р., Иванов М.Д.ИССЛЕДОВАНИЕ СОВРЕМЕННОГО СТЕКА REACT РАЗРАБОТКИ В 2022 ГОДУ // Столыпинский вестник. 2022. №8. C. 4767-4785.

7. Top 30 Companies Using React JS Development [Электронный ресурс]. Режим доступа: https://jaydevs.com/top-companies-using-react-js/. Дата доступа 29.08.2023.

8. Байнов А. М., Кривоногова А. Е., Николаев А. С., Богомолова О. И. Обзор современных фреймворков и инструметов, используемых для разработки web-приложений // Наука без границ. 2020. №1 (41). С. 19-23.