Основы разработки на React: От настройки до первого приложения

1. Введение в экосистему React и настройка рабочего окружения

Введение в экосистему React и настройка рабочего окружения

Добро пожаловать в курс по React! Если вы читаете эту статью, значит, вы решили освоить одну из самых востребованных технологий в современной веб-разработке. React — это не просто библиотека, это целый подход к созданию интерфейсов, который изменил то, как мы думаем о фронтенде.

В этой первой статье мы разберем, что такое React, почему для его работы нужны дополнительные инструменты (Node.js, npm) и как настроить всё необходимое на вашем компьютере, чтобы запустить первый проект.

Что такое React и почему он так популярен?

React — это JavaScript-библиотека для создания пользовательских интерфейсов, разработанная компанией Facebook (ныне Meta). Она позволяет разбивать сложные интерфейсы на маленькие, изолированные кусочки кода, называемые компонентами.

Согласно ru.hexlet.io, React появился в 2013 году и быстро набрал популярность благодаря тому, что снизил порог входа и сложность создания интерфейсов. Главная идея — компонентный подход. Представьте, что вы строите дом из LEGO. У вас есть отдельные кирпичики: «Кнопка», «Шапка сайта», «Карточка товара». Вы можете использовать один и тот же кирпичик «Кнопка» в разных местах дома, не создавая его заново.

Ключевые особенности:

Декларативность: Вы описываете, как* должен выглядеть интерфейс в зависимости от состояния данных, а React сам обновляет DOM (структуру страницы), когда данные меняются. * Virtual DOM: React хранит в памяти легкую копию реального DOM-дерева. Когда что-то меняется, он сравнивает копию с оригиналом и обновляет только те части страницы, которые действительно изменились. Это делает приложения очень быстрыми. * Экосистема: React — это только «View» (отображение). Для полноценной разработки часто используются дополнительные инструменты: React Router (для навигации), Redux или Zustand (для управления данными), Vite или Webpack (для сборки проекта).

> Фундаментальная идея React оказалась настолько мощной, что её расширили далеко за рамки браузера. С React можно работать как на сервере, так и на мобильных платформах (React Native). Такой подход называется «Learn once, Write anywhere». > > ru.hexlet.io

Подготовка рабочего окружения

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

Шаг 1: Установка Node.js и npm

Многие новички путаются: «Зачем мне Node.js, если React — это фронтенд, который работает в браузере?».

Дело в том, что современные инструменты сборки (Vite, Webpack), которые превращают ваш код в понятный браузеру формат, написаны на JavaScript и запускаются на вашем компьютере именно через Node.js. Также вместе с Node.js устанавливается npm (Node Package Manager) — менеджер пакетов, который позволяет скачивать и обновлять библиотеки (в том числе сам React).

Согласно purpleschool.ru, чтобы проверить, установлены ли у вас эти инструменты, откройте терминал (командную строку) и введите:

Если вы видите версии (например, v20.10.0), значит, всё в порядке. Если нет — нужно установить.

Инструкция по установке:

Перейдите на официальный сайт Node.js.

Скачайте версию LTS (Long Term Support) — она самая стабильная.

Установите её как обычную программу, нажимая «Далее».

Шаг 2: Выбор редактора кода

Для комфортной работы вам понадобится хороший редактор кода. Стандартом индустрии сейчас является Visual Studio Code (VS Code). Он бесплатный, легкий и имеет огромную библиотеку расширений.

Рекомендуемые расширения для VS Code при работе с React: * ES7+ React/Redux/React-Native snippets — позволяет быстро создавать шаблоны кода. * Prettier — автоматически форматирует ваш код, делая его красивым и читаемым.

Создание первого проекта

Раньше стандартом для создания проектов был инструмент Create React App (CRA). Однако сейчас сообщество переходит на более быстрые и современные инструменты, такие как Vite.

Почему Vite?

Create React App может быть медленным при запуске и сборке больших проектов. Vite (произносится как «Вит») делает то же самое, но практически мгновенно.

Инициализация проекта через Vite

Давайте создадим ваше первое приложение. Откройте терминал в той папке, где вы хотите хранить проекты, и выполните следующую команду:

