Фреймворк React — глоссарий

Глоссарий
Поделиться:

Основные концепции

React — это популярная библиотека на языке JavaScript

React JavaScript зачастую ошибочно называют фреймворком (framework), но это не так. Во-первых, его использование не обязывает к конкретному подходу, не формирует структуру проекта. А во-вторых, JavaScript-библиотека (library) выполняет одну задачу: отображает структуру интерфейса на странице, синхронизируя с данными приложения. Однако, для полной реализации проекта этого недостаточно.

Ключевые компоненты и библиотеки

Virtual DOM

Виртуальное DOM-дерево — это облегченный вариант реального DOM (Document Object Mode), который используется для оптимизации обновления пользовательского интерфейса. Когда что-то меняется в приложении, сначала создается, а потом хранится в кэше виртуальное DOM-дерево, что ускоряет процесс обновления web-приложения и улучшает производительность.

JSX синтаксис

JSX (JavaScript XML) — это XML-подобный синтаксис для написания кода внутри JS. Благодаря JSX создание и чтение компонентов становится проще, так как разработчики применяют в коде знакомую разметку, похожую на HTML.

Компоненты

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

Props и State

Props и State — механизмы управления данными. Props (свойства) используются для передачи данных от одного компонента к другому. State (состояние) хранит данные, которые могут изменяться внутри component и влияют на его отображение.

Props и State помогают динамически обновлять интерфейс в зависимости от действий пользователя или внешних данных.

Hooks и их использование

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

Экосистема и совместимые библиотеки

React Router

Библиотека, предназначенная для управления маршрутизацией в одностраничных приложениях (SPA). Router определяет, какие компоненты должны быть отображены в зависимости от URL-адреса.

Router обеспечивает пользователям плавную навигацию между страницами или разделами приложения.

Redux и Context API

Redux — библиотека для управления глобальным состоянием, которая помогает сохранять State приложения и передавать между компонентами.

Context API — встроенная альтернатива для управления State, которая помогает передавать данные через дерево Components без необходимости пропускать props через каждый уровень.

Styled Components

Styled Components — библиотека для стилизации компонентов, которая помогает писать стили с использованием Java Script. Стили далее инкапсулируются внутри Components, что делает код более чистым и поддерживаемым.

Axios и Fetch API

Axios и Fetch API — это инструменты для выполнения HTTP-запросов, которые помогают получать и отправлять данные на сервер.

Axios обеспечивает более удобный синтаксис и дополнительные функции по сравнению с Fetch API.

Принципы создания интерфейсов

Создание основывается на следующих принципах:

  • Components: модульные блоки интерфейса, которые можно повторно использовать и вкладывать.
  • Виртуальное DOM-дерево: эффективная синхронизация данных с реальным DOM без лишних перерисовок.
  • State и Props: управление внутренним состоянием Components и передача данных через Props.
  • Хуки: управление состоянием и выполнение побочных эффектов без классов.
  • Повторное использование кода: ускорение программирования и улучшение читаемости кода.

Преимущества и недостатки для разработки

Преимущества библиотеки

Технология оптимизирована для работы с браузером и способна обрабатывать большие объемы информации без потери скорости. Помогает легко разбивать приложение на Components и модули, что упрощает сопровождение и развитие. Поддерживает современную верстку HTML и CSS, чтобы создавать привлекательные и функциональные структуры.

Кроме того, React предоставляет наборы инструментов для работы с анимацией, графикой, событиями и состоянием элементов. А также пользуется поддержкой огромного количества разработчиков и компаний, что обеспечивает доступность ресурсов, документации и примеров кода.

Ограничения и проблемы

Популярная JS-библиотека, как и многие другие инструменты разработки, имеет некоторые ограничения и недостатки, такие как:

  • Требует твердых знаний JavaScript и основ фреймворков, что вызывает трудности у новичков.
  • Нуждается в поддержке браузера: требует современной версии браузера, что ограничивает использование на устаревших устройствах.
  • Управление State может быть сложным, особенно в больших проектах.
  • Оставляет решение большинства вопросов по настройке и сопровождению на разработчика, что требует времени и усилий.

Примеры использования в веб-разработке

React используется множеством компаний и проектов. Например, применяется в Яндекс.Диск и Рамблер, где требуется высокая производительность и масштабируемость. Wikipedia использует код на React JS для отображения интерактивных элементов на страницах сайта, что улучшает восприятие контента и взаимодействие с пользователями.

Google Maps использует JS-библиотеку, чтобы создавать интерактивные карты и добавлять функциональные элементы. YouTube применяет ее для создания плавной навигации и быстрого отклика при просмотре видео и управлении контентом.

Ответы на часто задаваемые вопросы

Что такое React? Это популярная библиотека на языке JavaScript, предназначенная для создания интерактивных функциональных интерфейсов и веб-приложений.

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

Какие главные преимущества? Высокая производительность, повторное использование компонентов и сильная экосистема.

Понравилась статья? Запишись в академию ifellow и узнай еще больше!

  • 3 направления
    15+ экспертов

    Школа тестирования

    • Функциональное тестирование
    • Курс нагрузочного тестирования
    • Курс автоматизированного тестирования
    Подробнее
    Иконка мини логотипа Иконка мини логотипа
  • 2 направления
    10+ экспертов

    Школа аналитики

    • Курс системного анализа Junior
    • Курс системного анализа Middle
    Подробнее
    Иконка мини логотипа Иконка мини логотипа
  • 1 направление
    2 эксперта

    Школа Java Разработки

    • Курс Java разработка
    Подробнее
    Иконка мини логотипа Иконка мини логотипа

Оставьте заявку на обучение в академии iFellow

Иконка мини логотипа

Нажимая на кнопку, вы соглашаетесь с Политикой конфиденциальности персональных данных

Задний фон блока

Файлы cookie обеспечивают работу наших сервисов. Используя наш сайт, вы соглашаетесь с нашими правилами в отношении этих файлов.