Код
#статьи

React.js для новичков в программировании: что это, как устроен и зачем нужен

Если стажёр или совсем зелёный джун попросят вас объяснить, что такое React.js, — просто покажите им эту статью.

OlyaSnow для Skillbox Media

В интернете полно руководств по React.js с названиями типа for dummies, for idiots — вроде бы для чайников. Но они по большей части негуманны и довольно сложны — человеку без знания JavaScript пользы не будет, только сильнее запутается и почувствует себя тем самым dummy. Поэтому мы решили максимально просто объяснить, что такое React.js, для чего он нужен, как попробовать и что понадобится для полноценной работы.

Что это ещё за новый тикток такой?

React.js — это JavaScript-библиотека от Facebook для удобной разработки интерфейсов, то есть внешней части сайтов и приложений, с которой взаимодействует пользователь.

Главная фишка React.js — компоненты и состояния.

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

Состояние — это вся информация об элементе, в том числе о его отображении. Например, состояние объекта «термометр» может описываться свойствами current_temperature, min и max.

Переводим на понятный язык: что такое компоненты и состояния

Пока звучит немного абстрактно и сложно, но на деле всё гораздо проще. Потренируемся на Цукерберге: в конце концов, это его детище — ему и отвечать.

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

Скриншот: официальная страница Марка Цукерберга в Facebook

У каждого из этих компонентов есть состояния. Например, блок краткой информации будет по-разному выглядеть на мобильной и десктопной версии, у сердечка меняется цифра с лайками или цвет (если вы лайкнули или не лайкнули запись), а пост может обрезать текст, показывать содержимое полностью, меняться в зависимости от содержания. Ведь содержание поста — это тоже его состояние. Именно в этом проявляется гибкость и сила React.js: вы пишете компонент один раз, а потом просто передаёте ему разные состояния.

Посмотрите, как в зависимости от состояния меняется размер аватарки:

Скриншот: официальная страница Марка Цукерберга в Facebook
  1. Большая — в шапке личной страницы.
  2. Совсем крошечная — в строке «у вас столько-то подписчиков».
  3. Стандартная — в верхнем меню и записи в ленте.

Уже получилось три состояния, но это не предел — ведь внешний вид аватарки различается в мобильной и десктопной версии, в приложении для Android, iOS и так далее. Отметим, что аватарка практически везде будет вложенной — в составе более крупных компонентов React.js, таких как пост, шапка, боковая панель или меню.

В React.js есть собственные средства для управления состояниями, но на практике в средних и крупных проектах чаще используют Redux — сторонний менеджер состояний. Он удобнее и лучше масштабируется.

Зачем нужен React.js, если есть HTML, JavaScript и CSS

Никаких огородов. React.js — это всего лишь способ в удобном виде представить код JavaScript и HTML, сделать его повторяемым и наглядным. Компоненты React.js пишут на особом языке — JSX, который выглядит как смесь JavaScript и HTML. Вот пример кода на этом языке:

const name = 'Josh Perez';
const element = <h1>Привет, {name}</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);
JSX-код — то, что кажется HTML-тегом <h1>, на самом деле элемент JSX

Код JSX довольно наглядный, и, кстати, то, что похоже на HTML, — вовсе не HTML :) Звучит галлюциногенно, но это просто синтаксис JSX.

Браузеру понимать JSX не нужно — код React.js транслируется в JavaScript, с которым знаком любой уважающий себя браузер. Для этого написанное на React.js приложение прогоняют, например, через Babel — специальную программу-транспайлер, которая переводит разные представления (то есть языки вроде JSX) в JavaScript-код.

function getGreeting(user) {
  if (user) {
   return <h1>Здравствуй, {formatName(user)}!</h1>;
 }
 return <h1>Здравствуй, незнакомец.</h1>;
}
JSX-код
function getGreeting(user) {
  if (user) {
    return /*#__PURE__*/React.createElement("h1", null, "Здравствуй, ", formatName(user), "!");
  }
  return /*#__PURE__*/React.createElement("h1", null, "Здравствуй, незнакомец.");
}
JavaScript-код после Babel

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

