Карточка

Добро пожаловать в итоговый проект курса React! В этом уроке вы соберёте всё, чему научились, и создадите целое приложение: карточки для изучения испанских слов. На карточке написано испанское слово, а по щелчку она переворачивается и показывает русское. Вы листаете колоду, отмечаете слова, которые уже знаете, и добавляете свои. Приложение запоминает, что вы знаете, до следующего раза, а в конце позволяет повторять только те слова, которые вы ещё не выучили.

Вы используете компоненты и пропсы, события и состояние, списки и условия, форму, эффект, который загружает данные, и собственный хук. Каждое упражнение продолжает предыдущее (в редакторе уже готовый код) и добавляет одну часть.

Файлы. В App.jsx — заголовок и одна карточка. Карточка — отдельный компонент, Flashcard в Flashcard.jsx, и получает два пропса: испанское слово word и его русский перевод translation. Пока она показывает только слово. main.jsx и index.html такие же, как в других уроках (отличается только заголовок). В style.css уже есть стили для всего приложения, в том числе для классов, которые вы добавите позже, например flipped для перевёрнутой карточки.

Переворачиваем карточку. Перевёрнута ли карточка, меняется по щелчку, и страница это показывает, значит, это состояние: логическое значение в Flashcard, сначала false. Щелчок меняет его на противоположное, а карточка показывает один из двух пропсов в зависимости от состояния:

{flipped ? translation : word}

Карточка — это button, а не div: до кнопки можно добраться клавишей Tab и нажать её клавишей Enter или пробелом, поэтому карточки работают и с клавиатуры.