АНАЛИЗ WEB-РАЗРАБОТКИ НА REACTJSС АДАПТИВНЫМ ДИЗАЙНОМ Текст научной статьи по специальности «Компьютерные и информационные науки»

УДК 004.514

АНАЛИЗ WEB-РАЗРАБОТКИ НА REACTJSC АДАПТИВНЫМ ДИЗАЙНОМ

Е. С Волнейкина, Д. К. Гек Научный руководитель - В. В. Кукарцев

Сибирский государственный университет науки и технологий имени академика М. Ф. Решетнева Российская Федерация, 660037, г. Красноярск, просп. им. газ. «Красноярский рабочий», 31

E-mail: neroz98@yandex.ru

В данной статье рассматривается разобраны основные плюсы и минусы использование в веб-разработке фрейморкаreact, а также описываются основные методы и направления использования.

Ключевые слова: фреймворки, библиотекиreact, сравнение, фронтенд, web-разработка, разработка на языке js.

ANALYSIS OF WEB DEVELOPMENT ON REACT JS WITH ADAPTIVE DESIGN

E. S. Volneykina, D. K. Gek Scientific supervisor - V. V. Kukartsev

Reshetnev Siberian State University of Science and Technology 31, Krasnoyarskii rabochii prospekt, Krasnoyarsk, 660037, Russian Federation

E-mail: neroz98@yandex.ru

This article examines the main pros and cons of using the react framework in web development, as well as describes the main methods and directions of use.

Keywords: frameworks, react libraries, comparison, frontend, web development, js development.

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

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

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

React- это библиотека для создания SPA, от компании Facebook. Он был разработан в 2013 году и почти сразу приобрел огромную популярность. Его исходный код выложен на github, актуальной версией является 16.3.0.

React основан на компонентном подходе к разработке. Это означает, что необходимо разбить страницу на множество мелких составляющих, чем меньше, тем лучше, а затем объединять их в компонентах побольше. Разбиение на компоненты удобно тем, что каждый компонент можно переиспользовать, причем в эти компоненты можно передавать различные данные, от которых будет зависеть, как выглядит компонент [2-3].

Следует отметить, что React использует JSX, который выглядит как HTML, но на самом деле им не является. JSX на самом деле - это самый настоящий JavaScript который однако пишется с помощью тегов, а потом преобразуется в код JavaScript. На самом деле, можно сразу самому писать такой код, однако обычно это не практикуется, поскольку уменьшается читабельность кода.

Секция «Информационно-экономические системы»

Главной особенностью React является виртуальный DOM. Это некая облегченная копия обычного DOM. Все манипуляции React на самом деле производит именно с виртуальной копией.

Именно к виртуальному DOM обращается приложение за состоянием компонентов.

Изменяется сначала тоже виртуальный DOM, и только потом, если он отличается от реального, изменяется и реальный, причем за минимальное количество манипуляций.

Основной используемой функцией React является функция render. Именно в ней происходит отрисовка компонентов и, в конечном итоге, всего приложения. Помимо этого, существует достаточно большое количество других методов жизненного цикла. Сам жизненный цикл проходит так: сначала происходит инициализация компонента, потом происходит рендеринг компонента, затем же компонент удаляется из DOM. Все эти вещи связаны с функциями жизненного цикла. Плюс ко всему, есть дополнительные функции, происходящие при изменении props, говорящие, нужно ли нам обновлять компонент и так далее [4-7].

Стоит сказать пару слов о props. В React это некие неизменяемые данные, которые в чистом React приходят из родительского компонента. Они позволяют создавать некие динамические компоненты, в зависимости от состояния родительского компонента [8].

Под состоянием подразумевается такая вещь, как state, которая, в отличии от props, может меняться с помощью специальной функции setState.

На этих видах данных и основан React. Однако нельзя не упомянуть о еще одном методе хранения состояния - популярной библиотеки Redux. Хотя Redux можно использовать с любой другой библиотекой, в первую очередь его всегда связывают с React. Redux подразумевает, что все данные о состоянии хранятся в одном месте. Эти данные не изменяемы, если нам нужно записать туда какое-либо отличающееся от прежнего значение, нам необходимо скопировать старое состояние, вложить туда новые данные, а затем получившийся объект сделать состоянием. Происходит это все с помощью специальных функций-редьюсеров. Именно они таким образом "меняют" состояние. На первый взгляд может показаться, что это громоздко и непонятно, но на самом деле такая архитектура имеет кучу преимуществ, про которые можно написать отдельную статью [9, 10].

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

Библиографические ссылки

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

2. Gek D. et al. The problem of SEO promotion for the organization's web representation //SHS Web of Conferences. - EDP Sciences, 2019. - Т. 69. - С. 00122.

3. Tynchenko V. S. et al. Application of Kohonen self-organizing maps to the analysis of enterprises' employees certification results //IOP Conference Series: Materials Science and Engineering. - IOP Publishing, 2019. - Т. 537. - №. 4. - С. 042010.

4. Fedorova N. V. et al. Problems of the digital economy development in the transport industry //IOP Conference Series: Earth and Environmental Science. - IOP Publishing, 2019. - Т. 315. - №. 3. - С. 032047.

5. Tynchenko V. S. et al. Identifying duplicated ads on property selling and renting websites //Journal of Physics: Conference Series. - IOP Publishing, 2019. - Т. 1333. - №. 7. - С. 072025.

6. Kukartsev V. V. et al. The software application for cargo transportation routes optimization //Journal of Physics: Conference Series. - IOP Publishing, 2020. - Т. 1582. - №. 1. - С. 012051.

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

8. Барский, А.В. Параллельные информационные технологии: Учебное пособие / А.В. Барский. - М.: Бином, 2013. - 503 с.

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

10. Дарков, А.В. Информационные технологии: теоретические основы: Учебное пособие / А.В. Дарков, Н.Н. Шапошников. - СПб.: Лань, 2016. - 448 с.

© Волнейкина Е. С., Гек Д. К., 2021