Build a Memory Game in React by Scrimba
Create an accessible, interactive memory game using React. This course takes you through building a polished project while exploring how to fetch data, manage state, and implement best practices for inclusivity and functionality.
Course Highlights
- Fetch and store API data using React state.
- Render dynamic components, such as memory cards, with API data.
- Implement functionality to detect and handle matching memory cards.
- Explore techniques to shuffle and randomize game data effectively.
- Develop accessible components using ARIA attributes and semantic HTML.
- Manage state for user interactions in memory games.
- Build a reusable EmojiButton component with conditional styling and attributes.
- Address error handling and display issues with dedicated components.
- Refactor forms and manage form data within React state effectively.
- Incorporate accessibility practices to ensure inclusivity across all components.
Skills you will learn!
Curriculum
10 Topics
Intro
Boilerplate code
Fetch data from API
Store API data in state
Aside: HTML entities
Render memory cards with API data
Issue with emojisData
Get random emojis pt. 1
Get random emojis pt. 2
Duplicate and shuffle emojis
10 Topics
Side note: Address future discrepancies
Select a memory card pt. 1
Select a memory card pt. 2
Select a memory card pt. 3
Detect matching cards
Are all memory cards matched?
Create EmojiButton component
Identify selected & matched cards in MemoryCard
Conditional memory card content
Conditional memory card styling
12 Topics
Aside: aria-label & aria-live
Disabled attribute & conditional event handler
Add aria-label to EmojiButton
Side note: Renamed state variable
Create AssistiveTechInfo component
Aside: aria-atomic
Make AssistiveTechInfo component accessible
Create GameOver component
Add button to GameOver component
Accessibility issue in GameOver component
Aside: Focus as an accessibility tool
Make GameOver component accessible
11 Topics
Handle errors with useState
Identify error handling issue
Create and render ErrorCard component
Refactor App to use formData
Create form elements
Save form selections in state
Refactor form pt. 1
Refactor form pt. 2
Improve accessibility of Form component
Outro
Certifcate of Completion
Build a Memory Game in React
Related React JS Courses
Thank You!
Your review has been submitted successfully.