Библиотека компонентов React
Библиотека React JS основана на концепции компонентов. Компоненты позволяют создавать любые блоки веб-сайта: кнопки, формы регистрации, секции (шапка, футер) и многое другое. Компонент – это блок, представляющий собой любую часть сайта.
Например, существующий HTML-код можно преобразовать в компонент. Рассмотрим переписывание структуры с использованием компонентов.
Создание компонентов: функции и классы
Компонент можно создать с помощью функции или класса. Начнём с функции (более простой вариант). Классы будут рассмотрены позже.
Создадим функцию function App() { … }. Имя функции – это имя компонента. В данном случае App описывает всё приложение. Внутри функции, после return, указывается возвращаемое значение – весь HTML-код. Теперь вместо константы elements используется компонент App. Этот компонент – JSX-элемент, отображаемый как HTML-тег.
После сохранения изменений на локальном сервере визуальных изменений не будет, но весь код окажется в одном месте. Мы создали основной компонент App.
Вложенные компоненты
В проекте может быть множество компонентов, количество которых зависит от количества блоков на сайте. Например, шапку можно вынести в отдельный компонент, а внутри шапки – кнопку в ещё один компонент. Глубина вложенности компонентов может быть произвольной.
Создадим компонент Header (шапка). Функция будет выглядеть так: function Header() { return ( … ); }. Здесь возвращается HTML-код шапки, например, <h1>Шапка сайта</h1>.
Компонент Header можно вывести в App, встроив его как HTML-тег. Возможно многократное выведение Header, но сейчас это не нужно.
Таким образом, у нас два компонента: основной App и вложенный Header.
Современный синтаксис функций и классы
Функции можно записывать в современном стиле: создать константу и присвоить ей анонимную функцию. Это эквивалентно предыдущему варианту, но проще.
В дальнейшем функции для компонентов используются редко. Чаще применяются классы, так как они позволяют описывать множество функций, добавляющих функционал компоненту, а также переменные.
Создадим класс вместо функции: class App extends React.Component { … }. extends React.Component указывает на наследование от родительского класса. В классе описывается функция render(), возвращающая HTML-код. После сохранения изменений всё будет работать как и раньше. Внутри класса можно разместить переменные и функции, относящиеся к компоненту.
Добавим методы handleClick и handleMouseOver, выводящие информацию в консоль, и переменную helpText. Теперь весь связанный код находится внутри одного компонента. Для доступа к значениям внутри класса в HTML-коде используется this, например, {this.helpText}.
Передача свойств компонентам (Props)
При вызове компонента можно передавать свойства. Например, свойство title при вызове Header: <Header title="Шапка сайта" />.
Внутри Header это свойство доступно через this.props.title. Это позволяет передавать разную информацию при каждом вызове компонента. Можно передавать несколько свойств. Важно: свойства только для чтения, их нельзя изменять.
Разделение кода на файлы
Разделим код на несколько файлов. Создадим файл App.js, куда поместим компоненты App и Header. Удалим создание компонентов из основного файла и импортируем их из App.js. Для этого нужно экспортировать компоненты из App.js. В основном файле импортируем App и выводим его на экран.
В React принято создавать каждый компонент в отдельном файле. Разместим компонент Header в отдельном файле Header.js в папке components. Экспортируем Header из Header.js. Импортируем Header в основной файл. Теперь структура проекта более логична.
Подключение CSS-стилей и изображений
Подключим CSS-файл (например, main.css) в index.js через import ‘./css/main.css’;. Добавим стили в main.css, например, для фона, текста и класса header. Теперь стили будут применены к проекту.
Создадим папку img для изображений. Добавим изображение (например, logo.png). Импортируем изображение в компонент Image.js и передадим путь к изображению как свойство img. Импортируем Image.js в App.js и выведем компонент с изображением. Для вывода изображения, его необходимо импортировать, как и CSS файл.
В этом уроке мы изучили создание компонентов, подключение стилей и изображений в React.