Что такое React и как он работает?

14.04.2022

6.5K

Содержание:

Что такое React?
Пример на React
Простой пример React-компонента
Комментарии

В этом уроке мы рассмотрим, что такое React, как он работает и что собой представляют React компоненты.

Что такое React?

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

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

Сайт технологии React: https://reactjs.org/.

React является проектом с открытым исходным кодом, который расположен на Github.

Что такое React-компоненты?

Одной из ключевых особенностей React является его компонентный подход к разработке (component-based). Компоненты являются основой любого React-приложения.

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

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

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

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

Пример на React

Понять, как работает React лучше всего на примере.

Для этого создадим HTML файл со следующим содержимым:

<!doctype html>
<html lang="ru">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <!-- Don't use this in production: -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <title>React</title>
</head>

<body>

  <div id="root"></div>

  <script type="text/babel">
    function MyApp() {
      return <h1>Hello, world!</h1>;
    }
    const container = document.getElementById('root');
    const root = ReactDOM.createRoot(container);
    root.render(<MyApp />);
  </script>

</body>

</html>

Открыть пример

Это страница представляет собой приложение на React.

С помощью тега <script> мы подключаем три скрипта, необходимые для запуска React.

React («react.development.js») и React DOM («react-dom.development.js») – это основные библиотеки (ядро) React.

Третий скрипт («babel.min.js») не относится напрямую к React. Это библиотека Babel, которая используется для компилирования синтаксиса JSX, используемого React, в JavaScript, понятный браузеру.

Чтобы это сообщить Babel, необходимо к элементу <script> добавить атрибут type="text/babel". После этого Babel будет знать, что перед тем как запустить этот скрипт, его сначала нужно будет скомпилировать:

<script type="text/babel">
  ...
</script>

В начале кода выполняется создание React-компонента MyApp, используется для этого обычная функция:

function MyApp() {
  return <h1>Hello, world!</h1>;
}

С помощью return мы возвращаем то, что необходимо отобразить. В этом примере мы используем XML-подобный синтаксис под названием JSX.

C использованием него мы можем описывать HTML прямо внутри JavaScript. Мы его не заключаем в кавычки, т.к. по факту JSX = это JavaScript, а не HTML.

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

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

После этого мы получаем элемент <div> с идентификатором root с помощью JavaScript метода getElementById. Этот элемент будет определять место, в которое будет выводиться всё приложение React.

const container = document.getElementById('root');

С помощью метода createRoot создаём корень приложения:

const root = ReactDOM.createRoot(container);

Вызываем рендеринг с помощью render():

root.render(<MyApp />);

Метод render() возвращает описание того, что нужно отрисовать. В этом примере отобразим компонент MyApp, который записан с помощью JSХ синтаксиса.

Простой пример React-компонента

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

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

В этом разделе мы познакомимся с самой идеей компонентов, а для этого сначала создадим в HTML следующую карточку:

<div class="person-card">
  <h3 class="person-card__name">Тим Бернерс-Ли</h3>
  <p class="person-card__content">Создатель URI, URL, HTTP, HTML и Всемирной паутины (совместно с Робертом Кайо).</p>
</div>

Эта карточка состоит из элемента <div>, внутри которого расположен заголовок <h3> и параграф <p>.

Для оформления карточки добавим стили с помощью <style>:

.person-card {
  max-width: 15rem;
  background-color: #fff9c4;
  border: 1px solid #fff176;
  border-radius: 0.25rem;
  padding: 1rem;
}

