React.js: что это, для чего нужен и как освоить начинающим

React (React.js или ReactJS) — это бесплатная библиотека JavaScript с открытым исходным кодом. Ее применяют, чтобы создавать пользовательские интерфейсы на основе компонентов.

Для чего нужен React.js

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

Пример применения React в HTML c JSX и JavaScript:

import React from "react"; const Greeting = () => {
  return (
    <div className="hello_world">
      <h1> Hello, world! </h1>
    </div>
  );
};

export default Greeting;

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

React придерживается парадигмы декларативного программирования. Разработчики создают описание вида (набора DOM-элементов) для каждого состояния приложения. А React обновляет и отображает компоненты, когда меняют данные. Этим отличается от императивного программирования: там разработчики описывают конкретные шаги для перевода приложения в определенное состояние.

То есть при декларативном программировании (и React) описывают, что хотят получить. А при императивном подходе — как хотят что-то получить. Для создания пользовательских интерфейсов декларативный метод программирования подходит гораздо лучше. Поэтому он прижился в сообществе frontend-разработчиков. Сейчас его применяют практически во всех библиотеках и фреймворках. Например, Vue.js, Svelte, SwiftUI, Flutter.

Основные аспекты при создании приложения с помощью библиотеки React — это состояния и компоненты.

✔️ Состояния

В школе нас учили, что различные объекты могут находиться в разных состояниях. Например, физические вещества — в четырех: твердом, жидком, газообразном и в плазме. В зависимости от состояния одно и то же вещество выглядит и ведет себя по-разному. При внешнем воздействии вещество переходит из одного состояния в другое: например, лед (твердый) становится водой (жидким), когда температура выше 0 °C.

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

✔️ Компоненты

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

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

Изначально компоненты в React описывали только с помощью JavaScript-функций:

function Welcome(props) {
   return <h1>Hello, {props.name}</h1>;
}

Но когда появилась шестая версия спецификации ECMAScript-классов, React-компоненты стали описывать и с их помощью:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

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

Простейшие компоненты генерируют отображение только на основании переданных им параметров (this.props). Это так называемые компоненты без состояния (stateless components):

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

root.render(<HelloMessage name="Taylor" />);

Более сложные — компоненты с состоянием (stateful components) — генерируют каждое отображение на основе не только параметров, но и текущего состояния (this.state):

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  tick() {
    this.setState(state => ({
      seconds: state.seconds + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div>
        Seconds: {this.state.seconds}
      </div>
    );
  }
}

root.render(<Timer />);

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

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
     <Welcome name="Sara" />      
<Welcome name="Cahal" />      
<Welcome name="Edite" />
    </div>
  );
}

Чем отличается приложение на чистом HTML и JavaScript от React

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

Рассмотрим примеры реализации простейшего приложения «Счетчик», чтобы показать основные различия.

💡 Пример на чистом HTML и JavaScript

<!DOCTYPE html>
<html>
 <head>
   <title>Counter App</title>
   <meta charset="UTF-8" />
 </head>
 <body>
   <div>
     <h1 id="counter"></h1>
     <button id="inc-btn">+1</button>
     <button id="dec-btn">-1</button>
   </div>
   <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20%20const%20counterElement%20%3D%20document.getElementById(%22counter%22)%3B%0A%20%20%20%20%20const%20incBtn%20%3D%20document.getElementById(%22inc-btn%22)%3B%0A%20%20%20%20%20const%20decBtn%20%3D%20document.getElementById(%22dec-btn%22)%3B%0A%20%20%20%20%20let%20counterValue%20%3D%200%3B%0A%20%0A%20%20%20%20%20function%20inc()%20%7B%0A%20%20%20%20%20%20%20counterValue%20%2B%3D%201%3B%0A%20%20%20%20%20%20%20counterElement.innerText%20%3D%20counterValue%3B%0A%20%20%20%20%20%7D%0A%0Afunction%20dec()%20%7B%0A%20%20%20%20%20%20%20counterValue%20-%3D%201%3B%0A%20%20%20%20%20%20%20counterElement.innerText%20%3D%20counterValue%3B%0A%20%20%20%20%20%7D%0A%20%0A%20%20%20%20%20counterValueElement.innerText%20%3D%20counterValue%3B%0A%20%20%20%20%20incBtn.addEventListener(%22click%22%2C%20inc)%3B%0A%20%20%20%20%20decBtn.addEventListener(%22click%22%2C%20dec)%3B%0A%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
 </body>
