Фреймворк react что это

Обновлено: 02.07.2024

От автора: пару недель назад я начала работать над своим первым приложением React. Это было не только мое первое приложение React, но и мое первое приложение React Native, поэтому многое для меня было в новинку.

В сравнении с миром Angular (и Ionic), я чувствовал, что все мои предвзятые представления и идеи переворачиваются с ног на голову. Мне удалось собрать (как я думаю) довольно приличное приложение, но у меня было много препятствий на этом пути. Это отчасти потому, что я предпочитаю учиться, просто погружаясь. Таким образом, многие из этих сложностей могли быть решены просто с помощью документации.

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

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

В чем разница между библиотекой и фреймворком?

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

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

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

Что это на самом деле означает?

Итак, я пересмотрела свои ожидания относительно того, что React сделает для меня. Когда мне нужно решить проблему, я знаю, что сначала нужно использовать Javascript, а не React.

Библиотеки компонентов React всегда предназначены для пользовательского интерфейса

Это то, что действительно не имело смысла для меня, когда я впервые столкнулась с этим. Взять, к примеру, библиотеку apollo-react. В этой библиотеке вы можете использовать элемент <Query>, который будет выполнять запрос GraphQL и возвращать результат прямо в разметке компонента.

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

Декларативные представления сделают код более предсказуемым и упростят отладку.

Основан на компонентах

Создавайте инкапсулированные компоненты с собственным состоянием, а затем объединяйте их в сложные пользовательские интерфейсы.

Поскольку логика компонента написана на JavaScript, а не содержится в шаблонах, можно с лёгкостью передавать самые разные данные по всему приложению и держать состояние вне DOM.

Научитесь однажды — пишите где угодно

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

React также может работать на сервере, используя Node.js и на мобильных платформах, используя React Native.

Простой компонент

JSX необязателен для работы с React. Попробуйте Babel REPL, чтобы увидеть JavaScript-код, полученный на этапе компиляции JSX.

Загрузка примера с кодом.

Компонент с состоянием

Помимо входных данных (доступных через this.props ), компонент поддерживает внутренние данные состояния (доступные через this.state ). Когда данные состояния компонента изменятся, React ещё раз вызовет render() и обновит отрендеренную разметку.

Загрузка примера с кодом.

Приложение

Используя props и state , можно создать небольшое приложение списка дел. В этом примере используется state для отслеживания текущего списка элементов, а также текста, введённого пользователем. Хотя обработчики событий встроены в разметку, они собираются и реализуются с помощью делегирования событий.

Загрузка примера с кодом.

Компонент с использованием внешних плагинов

React позволяет работать с другими библиотеками и фреймворками. В этом примере используется внешняя библиотека remarkable, чтобы в режиме реального времени преобразовать Markdown-синтаксис, введённый в элемент <textarea> .

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

Декларативные представления делают ваш код более предсказуемым и легче для отладки.

Основан на компонентах

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

Поскольку логика компонента написана на JavaScript вместо использования шаблонов, вы можете легко передавать различного типа данных через своё приложение и сохранять состояние вне DOM.

Учитесь один раз — пишите где угодно

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

React также может работать на сервере с помощью Node и может быть задействован на мобильных приложениях с использованием React Native.

Простой компонент

JSX необязателен и не его требуется использовать в React. Попробуйте REPL Babel, чтобы увидеть необработанный код JavaScript, созданный на этапе компиляции JSX.

Loading code example.

Компоненты с состоянием

Помимо ввода входных данных (доступных через this.props ), компонент может поддерживать внутренние данные состояния (доступные через this.state ). Когда данные состояния компонента изменяются, отрисованная разметка будет обновляться путём повторного вызова render() .

Loading code example.

Приложение

Используя props и state , мы можем создать небольшое приложение со списком дел. В этом примере используется state для отслеживания текущего списка элементов, а также текста, введённого пользователем. Хотя обработчики событий, по всей видимости, встроенные в разметку, они собираются и реализуются с помощью делегирования событий.

Loading code example.

Компонент, использующий внешние плагины

React — гибкий и предоставляет хуки, позволяющие вам взаимодействовать с другими библиотеками и фреймворками. В этом примере используется remarkable, внешняя библиотека для работы с Markdown, чтобы преобразовать значение <textarea> в режиме реального времени.

