Дослідження та реалізація адаптивного дизайну веб-сайту для оптимального відображення на різних пристроях з використанням бібліотеки React.js та її екосистеми

Abstract

Кваліфікаційна робота бакалавра на тему «Дослідження та реалізація адаптивного дизайну веб-сайту для оптимального відображення на різних пристроях з використання бібліотеки React.js та її екосистеми» виконана Глухом Олегом Миколайовичом, студентом Тернопільського національного технічного університету імені Івана Пулюя, Факультет комп'ютерно-інформаційних систем і програмної інженерії, кафедра програмної інженерії, група СП-42. Відомості про обсяг: сторінок – 83, рисунків – 18, частин – 4, додатків – 2, посилань – 14 Робота присвячена дослідженню адаптивного дизайну вебсайтів та використанню бібліотеки React для реалізації адаптивних вебдодатків. Реалізація адаптивного дизайну є необхідністю у сучасному світі, де користувачі активно використовують різні пристрої для доступу до інтернету. У вступі вказано мету роботи: вивчити принципи адаптивного дизайну та розробити прототип вебсайту за допомогою React для забезпечення оптимального відображення на різних пристроях. Завданнями роботи є вивчення історії, основних принципів адаптивного дизайну, можливостей React, розробка та тестування адаптивного вебсайту. Перший розділ охоплює теоретичні основи адаптивного дизайну, описує його історію, основні принципи, такі як гнучкі макети, зображення, медійні запити та інші сучасні методи. Також проводиться порівняння адаптивного, гнучкого та флюїдного дизайну.5 Другий розділ детально розглядає бібліотеку React, її основні концепції, такі як компонентний підхід, хуки, віртуальний DOM та односпрямований потік даних. Окрім того, аналізуються основні елементи екосистеми React, включаючи React Router, React Hook Form, Redux Toolkit та інші бібліотеки. Третій розділ містить практичну частину роботи: опис прототипу проєкт "Nuegas", концептуальний дизайн якого допомагає користувачам керувати завданнями та взаємодіяти з менторами. Продемонстровано вибір редактора коду, організацію структури проєкту, створення базового прототипу, опис структури та загальних підходів до адаптивного дизайну на конкретних прикладах реалізації платформи, та тестування вебсайту на різних пристроях і браузерах.

The diploma thesis is dedicated to the investigation of adaptive web design and the use of the React library for implementing adaptive web applications. The implementation of adaptive design is a necessity in the modern world, where users actively use various devices to access the internet. The bachelor's thesis on the topic "Research and Implementation of Adaptive Website Design for Optimal Display on Different Devices using React.js Library and its Ecosystem" was carried out by Ole Mykolayovych Glukh, a student of Ivano-Frankivsk National Technical University of Oil and Gas, Faculty of Computer and Information Systems and Software Engineering, Department of Software Engineering, group SP-42. Information about the scope: pages - 80, figures - 18, sections - 4, appendices - 2, references - 14. The introduction states the purpose of the work: to study the principles of adaptive design and develop a website prototype using React to ensure optimal display on different devices. The tasks of the thesis include studying the history, basic principles of adaptive design, React capabilities, development, and testing of an adaptive website. The first chapter covers the theoretical foundations of adaptive design, describing its history, basic principles such as flexible layouts, images, media queries, and other modern methods. A comparison of adaptive, flexible, and fluid design is also carried out. The second chapter thoroughly examines the React library, its main concepts such as a component-based approach, hooks, virtual DOM, and unidirectional data flow. In addition,7 the main elements of the React ecosystem are analyzed, including React Router, React Hook Form, Redux Toolkit, and other libraries. The third chapter contains the practical part of the work: a description of the "Nuegas" project prototype, the conceptual design of which helps users manage tasks and interact with mentors. It demonstrates the choice of code editor, project structure organization, creation of a basic prototype, description of the structure and general approaches to adaptive design with specific examples of platform implementation, and website testing on various devices and browsers.