ReactJS компоненты: подробное руководство

Компонент — это часть сайта. Например, в приложении на ReactJS каждое видео, блок кода, готовый проект, каждый отдельный блок — это отдельный компонент. Эти компоненты могут быть объединены в более крупные компоненты. Форма, например, — это один большой компонент, состоящий из таких компонентов, как отдельные поля ввода или комментарии.

Компоненты важны в ReactJS, так как позволяют избежать дублирования кода, делая его более компактным, читаемым и удобным для сопровождения. Понимание концепции компонентов необходимо с самого начала.

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

Создадим простой компонент.

  1. Объявление компонента: Используем ключевое слово const:

    const Block = 
  2. Определение компонента: Компонент React — это объект. Открываем фигурные скобки:

    const Block = {};
  3. Метод 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.

Что будем искать? Например,программа