Что такое React и его основные концепции?

«Что такое React и его основные концепции?» — вопрос из категории Other, который задают на 10% собеседований Java Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

React — это библиотека JavaScript для построения пользовательских интерфейсов на основе компонентов.

Ключевые концепции:

  1. Компоненты: Переиспользуемые, инкапсулированные блоки UI. Бывают функциональными (с хуками) и классовыми.
  2. JSX: Синтаксическое расширение, позволяющее писать HTML-подобный код внутри JavaScript.
  3. Пропсы (Props): Данные, передаваемые от родительского компонента к дочернему (только для чтения).
  4. Состояние (State): Внутренние данные компонента, которые могут изменяться и вызывать его ререндер.
  5. Жизненный цикл и хуки: Методы (в классовых компонентах) и хуки (в функциональных), такие как useState, useEffect, useContext, которые управляют логикой компонента.
  6. Виртуальный DOM: React создает виртуальное представление DOM в памяти, эффективно вычисляет различия (diffing) и применяет минимально необходимые изменения к реальному DOM.

Пример функционального компонента:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Вы кликнули {count} раз</p>
      <button onClick={() => setCount(count + 1)}>
        Нажми на меня
      </button>
    </div>
  );
}