</html>

💡 Пример на React

<!DOCTYPE html>
<html>
 <head>
   <title>Counter App</title>
   <meta charset="UTF-8" />
 </head>
 <body>
   <div id="root"></div>
   <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%3C!--React%20and%20Babel%20libraries%20links--%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
   <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fbabel%22%3E%0A%20%20%20%20%20function%20App()%20%7B%0A%20%20%20%20%20%20%20const%20%5Bvalue%2C%20setValue%5D%20%3D%20React.useState(0)%3B%0A%20%0A%20%20%20%20%20%20%20function%20inc()%20%7B%0A%20%20%20%20%20%20%20%20%20setValue(value%20%2B%201)%3B%0A%20%20%20%20%20%20%20%7D%0A%0A%09%20%20function%20dec()%20%7B%0A%20%20%20%20%20%20%20%20%20setValue(value%20-%201)%3B%0A%20%20%20%20%20%20%20%7D%0A%20%0A%20%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%3Ch1%3E%7Bvalue%7D%3C%2Fh1%3E%0A%20%20%20%20%20%20%20%20%20%20%20%3Cbutton%20onClick%3D%7Binc%7D%3E%2B1%3C%2Fbutton%3E%0A%3Cbutton%20onClick%3D%7Bdec%7D%3E-1%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%20%7D%0A%20%0A%20%20%20%20%20ReactDOM.render(%0A%20%20%20%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%20%3CApp%20%2F%3E%0A%20%20%20%20%20%20%20%3C%2Fdiv%3E%2C%0A%20%20%20%20%20%20%20document.getElementById(%22root%22)%0A%20%20%20%20%20)%3B%0A%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
 </body>
</html>

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

❗ При использовании компонентов React достаточно добавить на страницу еще один тег App, чтобы получить два независимых счетчика. Это делает приложение легко расширяемым.

❗ Логика компонента React изолирована. Поэтому поток данных в приложении — более предсказуемый, что упрощает разработку и отладку.

Плюсы и минусы React

Для каких приложений подойдет React

1️⃣ Большой или средней сложности — несколько экранов, различные формы, много нестандартных элементов управления.

2️⃣ Над которым работает команда программистов — технология поможет быстрее договариваться и лучше поддерживать код.

3️⃣ Которые планируют расширять — изолированные компоненты позволяют легко масштабировать логику, использовать уже созданные решения.

4️⃣ Которые решили обновить — React можно добавлять в уже существующий проект, обновлять кодовую базу постепенно и точечно.

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

✅ React — это востребованная технология: на React.js написаны яндекс, нетфликс и другие известные сервисы.

✅ Подходы React распространены во frontend-разработке — если изучить React, можно легко менять стек и осваивать новые технологии.

✅ Разработка пользовательских интерфейсов — развивающаяся отрасль: с помощью расширений React сможете создавать интерфейсы не только для веб-приложений, но и для мобильных платформ.

Как изучить React

🎓 Официальный сайт библиотеки на русском языке с актуальной информацией. Если знаете английский, то смотрите англоязычную версию.

🎓 Вводный тур по React. Проведет через основные этапы инициализации и начала работы над приложением. Познакомит с основными концептами React. Подскажет ссылки на ресурсы с ответами.

🎓 Документация. Подходит для более детального изучения библиотеки.

🎓 Блог. Подпишитесь, чтобы следить за последними обновлениями React.

🎓 Сообщество. В нём помогут с вопросами, на которых нет ответа в документации.

🎓 Гитхаб. Для тех, кто решил углубиться в React по полной.

🎓 Курс «Веб-разработчик» в Skypro. Изучите не только React, а еще и HTML и CSS, базовый синтаксис языка JavaScript, инструменты разработки. Сделаете проекты для портфолио: портал с продажей билетов и интерфейсом билетного контролера по QR, виджет погоды, игру, интернет-магазин и лендинг. Все домашки проверяют только практикующие веб-разработчики.

Главное о React.js для начинающих

• React — это библиотека с открытым исходным кодом. В основе — декларативный подход.
• Строительный элемент приложения на React — компонент.
• React популярен во frontend-разработке, большинство крупных компаний используют именно его. Подходит для сложных приложений, над которыми работает большая команда.
• Плюсы: приложение легко масштабировать, есть большая библиотека готовых компонентов. Минусы: увеличенный размер, дополнительные расходы мощностей и памяти устройства.

*Площадки Meta признаны экстремистскими и запрещены в РФ.