React для начинающих

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

Нужно запомнить компоненты, разобраться с JSX, выучить несколько хуков - и можно писать приложения.

На практике всё оказалось немного иначе.

Синтаксис я понял довольно быстро.

Проблема появилась, когда приложение перестало помещаться в один файл.

Первый проект был простой - страница со списком статей.

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

Задача казалась обычной.

Сначала я написал всё прямо в App.jsx.

И на этом этапе всё выглядело нормально.

function App() {

  const articles = [
    {
      title: "Что такое React",
      author: "Алексей",
      views: 120
    },
    {
      title: "Основы JavaScript",
      author: "Иван",
      views: 340
    }
  ];

  return (
    <div>
      <h1>Мои статьи</h1>

      {articles.map(article => (
        <div>
          <h2>{article.title}</h2>
          <p>{article.author}</p>
          <span>
            Просмотров: {article.views}
          </span>
        </div>
      ))}
    </div>
  );
}

Код работал.

Я был уверен, что всё сделал правильно.

Но потом появилась следующая задача.

Мне понадобилась такая же карточка статьи в другом месте.

И тут возникла первая проблема.

Я начал копировать код.

Одна карточка здесь.

Вторая там.

Потом нужно изменить внешний вид.

И приходится менять несколько одинаковых кусков.

Вот в этот момент я впервые понял, зачем в React нужны компоненты.

Компоненты появились не потому, что так красивее

До этого я думал, что компоненты - это просто способ сделать код аккуратнее.

На практике смысл оказался совсем в другом.

Компонент нужен, когда у части интерфейса появляется собственная задача.

Карточка статьи - это отдельный элемент.

Она не должна знать, где находится.

Ей достаточно получить данные и показать их.

Например:

function ArticleCard({ title, author, views }) {
  return (
    <article>
      <h2>{title}</h2>

      <p>
        Автор: {author}
      </p>

      <span>
        Просмотров: {views}
      </span>
    </article>
  );
}

export default ArticleCard;

Теперь список статей выглядит проще:

function ArticleList({ articles }) {

  return (
    <>
      {articles.map(article => (
        <ArticleCard
          key={article.title}
          title={article.title}
          author={article.author}
          views={article.views}
        />
      ))}
    </>
  );
}

Тогда я впервые нормально понял идею props.

Это не какая-то особая магия React.

Это просто способ передать компоненту нужные данные.

Самая большая путаница началась со state

С компонентами разобрался.

А потом появилась интерактивность.

Например, кнопка лайка под статьёй.

В обычном JavaScript я привык думать примерно так:

найти элемент → изменить текст.

В React такой подход уже не работает.

Нужно менять данные.

Я сделал простой вариант:

import { useState } from "react";

function LikeButton() {

  const [likes, setLikes] = useState(0);

  return (
    <button
      onClick={() => setLikes(likes + 1)}
    >
      Лайков: {likes}
    </button>
  );
}

Сначала было непонятно, зачем столько кода ради одного числа.

Почему нельзя просто написать:

likes++;

Ответ оказался простым.

React не следит за каждой переменной.

Ему нужно сообщить:

«Данные изменились, обнови интерфейс».

Для этого и существует setLikes.

Когда понимаешь эту идею, многие вещи в React становятся логичнее.

Ошибка была не в React, а в моём подходе

Через некоторое время мой первый проект начал расти.

Появился поиск.

Появились категории.

Появилась форма добавления статьи.

И я снова начал складывать всё в один файл.

Получился знакомый результат.

Большой компонент, где сложно найти нужное место.

Тогда я понял одну вещь:

React не заставляет писать хороший код.

Он только даёт инструменты.

Можно создать десять компонентов и сделать хаос.

Можно сделать несколько простых компонентов и получить понятную структуру.

Всё зависит от того, как ты организуешь приложение.

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

Сейчас кажется логичным сделать что-то серьёзное.

Например:

• интернет-магазин;

• социальную сеть;

• сервис с личным кабинетом.

Но первый проект лучше делать небольшим.

Не потому что маленькие приложения бесполезны.

Наоборот.

Именно маленький проект заставляет разобраться в основе.

Когда делаешь список задач, сразу появляются вопросы:

• где хранить список;

• как добавить новый элемент;

• как удалить старый;

• как обновить интерфейс.

Вот эти моменты и учат React.

Почему я не стал сразу изучать Redux и другие инструменты

Когда начинаешь смотреть реальные проекты, кажется, что React - это огромная система.

Вокруг него много технологий.

Но у новичка часто возникает неправильная последовательность.

Он изучает инструменты до того, как столкнулся с проблемой.

Например, подключает сложное управление состоянием, хотя у приложения всего несколько компонентов.

Это примерно как покупать сервер для сайта, который ещё состоит из одной страницы.

Сначала нужно понять базовый React.

Компоненты.

Props.

State.

Работу с данными.

Потом уже появляются реальные причины использовать дополнительные решения.

Что я бы сделал иначе, если бы начинал React сейчас

Я бы меньше смотрел уроки и быстрее начал писать.

Не пытался бы запомнить все хуки.

Не открывал бы сразу большие проекты.

Сделал бы несколько маленьких вещей:

• простую страницу со списком;

• форму;

• приложение с API;

небольшой личный проект.

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

А когда у тебя появляется ошибка, которую нужно исправить.

Главный вывод

Главная сложность React для новичка - не JSX и не синтаксис.

Самое непривычное - изменить способ мышления.

В начале хочется управлять каждым элементом страницы отдельно.

Потом приходит другое понимание:

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

После этого React становится намного понятнее.

Не потому что исчезают все сложности.

А потому что появляется логика, которая за ними стоит.

Именно поэтому лучший способ изучать React - не пытаться выучить его полностью.

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