React-разработчики создают приложения на React, используя дополнительные инструменты: например, Redux, TypeScript или Jest. Это востребованная работа: на React.JS написаны Яндекс, Netflix, Facebook и другие известные сервисы. Фронтенд-разработчик в Яндекс.Практикуме Давид Роганов рассказал, что такое React, и составил гид для его изучения.

Что такое React

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

Вскоре после появления React и подобные ему решения (Vue.js, Svelte) практически захватили мир фронтенда: потому что они помогают решать проблемы, основываясь на идее декларативного программирования, а не на императивном подходе.

Декларативный подход состоит в описании конечного результата (что мы хотим получить).
При императивном подходе описываются конкретные шаги для достижения конечного результата (как мы хотим что-то получить).

Оказалось, что декларативный подход отлично подходит для создания интерфейсов, и он прижился в сообществе. Этот подход работает не только в вебе: сравнительно недавно компания Apple представила фреймворк SwiftUI, основанный на тех же принципах.

Чтобы лучше понять, о чём идёт речь, рассмотрим императивный и декларативный подходы на примерах. Напишем две версии простого приложения: на HTML и JS (императивный подход) и на React (декларативный подход). Наша программа будет показывать число и кнопку, и при нажатии на неё исходное число будет увеличиваться на единицу.

Приложение на чистом HTML и JS

В рамках императивного подхода пошаговые инструкции для создания программы выглядят так:

объявляем начальные значения программы: присвоили константам ссылки на DOM-элементы, устанавливаем начальное значение счётчика;
пишем обработчик increment, в котором мы увеличиваем текущее значение, и устанавливаем его в соответствующий элемент;
устанавливаем начальное значение счётчика (0);
устанавливаем обработчик для кнопки.

Обратите внимание, что HTML-разметка и JS-логика хранятся отдельно друг от друга.

Приложение на React

Из-за специфики библиотеки код на React может выглядеть непривычно для того, кто пишет на JavaScript: потому что в тэге <body> практически нет вёрстки. Но сосредоточимся непосредственно на приложении-счётчике: его основная логика находится на строках 25-40.

Вот, что в нём происходит:

Весь код находится внутри функции App. В React она и другие похожие функции называются компонентами. Компонент — это фрагмент интерфейса, который содержит разметку и, при необходимости, связанную с ней логику. Все React-приложения строятся на компонентах. При этом сам компонентный подход появился задолго до React, но здесь его совместили с декларативностью.

Сравнение двух вариантов приложения

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

Во втором, используя JSX-разметку и вспомогательные функции React, мы сразу описали результат, который хотим видеть. В этом и заключается отличие декларативного подхода от императивного.

Если сравнивать эти два приложения, то при использовании React можно выделить такие особенности:

Разметка и относящаяся к ней логика находятся рядом и связаны друг с другом. Это упрощает дальнейшую работу с кодом.
Выделен счётчик с кнопкой в компонент. Это значит, что мы можем очень легко его переиспользовать: достаточно на 44 строке написать ещё один тег <App />, и на странице появятся уже два независимых друг от друга счётчика.
Больше не нужно использовать идентификаторы для обращения к DOM-элементам, что также делает код более легко поддерживаемым.
Состояние компонента изолировано: нет никакой возможности модифицировать значение извне, если мы явно такое не задумывали. Благодаря этому поток данных в приложении становится более предсказуемым, что упрощает разработку и отладку.

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

Раньше в различных статьях часто можно было встретить заблуждение, что благодаря виртуальному DOM React быстрый. Следует понимать, что при прочих равных React-приложение не может быть быстрее того, что написано на чистом JS хотя бы потому, что сам React написан и выполняется на JS.

Особенности React

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

Эта библиотека действительно может упростить жизнь разработчикам:

Однако при использовании React есть особенности, которые важно учитывать:

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

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

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

Для каких проектов подойдёт React

Резюмируя все особенности, можно выделить несколько типов проектов, которым подойдет React.

