A Flashcard

Welcome to the final project of the React course! In this lesson, you'll put together what you've learned and build a whole app: flashcards for learning Spanish words. A card shows a Spanish word, and when you click it, it turns over and shows the English one. You go through the deck, mark the words you already know and add your own. The app remembers what you know for next time, and in the end, it lets you practice only the words you don't know yet.

You'll use components and props, events and state, lists and conditions, a form, an effect that loads data, and your own hook. Each exercise continues where the previous one ended (the editor starts with its finished code) and adds one piece.

The files. App.jsx shows a heading and one card. The card is a component of its own, Flashcard in Flashcard.jsx, and gets two props: the Spanish word and its English translation. For now, it only shows the word. main.jsx and index.html are as in the other lessons (only the title is different). style.css already has the styles for the whole app, also for the classes you'll add later, such as flipped for a card that's turned over.

Turning the card over. Whether the card is turned over changes when you click it, and the page shows it, so it's state: a boolean in Flashcard, false at first. A click changes it to the opposite, and the card shows one of its two props, depending on the state:

{flipped ? translation : word}

The card is a button, not a div: you can also get to a button with the Tab key and press it with Enter or the space bar, so the cards work with the keyboard too.