Компонент — это часть сайта. Например, в приложении на ReactJS каждое видео, блок кода, готовый проект, каждый отдельный блок — это отдельный компонент. Эти компоненты могут быть объединены в более крупные компоненты. Форма, например, — это один большой компонент, состоящий из таких компонентов, как отдельные поля ввода или комментарии.
Компоненты важны в ReactJS, так как позволяют избежать дублирования кода, делая его более компактным, читаемым и удобным для сопровождения. Понимание концепции компонентов необходимо с самого начала.
Создание простого компонента
Создадим простой компонент.
- Объявление компонента: Используем ключевое слово const:
const Block =
- Определение компонента: Компонент React — это объект. Открываем фигурные скобки:
const Block = {};
- Метод render(): Внутри компонента определяем метод render(), возвращающий HTML-код для отображения:
const Block = { render: function() { return (<h3>Этот заголовок от компонента</h3>); } };
Этот компонент возвращает заголовок третьего уровня (<h3>). Вместо заголовка можно возвращать любой HTML-код, включая сложные структуры.
Отображение компонента
Для отображения компонента используем метод ReactDOM.render(), вставляя компонент в контейнер. В React это делается с помощью тега <Block />, который не является стандартным HTML-тегом, но в React обозначает вызов нашего компонента:
ReactDOM.render(
<div>
<Block />
</div>,
document.getElementById('root') // или другой ID вашего контейнера
);
Этот код вставляет компонент Block в элемент с id root. После сохранения изменений на странице появится заголовок «Этот заголовок от компонента». Компонент можно использовать многократно, получая одинаковый результат.
Мы изучили создание и использование простых компонентов в ReactJS. Компоненты — это не просто заголовки или абзацы, а полноценные части сайта (шапка, боковая панель и т.д.). Принцип работы с ними одинаков независимо от сложности. В последующих уроках мы рассмотрим более сложные аспекты ReactJS.