Если проект планирует расширяться, и над ним работает или будет работать команда разработчиков. Потому что в таком случае использование известной технологии поможет проще договариваться между разработчиками и лучше поддерживать код.
Средним и крупным проектам будет полезен компонентный подход, который в том числе лежит в основах React. Это упростит структурирование и переиспользование кода и даст выигрыш в долгосрочной перспективе.
Legacy-проектам, которым предстоит пройти через рефакторинг. Потому что React можно добавлять в уже существующий проект, обновляя кодовую базу постепенно и точечно.

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

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

Как изучить React

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

План изучения React может выглядеть так:

— способы подключения React к проекту;

— знакомство с JSX;

— знакомство с компонентами: стейт, пропсы, жизненный цикл;

— виды компонентов: классы и функциональные компоненты, их отличия;

— работа с формами;

— разработка простого приложения на React.

— React хуки, кастомные хуки, рефы.

— Популярные шаблоны: HOCs, render props, глупые/умные компоненты, controlled/uncontrolled components.

— сторонние библиотеки (redux, mobx и другие).

Диагностика проблем с производительностью, использование профайлера и оптимизация приложений на React.

Более продвинутые концепции:

— принципы интеграции с другими js-библиотеками;

— lazy loading компонентов;

Изучение работы под капотом:

— виртуальное дерево и алгоритм reconciliation;

— понимание концепций и устройства reconciler и renderer;

— написание своего рендерера.

Почти все эти темы можно изучить на официальном сайте React.

Для тех, кто уже хорошо знаком с React, есть отличная статья «Build your own React» — она поможет глубже разобраться, как работает React изнутри. Ещё можно посмотреть записи выступлений с конференции React Conf.

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

Почему сейчас стоит изучать React

Во-первых, React — это популярная библиотека, которая ещё долго будет актуальной. Это значит, что всегда можно найти проект, написанный на React, и поработать на нём. А на людей, которые хорошо разбираются в React, есть спрос на рынке.

Во-вторых, это целый дивный новый мир со своим огромным сообществом. React помогает взглянуть на разработку интерфейсов совершенно по-другому — через призму декларативного программирования. Это полезно для общего развития и расширения кругозора, а полученные знания упростят изучение других подобных библиотек и технологий (Vue.js, Svelte или даже SwiftUI). Кроме этого, многие принятые в сообществе соглашения, шаблоны и подходы сами по себе помогают писать более хороший и поддерживаемый код.

Но также важно понимать, что React — это библиотека на языке JS. И прежде чем изучать React, нужно на хорошем уровне овладеть JS, HTML и CSS. Это ускорит освоение React, а также повысит ценность разработчика на рынке: потому что знание фундаментальных вещей помогает подобрать технологию, лучше всего подходящую для решаемой задачи — будь то React или что-то другое.

React – самая популярная библиотека JavaScript для разработки пользовательского интерфейса (UI). React предлагает отличный ответ на входные данные пользователя, используя новый метод рендеринга веб-сайтов.

Компоненты этого инструмента были разработаны Facebook. Он был запущен как инструмент JavaScript с открытым исходным кодом в 2013 году. В настоящее время React опережает своих основных конкурентов, таких как Angular и Bootstrap, две наиболее продаваемые библиотеки JavaScript своего времени.

В этой статье мы поможем вам понять, что такое React и как он может быть полезен вам как front-end разработчику.

Зачем Использовать React?

React используется сотнями крупных компаний по всему миру, включая Netflix, Airbnb, American Express, Facebook, WhatsApp, eBay и Instagram. Это доказательство того, что у инструмента есть ряд преимуществ, с которыми невозможно конкурировать.

Вот некоторые из причин, чтобы использовать его:

1. Простота в Использовании

React – это JavaScript библиотека GUI (англ) с открытым исходным кодом, сосредоточенная на одной конкретной цели – эффективном выполнение задач в рамках разработки пользовательского интерфейса. Его можно отнести к категории “V” в архитектурном шаблоне MVC (модель-вид-контроллер).

Как разработчик JavaScript, вы легко поймёте основы React. И уже за несколько дней сможете начать разрабатывать своё первое приложение.

Чтобы расширить и закрепить ваши знания, продолжайте читать. Прекрасный источник информации – руководства на официальном сайте. Там вы также найдёте много полезного о том, как использовать инструмент: видео, учебные пособия и другие важные данные.

