Поздравляем!

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

Последнее улучшение. Слова, которые вы знаете, исчезли из карточек, поэтому хорошо бы видеть их где-нибудь. Покажите их списком под кнопками. Список вычисляется так же, как toLearn, только с противоположным условием, а map() превращает его в элементы li, каждый со своим key:

const knownWords = deck.filter((word) => known.includes(word.id));

<ul className="known-words">
    {knownWords.map((word) => (
        <li key={word.id}>
            {word.spanish}: {word.russian}
        </li>
    ))}
</ul>

Если хотите, добавьте над ним заголовок, например Выученные слова, и показывайте оба, только когда список не пуст: knownWords.length > 0 && …, а не knownWords.length && …, который показал бы 0.

Чему вы научились. Каждая часть курса нашла своё место в вашем приложении:

• Компоненты: приложение состоит из App, Flashcard и WordForm, каждый в своём файле, связанных через export default и import.
• JSX: разметка прямо в JavaScript, с className и значениями в фигурных скобках.
• Пропсы: Flashcard получает слово и перевод, а WordForm — функцию onAdd.
• Списки и условия: filter() и map() с key, условный оператор для стороны и класса карточки и ранний return для загрузки, ошибки и конца.
• События: onClick, onChange и onSubmit с preventDefault().
• Состояние: перевёрнута ли карточка, индекс, слова и то, что вы знаете. Массивы в состоянии никогда не меняют на месте.
• Формы: управляемые поля, которые проверяют, что вы печатаете, и показывают сообщение об ошибке.
• Общее состояние: слова живут в App, который даёт форме функцию для добавления слова. Колода, позиция, счёт и оставшиеся карточки вычисляются, а не хранятся.
• Эффекты: fetch() в эффекте загружает words.json, с сообщениями Загрузка… и об ошибке.
• Собственные хуки: useLocalStorage запоминает, что вы знаете, а все хуки стоят в начале компонента.

React на вашем компьютере. В упражнениях наш сайт делал то, что на вашем компьютере делает инструмент Vite (по-французски «быстрый», произносится «вит»): превращал JSX в JavaScript и соединял файлы. Так обычно и создаются настоящие проекты на React. Вам понадобятся Node.js (возьмите версию LTS), вместе с которым устанавливается npm, программа для установки пакетов (готовых программ и библиотек), и терминал (командная строка). Откройте терминал в папке, где хотите создать проект, и выполните:

npm create vite@latest flashcards

Vite задаст несколько вопросов. Выберите фреймворк React и вариант JavaScript. Когда он предложит установить проект и сразу запустить его, ответьте «No», чтобы сделать это самим; на любой другой вопрос подойдёт предложенный им ответ. Затем перейдите в новую папку, установите пакеты и запустите проект:

cd flashcards
npm install
npm run dev

npm install скачивает React, Vite и всё, что им нужно, в папку node_modules. npm run dev запускает сервер разработки Vite и показывает адрес вашего приложения, http://localhost:5173/. Откройте его в браузере. Каждый раз, когда вы сохраняете файл, страница обновляется сама. Сервер работает, пока вы не остановите его клавишами Ctrl+C в терминале.

Файлы проекта расположены так же, как файлы упражнений, только JavaScript лежит в папке src. Скопируйте своё приложение в проект:

• index.html лежит в папке проекта, с <div id="root"> и script, который загружает /src/main.jsx. Оставьте его как есть, кроме title.
• src/main.jsx отрисовывает <App />, как и ваш, только импортирует ./index.css. Замените это на ./style.css.
• src/App.jsx — компонент App. Замените его код своим и сохраните рядом с ним, в src, файлы Flashcard.jsx, WordForm.jsx, useLocalStorage.js и style.css.
• public — для файлов, которые попадают в интернет как есть и которые приложение получает по их адресу. Сохраните туда words.json, и fetch("words.json") его найдёт.

В примере Vite в src есть ещё App.css, index.css и папка assets. Ваше приложение их не использует, поэтому их можно удалить. А package.json перечисляет пакеты проекта и его команды, такие как dev и build.

StrictMode. В main.jsx от Vite <App /> обёрнут в StrictMode. (Vite также пишет строки в одинарных кавычках и не ставит точки с запятой, что работает так же хорошо.)

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

StrictMode ничего не меняет на странице. Он включает дополнительные проверки во время разработки: React отрисовывает каждый компонент дважды, а каждый эффект запускает, очищает и запускает снова, как будто компонент появился, исчез и появился опять. Так эффект без очистки сразу показывает свою ошибку: интервал без clearInterval() запустился бы дважды. Мы не включили StrictMode в упражнения, потому что с ним console.log() в эффекте печатает всё дважды, а это сбивает с толку в начале. В своём проекте оставьте его. Ваше приложение с ним работает: эффект просто дважды загрузит слова, и это не навредит. Эти проверки работают только при разработке, а не в готовом приложении.

Публикация в интернете. npm run build создаёт готовое приложение в папке dist: index.html, файлы из public и в assets ваши JavaScript и CSS, собранные вместе и без JSX, готовые для браузеров. npm run preview позволяет сначала его опробовать. dist — обычный сайт, который может раздавать любой веб-хостинг. На Netlify Drop вы перетаскиваете папку на страницу, и у вашего приложения появляется адрес в интернете (чтобы оно осталось там надолго, зарегистрируйтесь бесплатно). Netlify и Vercel также могут сами брать ваш проект с GitHub и собирать его после каждого изменения.

React Developer Tools — расширение для Chrome, Firefox и Edge. В инструментах разработчика браузера (F12, на Mac — Cmd+Option+I) оно добавляет вкладку Components с деревом ваших компонентов: щёлкните по одному из них, и вы увидите его пропсы, состояние и другие хуки, а можете даже изменить их, чтобы посмотреть, что получится.

Что дальше. Несколько идей:

• Продолжайте улучшать карточки. Для этого вы знаете всё нужное: кнопка, которая удаляет одно из ваших слов, карточки наоборот (сначала русское слово), перемешивание колоды, реф, который возвращает курсор в первое поле после добавления слова, или несколько колод (animals.json, food.json) с select и эффектом, который загружает выбранную.
• Документация React на react.dev объясняет всё из этого курса глубже, с упражнениями, и описывает каждый хук.
• Контекст и useReducer: контекст передаёт данные компонентам, лежащим глубоко, не проводя их через пропсы каждого компонента по пути, а useReducer держит в одном месте состояние с множеством видов изменений.
• Действия форм появились в React 19: функция в <form action={…}> получает данные формы, а useActionState и useFormStatus сообщают, отправляются ли они ещё и чем всё закончилось.
• React Router даёт приложению несколько страниц с собственными адресами, например / и /words.
• TypeScript описывает, что лежит в пропсах и состоянии, и находит многие ошибки ещё до запуска приложения. У Vite для него есть вариант TypeScript, а курс TypeScript его преподаёт.
• Next.js — фреймворк на основе React для целых сайтов: страницы в файлах, отрисовка на сервере и загрузка данных. Этот сайт тоже на нём построен.