Разберем команду: * npm create vite@latest — запускает установщик Vite последней версии. * my-first-react-app — название папки вашего проекта. * -- --template react — указывает, что мы хотим использовать шаблон именно для React (без TypeScript пока что).

После выполнения команды терминал подскажет вам следующие шаги:

После ввода npm run dev вы увидите ссылку (обычно http://localhost:5173). Откройте её в браузере. Поздравляем! Ваше первое React-приложение работает.

Структура проекта

Откройте созданную папку в VS Code. Вы увидите множество файлов. Давайте разберем самые важные:

Входная точка приложения

В папке src вы найдете файл main.jsx (или index.js). Это точка входа.

Здесь React находит элемент с id="root" в вашем HTML и вставляет туда компонент <App />.

Знакомство с JSX

Если вы откроете файл App.jsx, то увидите странный синтаксис:

Это выглядит как HTML внутри JavaScript. Этот синтаксис называется JSX.

> JSX — это расширение синтаксиса JavaScript, которое позволяет описывать пользовательский интерфейс с помощью знакомого HTML-подобного синтаксиса. > > ru.nextjs.im

Браузеры не понимают JSX напрямую. Инструменты сборки (Vite/Babel) превращают этот код в обычные вызовы JavaScript-функций, которые браузер может исполнить. Например, заголовок <h1> превратится в команду создания элемента.

Важно помнить одно правило JSX: JavaScript-выражения внутри JSX пишутся в фигурных скобках {}.

Пример:

Итоги

Мы успешно подготовили почву для изучения React. Теперь у вас есть настроенная среда и работающий проект.

React — это библиотека для создания интерфейсов из компонентов, которая использует Virtual DOM для высокой производительности.

Node.js и npm необходимы для работы инструментов сборки и управления библиотеками, даже если сам React работает в браузере.

Vite — современный и быстрый инструмент для создания и запуска React-проектов, который приходит на смену Create React App.

JSX — это синтаксис, позволяющий писать HTML-подобный код прямо внутри JavaScript. Он требует компиляции перед запуском в браузере.

Структура проекта четко разделена: исходный код лежит в src, зависимости в node_modules, а настройки в package.json.

2. Синтаксис JSX и создание функциональных компонентов

Синтаксис JSX и создание функциональных компонентов

В предыдущей статье мы настроили рабочее окружение, установили Node.js и запустили наш первый проект на Vite. Теперь, когда у вас перед глазами открыт файл App.jsx, вы, вероятно, видите код, который выглядит как смесь HTML и JavaScript. Это и есть JSX — сердце React-приложений.

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

Что такое JSX?

JSX (JavaScript XML) — это расширение синтаксиса языка JavaScript. На первый взгляд он может показаться обычным HTML-шаблонизатором, но это обманчивое впечатление. JSX позволяет писать структуру интерфейса прямо внутри логики JavaScript.

Браузеры не понимают JSX. Перед тем как код попадет в браузер, он должен быть преобразован (транспилирован) в обычный JavaScript. Этим занимаются инструменты сборки, такие как Vite (использующий внутри себя ESBuild) или Babel.

Согласно metanit.com, суть JSX заключается в том, что это «синтаксический сахар» над функцией React.createElement(). Рассмотрим пример:

Код на JSX:

Во что он превращается после сборки:

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

Правила написания JSX

Поскольку JSX — это JavaScript, он накладывает определенные ограничения, которые отличают его от обычного HTML.

1. Правило одного родителя

Функция компонента должна возвращать только один корневой элемент. Вы не можете вернуть два заголовка <h1> подряд, не обернув их во что-то.

Неправильно:

Правильно:

Если вы не хотите создавать лишний <div> в DOM-дереве, React предоставляет специальный синтаксис — Фрагмент (Fragment). Он выглядит как пустые скобки <>...</>.

2. Закрытие тегов

В HTML некоторые теги можно не закрывать (например, <img> или <input>). В JSX все теги должны быть закрыты. Если у тега нет содержимого, он должен быть самозакрывающимся.

* HTML: <input type="text"> * JSX: <input type="text" />

3. Атрибуты camelCase

Поскольку JSX превращается в объекты JavaScript, имена атрибутов не могут содержать дефисы (как в CSS) или совпадать с зарезервированными словами языка.

Самый яркий пример — атрибут class. В JavaScript слово class зарезервировано для создания классов. Поэтому в React для назначения CSS-классов используется атрибут className.

Другие примеры: * onclick превращается в onClick * tabindex превращается в tabIndex * for (для label) превращается в htmlFor

Интеграция JavaScript в JSX

Главная сила JSX — возможность использовать мощь JavaScript прямо внутри разметки. Для этого используются фигурные скобки {}.

> Как видно, вставка (по сути — интерполяция) происходит за счёт использования фигурных скобок, причём внутри них может быть любое выражение. Эта схема работает одинаково как для содержимого тегов, так и для атрибутов. > > ru.hexlet.io

Вывод переменных

Выражения, а не инструкции

Важно помнить: внутри {} можно писать только выражения (expressions) — то, что возвращает значение. Вы не можете использовать инструкции (statements), такие как if, for, while или объявление переменных.

Неправильно:

Правильно (используем тернарный оператор):

Функциональные компоненты

В современном React основным способом создания интерфейсов являются функциональные компоненты. Это обычные JavaScript-функции, которые возвращают JSX.

Согласно itchief.ru, когда тег начинается с заглавной буквы, React понимает, что это компонент, а не стандартный HTML-тег.

Создание первого компонента

Давайте создадим компонент кнопки. Создайте файл MyButton.jsx в папке src:

Теперь мы можем использовать этот компонент в главном файле App.jsx:

Обратите внимание на возможность переиспользования: мы написали код кнопки один раз, а использовали его дважды. Это и есть суть компонентного подхода.

Стрелочные функции

Компоненты часто записывают с использованием синтаксиса стрелочных функций. Это вопрос предпочтений команды, технически разница минимальна.

Props: Передача данных в компоненты

Компонент MyButton сейчас статичен — он всегда выводит «Нажми меня». Чтобы сделать компоненты гибкими, React использует механизм Props (свойства).

Props — это объект, который передается в функцию-компонент первым аргументом. Он содержит все атрибуты, которые вы передали компоненту при использовании.

Изменим нашу кнопку, чтобы она могла принимать текст и цвет:

Использование:

Деструктуризация пропсов

В современном коде редко обращаются к props.text. Чаще используют деструктуризацию прямо в аргументах функции для чистоты кода:

Props доступны только для чтения

Важнейшее правило React: компонент никогда не должен изменять свои собственные пропсы. Пропсы — это данные, которые «спустились сверху» от родителя. Если компоненту нужно изменить данные, он должен использовать «состояние» (State), о котором мы поговорим в следующих уроках.

Вложенность и композиция

React поощряет композицию — построение сложных интерфейсов из простых блоков. У каждого компонента есть специальный пропс children, который содержит всё, что находится между открывающим и закрывающим тегом компонента.

Пример компонента-карточки:

Здесь <h2> и <p> попадут в переменную children внутри компонента Card. Это позволяет создавать универсальные контейнеры.

Условный рендеринг

Часто нам нужно показать элемент только при определенном условии. Поскольку if внутри JSX не работает, используют логический оператор && (И).

В этом примере, если user.isAdmin равно true, React отрисует <span>. Если false — он проигнорирует эту часть и ничего не выведет.

Итоги

Мы разобрали фундамент написания кода на React. Теперь вы понимаете, как описывать интерфейс и создавать собственные теги.

JSX — это синтаксический сахар над JavaScript, позволяющий писать разметку внутри кода. Он требует компиляции.

Правила JSX: всегда закрывайте теги, используйте className вместо class, и возвращайте только один корневой элемент (или используйте Фрагмент <>...</>).

Фигурные скобки {} позволяют внедрять JavaScript-выражения в разметку. Инструкции (if, for) внутри них запрещены.

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

Props позволяют передавать данные от родительского компонента к дочернему. Они доступны только для чтения и делают компоненты переиспользуемыми.