У React.js есть три мощных преимущества:

  1. JSX гораздо проще читать и понимать, чем JavaScript, а значит, на поддержку и отладку кода тратится гораздо меньше времени разработчиков (а это зарплаты и скорость новых релизов).
  2. В нём удобно реализована система компонентов — повторяющихся частей кода, которые используются в разных условиях и обстоятельствах и меняются в зависимости от контекста.
  3. Каждый компонент зависит только от своего состояния — а значит, гораздо легче устранять ошибки в коде, если что-то не работает или работает не так, как ожидалось. То есть ошибки становятся очевидными: компонент, который работает корректно сам по себе, всегда будет работать корректно — если только ему не передать какое-то неправильное состояние.

В итоге React.js помогает сэкономить время, делает код более понятным и структурированным, даёт возможность переиспользовать большие блоки. Всё это помогает значительно снизить стоимость разработки, поддержки, обновления и отладки приложений, а также делать их значительно быстрее. К тому же, зная JavaScript и HTML, выучить его достаточно просто — для основ хватит нескольких дней. React.js эффективен только на проектах с большим числом динамических страниц. Делать на React.js сайт-визитку — это перебор.

Конкуренты React.js

У React.js есть и свои конкуренты. Например, библиотеки Vue.js и Angular. На них тоже пишут пользовательские интерфейсы, у каждого есть свои плюсы и минусы. Пока что работодатели чаще ждут от разработчиков знания React.js — в октябре 2021 года на hh.ru он встречался в требованиях 7636 раз, Angular — 3649 раз, а Vue.js — 2030 раз.

Согласно исследованию Stack Overflow, React.js — самый популярный веб-фреймворк в 2021 году. Он даже обогнал динозавра jQuery, который разработчики уже несколько лет ненавидят (по данным того же исследования), но массово продолжают использовать. Раньше эта библиотека использовалась во многих сайтах и веб-приложениях — не переписывать же их код :) Третье место занял фреймворк для Node.js — Express. Конкуренты React.js — Angular и Vue.js — тоже вошли в пятёрку.

Скриншот: сайт Stack Overflow

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

Синтаксис React.js Native похож на JSX, но переводится на понятный и привычный для Windows, macOS, Android и других операционных систем язык. То есть приложение становится нативным — использует стандартные для разных платформ возможности и протоколы, а не запускается в браузере. Мало того, на платформе React.js Native можно использовать и другие языки программирования — например, Java, Swift, Objective-C.

Где скачать React.js и как начать им пользоваться

Для начала можно поиграться с React.js в онлайн-песочнице CodePen или скачать html-файл с шаблоном. После этого свой код можно прогнать через Babel — тоже онлайн, чтобы не устанавливать лишние приложения. Неплохой учебник по синтаксису JSX есть на официальном сайте React.js — начните с Hello, World! и смело экспериментируйте в CodePen — так советуют авторы гайда.

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

React.js — довольно простая библиотека, хотя, как и в любом деле, здесь есть нюансы. Например, веб-хуки, однонаправленная передача данных, callback-функции, виртуальный DOM, методы жизненного цикла. Звучит страшновато, да? Не переживайте: написать новый Facebook или Instagram на React.js не так-то просто, но всё равно это очень дружественная библиотека. Даже для новичков.

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

Глубоко, бесплатно:
вебинары по программированию, маркетингу и дизайну.

Расписание

Курс

JavaScript-фреймворк React.js

Расширьте свои профессиональные знания и навыки разработчика, научившись использовать в работе фреймворк React.js

Узнать про курс
JavaScript-фреймворк React.js Узнать больше
Понравилась статья?
Да

Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies 🍪

Ссылка скопирована