Написать генератор цитат на React очень просто! Мы будем использовать для этого useState - хук, позволяющий отслеживать состояние функционального компонента, в нашем случае для выбора цитаты. Хуки (Hooks) были добавлены в React версии 16.8. Хуки позволяют функциональным компонентам иметь доступ к состоянию и другим функциям React.
Для начала запускаем шаблонное React приложение на локальном сервере. Код приложения находится в папке src (все папки и файлы располагаются в корневой папке вашего приложения). Давайте упростим код в файле index.js, заменив его следующим:
Переходим в файл App.js, удаляем шаблонный код и начинаем писать свой. Чтобы использовать хук useState, нам сначала нужно импортировать его в наш компонент:
Далее вы можете использовать следующий шаблон:
В нашем функциональном компоненте App мы декларируем массив quotes и присваиваем ему набор цитат (можете добавить или выбрать свои). Далее мы декларируем useState с со значением 0. Это значение, т.е значение всего состояния, будет содержаться в массиве selected, а с помощью массива setSelected значение состояния будет обновляться. В return () мы вставляем первый элемент (соответствующий значению 0 в начальном состоянии useState) из нашего массива цитат. На данном этапе у нас должна отображаться первая цитата.
Для возможности выбора случайной цитаты добавим кнопку через отдельный компонент Button, включающий в себя два свойства (props): реагирование на нажатие и текст на самой кнопке (располагаем выше компонента App):
Нам понадобится функция, которая будет случайным образом определять номер (индекс) нашей цитаты из массива (располагаем ниже useState):
Далее определяем функцию, которая будет вызываться при каждом нажатии нашей кнопки:
Таким образом, при нажатии кнопки случайный индекс становится значением нашего состояния, хранящегося в selected.
И теперь для выбора случайных цитат преобразуем return () следующим образом, добавив компонент Button со значениями для его свойств:
Готово! При каждом нажатии на кнопку появляется случайная цитата из массива.
Подписывайтесь! Дальше - больше проектов.