2. Поддерживает Java-компонент Многократного Использования

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

3. Простое Написание Компонентов

Компонент React создать проще, поскольку он использует JSX (англ), опциональное расширение синтаксиса JavaScript, которое позволяет комбинировать HTML с JavaScript.

JSX – это отличная смесь JavaScript и HTML (англ). Оно делает весь процесс написания структуры сайта более понятным. Кроме того, расширение также значительно упрощает рендеринг нескольких функций.

Хотя JSX может быть не самым популярным расширением синтаксиса, оно доказало свою эффективность при разработке специальных компонентов или приложений большого объема.

4. Лучшая Производительность с Virtual DOM

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

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

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

5. SEO Friendly

React позволяет создавать пользовательские интерфейсы, к которым можно получить доступ с различных поисковых систем. Эта особенность является огромным преимуществом, потому что не все JavaScript-фреймворки оптимизированы под SEO (англ).

Поскольку React может ускорить ваше приложение, он также может улучшить результаты SEO. Скорость загрузки играет важную роль в SEO-оптимизации (англ).

Однако стоит отметить, что React – это просто библиотека JavaScript. И поэтому он не может сделать всё сам. Вам придётся использовать дополнительные библиотеки для управления состоянием, маршрутизации и взаимодействий.

Как работает React?

Возможно, вы удивитесь, если мы скажем, что HTML-код можно писать на JavaScript (англ). Но именно так работает React.

Создать Dom-узел в React можно через функцию createElement . Например:

Как вы могли заметить, синтаксис в HTML-коде очень похож на XML-компоненты. Однако вместо традиционного класса DOM React использует className .

У тегов JSX есть имя, потомки и атрибуты. Кавычки в атрибутах JSX означают строки. Этот элемент похож на JavaScript.

Кроме того, числовые значения и выражения нужно помещать в фигурные скобки.

Приведённый выше пример хорошо иллюстрирует синтаксис в React, поскольку инструмент использует расширение JSX. По сути, это сочетание HTML и JavaScript.

Вот пример React, написанного с использованием JSX:

Чтобы разобраться, вот несколько примечаний относительно тегов HTML выше:

<MyCounter> имеет атрибут count, который принимает числовое выражение в качестве значения.
GameScores – это литерал объекта, который имеет две пары значений и свойств.
<DashboardUnit> – это блок XML , который рендерится на странице.
Scores = : атрибут Scores получает значение из объекта GameScores, определённого выше.

Большая часть React написана с использованием JSX (JavaScript XML), а не стандартного JavaScript (JS). Здесь важно отметить, что это делается для того, чтобы максимально упростить процесс создания React-компонентов.

Вы можете создать компонент React на стандартном JavaScript, но мы гарантируем, что он будет супер беспорядочным.

Кроме того, идея JSX в React заключалась в том, что Facebook (как первоначальный разработчик) хотел создать один конкретный тип расширения синтаксиса с чёткой и однозначной конфигурацией.

Выводы

Надеемся, что эта статья дала вам некоторое представление о том, что такое React и как он на самом деле работает. И в завершение всего этого хотим выделить несколько основных моментов по теме:

React был создан Facebook.
Он используется многими крупными брендами и компаниями по всему миру.
React – это библиотека JavaScript. Тем не менее, его также можно отнести к категории фреймворков.
Этот фреймворк не может работать в одиночку, вам потребуются дополнительные элементы для таких целей, как маршрутизация, управление и т. д.
React использует виртуальный DOM, чтобы обеспечить лучшую оптимизацию вашей страницы.
Этот фреймворк прост в использовании и оптимизирован под SEO.
Поддерживает многократное использование компонентов.
Использует расширение JSX, которое по сути является сочетанием HTML и JavaScript.
React использует JSX, чтобы упростить создание компонентов, а не потому, что он работает лучше.

Ольга уже около пяти лет работает менеджером в сфере IT. Написание технических заданий и инструкций — одна из её главных обязанностей. Её хобби — узнавать что-то новое и создавать интересные и полезные статьи о современных технологиях, веб-разработке, языках программирования и многом другом.

Читайте также: