1. Основы и вёрстка: Создание компонентов и UI-структуры приложения
Основы и вёрстка: Создание компонентов и UI-структуры приложения
Добро пожаловать в курс «React с нуля». Мы пройдем путь от создания первого файла до архитектурно сложного приложения с кэшированием данных и глобальным стейт-менеджментом. Но любой сложный механизм начинается с простых деталей. В React такими деталями являются компоненты.
В этой статье мы разберем философию React, настроим окружение, изучим синтаксис JSX и сверстаем каркас нашего будущего приложения, используя компонентный подход.
Смена парадигмы: от страниц к компонентам
В классической веб-разработке мы привыкли мыслить страницами: index.html, about.html, contact.html. В React мы мыслим компонентами. Страница — это не монолитный файл, а дерево вложенных друг в друга элементов.
Согласно документации Next.js, пользовательские интерфейсы можно разбить на небольшие строительные блоки, называемые компонентами, которые позволяют создавать самодостаточные, повторно используемые фрагменты кода.
Представьте, что вы собираете конструктор LEGO. У вас есть кубики разных цветов и размеров. Из одних и тех же кубиков можно собрать замок, машину или космический корабль. В React:
* Кубик — это компонент (Кнопка, Карточка товара, Хедер). * Инструкция по сборке — это ваш код, который говорит, в каком порядке эти компоненты отображать.
Почему это эффективно?
Настройка окружения: Vite вместо CRA
Долгое время стандартом был create-react-app (CRA), но сейчас индустрия перешла на Vite. Он быстрее, легче и современнее. Для начала работы вам понадобится Node.js.
Откройте терминал и выполните команду:
После запуска вы увидите локальный адрес (обычно http://localhost:5173). Это ваш сервер разработки. Все изменения в коде будут мгновенно отображаться в браузере.
JSX: HTML в JavaScript
Открыв файл App.jsx, вы увидите синтаксис, который выглядит как HTML, но находится внутри JavaScript-файла. Это JSX (JavaScript XML).
Ключевые правила JSX
div в DOM-дереве, используйте Фрагмент: <> ... </>.<img />, <input />, <br />.class — это зарезервированное слово в JS, в JSX используется className. Свойства из нескольких слов пишутся в camelCase: tabIndex, onClick.Интерполяция JavaScript
Самая мощная фишка JSX — возможность вставлять JavaScript-выражения прямо в разметку, используя фигурные скобки {}.
Внутри {} может быть любое валидное JS-выражение: переменная, функция, математическая операция или тернарный оператор. Единственное ограничение — там не может быть инструкций вроде if или for (но их можно заменить на тернарные операторы и методы массивов).
Анатомия компонента
В современном React компоненты — это обычные функции. Они принимают данные (props) и возвращают JSX.
Создание первого компонента
Давайте создадим структуру нашего проекта. В папке src создайте папку components. Внутри создадим файл Header.jsx.
> В React компоненты — это функции. Внутри тега script создайте новую функцию header. > > Next.js Русский
Важно: Название функции компонента обязательно должно начинаться с большой буквы. Это позволяет React отличать ваши компоненты от встроенных HTML-тегов (<Header /> против <header>).
Файл src/components/Header.jsx:
Теперь подключим его в главном файле App.jsx:
Props: Передача данных
Компоненты были бы бесполезны, если бы они всегда рендерили одно и то же. Чтобы сделать их динамическими, мы используем Props (пропсы). Это аргументы функции-компонента.
Создадим карточку товара ProductCard.jsx:
Проп children
Существует специальный проп children. Он содержит всё, что вы передаете между открывающим и закрывающим тегом вашего компонента. Это полезно для создания компонентов-оберток (Layouts, Modals, Cards).
Рендеринг списков
В реальных приложениях данные приходят массивами. В React для вывода списков используется метод массива .map().
Предположим, у нас есть массив данных (в будущем он придет из API через axios, но пока захардкодим его):
Выведем их в App.jsx:
Зачем нужен key?
Обратите внимание на атрибут key. Это обязательное требование при рендеринге списков. key помогает React понять, какой элемент был изменен, добавлен или удален. Значение ключа должно быть уникальным и стабильным (лучше всего подходят ID из базы данных). Использование индекса массива (index) в качестве ключа является антипаттерном, если порядок элементов может меняться.
Стилизация и CSS
React не навязывает способ стилизации. Вы можете использовать:
import './App.css'. Глобальная область видимости (может привести к конфликтам имен).App.module.css. Классы автоматически получают уникальные хеши, что предотвращает конфликты. Это предпочтительный вариант для чистого React.Для текущего этапа достаточно создать App.css и задать базовую сетку:
Итоги
Мы заложили фундамент нашего приложения. Теперь у нас есть понимание того, как строится интерфейс в React.
className вместо class..map(), при этом каждому элементу необходим уникальный проп key.В следующей статье мы оживим наше приложение, добавив ему состояние (State) и научимся обрабатывать события (клики, ввод данных).