.person-card__name {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.person-card__description {
  margin-top: 0;
  margin-bottom: 0;
}

В результате на странице карточка отобразится следующим образом:

Открыть пример

Создадим ещё две точно таких же карточки, но с другим контентом:

<div class="person-card">
  <h3 class="person-card__name">Хокон Виум Ли</h3>
  <p class="person-card__content">Учёный, специалист в области информатики, предложивший каскадные таблицы стилей (CSS).</p>
</div>

<div class="person-card">
  <h3 class="person-card__name">Брендан Эйх</h3>
  <p class="person-card__content">Американский программист, создатель языка программирования JavaScript.</p>
</div>

Созданные HTML-карточки, каждая из которых имеет одинаковую структуру

Открыть пример

Обратите, что каждая из карточек содержит одинаковую структуру, а, следовательно, её можно называть компонентом.

Самый простой способ создать компонент в React - это написать функцию JavaScript. Такие компоненты называются функциональными.

В теге <script> напишем функцию для создания React компонента PersonCard:

function PersonCard(props) {
  return (
    <div className="person-card">
      <h3 className="person-card__name">{props.name}</h3>
      <p className="person-card__description">{props.description}</p>
    </div>
  )
}

Эта функция получает свойства props и возвращает в качестве результата React-элемент.

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

Т.к. этот код не является HTML, то вместо class следует писать className. class - это ключевое слово в JavaScript, которое используется для создания классов.

С помощью props мы можем передать в React-компонент некоторые свойства. Обращение к свойству name осуществляется посредством {props.name}, а к description - {props.description}.

Создадим ещё один компонент, например App. Он будет представлять шаблон всего нашего приложения и включать в себя компоненты PersonCard:

function App() {
  return (
    <div className="person-card-wrapper">
      <PersonCard name="Тим Бернерс-Ли" description="Создатель URI, URL, HTTP, HTML и Всемирной паутины (совместно с Робертом Кайо)." />
      <PersonCard name="Хокон Виум Ли" description="Учёный, специалист в области информатики, предложивший каскадные таблицы стилей (CSS)." />
      <PersonCard name="Брендан Эйх" description="Американский программист, создатель языка программирования JavaScript." />
    </div>
  );
}

Компоненты в React следует обозначать с заглавной буквы. Т.к. React принимает элементы, которые начинаются с маленькой буквы, например <div />, за обычные DOM-элементы. В данном случае за <div>. А элементы с заглавной буквы, например, <PersonCard />, за React-компоненты. В данном случае за PersonCard.

Установка свойств React-компонентам осуществляется аналогично атрибутам HTML-элементам.

При вызове первого компонента PersonCard ему передаётся в качестве props значение:

{name: 'Тим Бернерс-Ли', description: 'Создатель URI, URL, HTTP, HTML и Всемирной паутины (совместно с Робертом Кайо).'}

В качестве результата этот компонент будет возвращать:

<div className="person-card">
  <h3 className="person-card__name">Тим Бернерс-Ли'</h3>
  <p className="person-card__description">Создатель URI, URL, HTTP, HTML и Всемирной паутины (совместно с Робертом Кайо).</p>
</div>

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

Создадим корень приложения, используя метод createRoot():

// в качестве корня будем использовать элемент с id="root"
const root = ReactDOM.createRoot(document.getElementById('root'));

Выполним рендиринг компонента App в корень приложения:

root.render(<App />);

Если React-элемент уже был ранее отрендерен в root, то повторный вызов произведёт его обновление и изменит соответствующую часть DOM, чтобы она содержала последние изменения.

Пример приложения сформированного с использованием React:

Открыть пример

Комментарии: 3

Игорь

29.12.2022, 12:46

Здорово! Всего 3 строчки в html файле и работает реакт! А во всех обучающих видео зачем то

1) Формируют файл package.json

2) Cкачивают половину интернета в папку node_modules

3) Настраивают webpack, babel

Если бы объяснили, зачем все это делают, если можно проще, то было бы супер!

и еще зачем предостерегающий коммент перед подключением Бабеля стоит:

Скандинавия Хаус

12.09.2022, 15:03

Спасибо, а то раньше только было на слуху, что реакт это круто.

Александр Мальцев

12.09.2022, 15:11

Рад, что статья понравилась!