React

React открыли в 2013 году люди из Meta (тогда Facebook). Страница — не один огромный файл. Каждый компонент хранит свои данные и свой вид. JSX похож на HTML, но он внутри JavaScript. Браузер сам JSX не читает. Сборщик превращает его в обычный JavaScript.

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

• Использовать одну кнопку в нескольких местах
• Собрать список из данных
• Показать ошибку формы на экране
• Страница внутри фреймворка вроде Next.js

На React пишут карточку, меню и поле поиска. Когда состояние меняется, React старается обновить только изменившуюся часть. Это не база данных и сервер он сам не строит. React Native — отдельная библиотека для приложения телефона. Это не то же самое.

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

Плюс: одну часть не переписывают, большой интерфейс делится на куски. Ограничение: JSX и сборщик — лишний шаг. Для маленькой неподвижной страницы прямой путь — обычный HTML. React не обязателен в каждом проекте.

Компонент — это функция. Props — значение, которое приходит снаружи. State — значение, которое меняется внутри.

• JSX пишет вид внутри JavaScript
• Props не меняют компонент, это входящие данные
• Когда state меняется, обновляется эта часть
• Ключ хранит, какая строка какая, в списке

Эта функция возвращает заголовок. Чтобы увидеть его в браузере, её ещё соединяют со страницей и переводят JSX.

function Hello() {
  return <h1>Salam</h1>;
}

Функция выше возвращает только заголовок. Эти четыре показывают то, чем пользуются на деле: значение снаружи, меняющееся число, список и фразу, которая зависит от балла. Браузер не запускает JSX как написано. Сборщик превращает его в JavaScript. useState приходит из React, поэтому в файле нужен тот import, который проект уже показывает.

Фраза, которая берёт имя

Greeting — это компонент. name в фигурных скобках — prop: оно приходит от того, кто использует компонент. Компонент сам имя не выдумывает. {name} вставляет это значение в фразу. Если родитель передаёт Aysel, экран говорит Salam, Aysel. Сменился prop — сменилась фраза. Сама функция остаётся той же.

function Greeting({ name }) {
  return <p>Salam, {name}</p>;
}

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

Кнопка, которая считает

count — это state. Он начинается с 0. Новый номер ему даёт только setCount. Кнопка показывает текущее число. onClick срабатывает, когда человек нажимает. count + 1 само count не меняет. setCount говорит React новое значение, и React рисует кнопку снова. Запись count = count + 1 обходит React, и экран остаётся на старом числе.

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

Каждое нажатие показывает следующее число: 0, потом 1, потом 2. Страница не перезагружается.

Список из массива

names — обычные данные. map проходит каждое имя и возвращает li. React нужен key, чтобы знать, какая строка какая, когда список потом изменится. Здесь ключ — само имя, и это годится только потому, что два имени разные. Пустой массив не рисует строк. Добавь в массив Nigar — третья строка появится без новой строки HTML.

const names = ["Aysel", "Murad"];

function NameList() {
  return (
    <ul>
      {names.map((name) => (
        <li key={name}>{name}</li>
      ))}
    </ul>
  );
}

На экране два пункта: Aysel и Murad. ul — это список. Данные не написаны в тегах по одному.

Фраза, которая зависит от балла

score приходит как prop, как имя выше. Знак вопроса выбирает одно из двух слов. Если балл 50 или больше, абзац говорит Keçdi. Иначе Qaldı. Сама 50 проходит, потому что проверка — больше или равно. Это всё ещё один компонент. Решение стоит в выражении JavaScript, а не в отдельном файле HTML.

function Score({ score }) {
  return <p>{score >= 50 ? "Keçdi" : "Qaldı"}</p>;
}

Балл 85 показывает Keçdi. Балл 40 показывает Qaldı. Компонент балл не хранит. Его хранит тот, кто вызвал.

• React и JavaScript — одно и то же? Нет. React — библиотека. Её пишет JavaScript.
• React — это фреймворк? Он называет себя библиотекой. Маршрут страницы и сервер обычно добавляют другой инструмент.
• React заменяет HTML? Нет. В конце браузер всё равно видит элементы.