Что такое React?

Обновлено: Декабрь 26, 2022

626

Поделиться в:

#React#JavaScript#JS# jQuery#HTML#CSS#DOM

Автор: Натали

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

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

React - библиотека JavaScript

JavaScript является динамическим языком программирования и широко используется для разработки веб-приложений. Он очень лёгкий и поддерживается большинством современных браузеров. Более того, JavaScript поддерживает как объектно-ориентированное, так и функциональное программирование. JS имеет множество фреймворков и библиотек, которые мы можем выбирать в зависимости от потребности решить ту или иную задачу.

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

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

Вначале была библиотека jQuery, и она стала огромным прорывом в написании межбраузерного кода на JavaScript. И так каждое новое поколение библиотек и фреймворков привносило что-то новое и уникальное. В этом отношении не исключение и React.
В контексте решаемых задач, исключая навигацию и обработку данных, React трудно сравнивать с фреймворками (например, такими как Backbone, Ember, Angular и т.д.) и более целесообразно сравнивать с библиотеками и шаблонизаторами, решающими проблемы, связанные с пользовательским интерфейсом. Однако, используя “стек“ React’а, можно добиться отличных результатов в разработке быстрых, легко масштабируемых веб-приложений.

Есть несколько способов начать работу с React. Одним из них является создание одностраничного приложения, используя Node.js.

Для этого нам понадобится любая среда разработки, например VS Code, а также установленный Node.js не ниже версии 14.0.0.

Перейдём в папку с проектом, откроем терминал и пропишем команду: npx create-react-app my-app. Где “my-app“ - название корневой папки нашего проекта. По окончании процесса в терминале пропишем: cd my-app - переход в папку с проектом и далее npm start - запуск нашего проекта.

Если вы сделали всё правильно, то в браузере должно открыться наше одностраничное приложение:

Скриншот браузера с открытым одностраничным React-приложением

Выше мы несколько раз употребляли термин “одностраничное приложение”, или же Single Page Application (SPA). Однако, что это такое?

Что такое SPA-приложение

SPA это приложение, в котором все файлы (HTML, CSS, JavaScript) загружаются при первом запросе к веб-серверу, и после того, как мы отправляем второй запрос на сервер, страница изменяется динамически, а не загружается новая. Не все файлы напрямую показываются пользователям - всё зависит от его действий. Это и делает SPA намного быстрее, чем традиционное приложение.

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

Наше “ванильное“ приложение имеет лишь один файл с расширением .html c единственным корневым тегом div внутри. Собственно, в этот тег и будут динамически встраиваться остальные DOM-элементы.

Скриншот кода SPA-приложения, написанного на React

Управление DOM-элементами - весьма медленный процесс. В то же время большинство фреймворков JavaScript обновляют DOM-элементы чаще, чем это необходимо.

Например, у нас есть 10 элементов, но мы взаимодействуем только с одним. Большинство фреймворков обновят все 10. Нетрудно посчитать во сколько раз больше выполнится работы! Изменение небольшого количества элементов не является серьёзной проблемой, но современные веб-приложения могут совершать намного больше манипуляций с DOM. Именно Virtual DOM решает проблему неэффективного обновления.

Если в “двух словах”, то React выстраивает облегчённую копию объекта DOM. При различных действиях в рамках интерфейса приложения React создаёт обновлённую копию Virtual DOM обновляется и сравнивает новую и старую версии. Далее React узнаёт, какие элементы были изменены, и обновляет эти и только эти элементы в реальном DOM.

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

Теперь давайте обратим внимание на файл index.js:

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

Архитектура React использует компонентный подход. Компоненты являются строительными блоками, которые мы можем настраивать и переиспользовать. Любой класс или функция в React рассматривается как компонент. Например:

Глядя на функцию App можно подумать, что компонент - это функция или класс, которая возвращает HTML-разметку. Однако это не так. В React компонент - это функция или класс, возвращающая JSX.

JSX расшифровывается как JavaScript XML. Он упрощает написание и добавление HTML в React и позволяет использовать JavaScript внутри HTML. Поэтому, в контексте React, все div, span, header, p и так далее - не что иное как JSX, но никак не HTML. Поначалу это может показаться странным, но именно так работает React.

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

Создадим компонент ButtonWithTitle и добавим его внутрь компонента App:

function App() {
  return (
    <div className="App">
      <ButtonWithTitle/>
    </div>
  );
}

В браузере увидим следующий результат:

Окно браузера с результатом использования компонента ButtonWithTitle

Обратите внимание на несколько “нестандартный” синтаксис. Это и есть не что иное, как JSX.

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

function App() {
  return (
    <div className="App">
      <ButtonWithTitle/>
      <ButtonWithTitle/>
      <ButtonWithTitle/>
    </div>
  );
}

Однако в браузере мы увидим весьма нелицеприятную картину:

Настроить компонент нам помогают реквизиты, или же Props.

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

Настроим наш ButtonWithTitle:

function ButtonWithTitle(props) {
  return (
    <div>
        <h3>{props.title}</h3>
        <button>{props.buttonName}</button>
    </div>
  );
}

Функция ButtonWithTitle принимает props - объект, свойства свойства которого используются для отображения данных внутри нашей JSX-разметки. Любые JavaScript-выражения внутри JSX заключаются в фигурные скобки.

Теперь передадим реквизиты нашему компоненту:

function App() {
  return (
    <div className="App">
      <ButtonWithTitle title={'Button OK'} buttonName={'OK'}/>
      <ButtonWithTitle title={'Button Error'} buttonName={'Error'}/>
      <ButtonWithTitle title={'Button Success'} buttonName={'Success'}/>
    </div>
  );
}

Посмотрим в браузер и приятно удивимся:

Преимущества React

Выше мы рассмотрели лишь некоторые важные концепции React. И всё же, почему именно React?

Эффективность. Благодаря использованию готовых шаблонов и функций разработка приложений становится проще. Вы можете создавать быстрые, легко масштабируемые приложения за гораздо меньшее время, что повышает эффективность, а также сокращает время и усилия.
Декларативный подход. В ванильном JavaScript мы используем DOM, чтобы указать, что нам нужно. Но в React мы напрямую указываем браузеру, что делать. Мы просто определяем компонент и что должно отображаться в нём определённым образом, а не ссылаться на DOM.
Безопасность. Поскольку JavaScript является сообществом с открытым исходным кодом, его лучшие фреймворки имеют надёжные механизмы безопасности. Эти большие сообщества поддерживают фреймворки, участники и пользователи которых также могут выступать в качестве тестировщиков. Это увеличивает шансы обнаружения любого вида баги или ошибки, присутствующей во фреймворке. Таким образом, обеспечивается лучшая безопасность при меньших затратах.
Снижение затрат. Фреймворки JS бесплатны для публичного использования, поскольку они имеют открытый исходный код. В итоге, когда мы разрабатываем веб-приложение с использованием этих фреймворков, общая стоимость приложения снижается.
Огромное сообщество, где вы можете найти ответы на все ваши вопросы по конкретным темам.

Однако:

React не является полноценным фреймворком на все случаи жизни, и из–за этого приходится использовать его в сочетании с другими библиотеками (Redux, React Router), чтобы достичь функциональности как у Angular или Ember.
React использует несколько нетрадиционный подход к веб-разработке, а JSX и Flux могут показаться непонятными для новичков.
Разработчику приходится использовать другие инструменты для формирования асинхронных потоков данных.
Возникают дополнительные проблемы с SEO.

Заключение

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

Если вы хотите стать front-end разработчиком, вы должны знать хотя бы одну библиотеку / фреймворк JS. Я рекомендую начать с React.