Build a Memory Game in React

Sichern Sie sich eines unserer besten Angebote mit Coursera Plus für 199 $ (normalerweise 399 $). Jetzt sparen.

kurs ist nicht verfügbar in Deutsch (Deutschland)

Wir übersetzen es in weitere Sprachen. Sehen Sie sich die Sprachen an, die wir anbieten.

Build a Memory Game in React

Dozent: Ajo Borgvold

Bei enthalten

Mehr erfahren

Fragen Sie Coursera

4 Module

Verschaffen Sie sich einen Einblick in ein Thema und lernen Sie die Grundlagen.

Stufe Mittel

Empfohlene Erfahrung

5 Stunden zu vervollständigen

Flexibler Zeitplan

In Ihrem eigenen Lerntempo lernen

4 Module

Verschaffen Sie sich einen Einblick in ein Thema und lernen Sie die Grundlagen.

Stufe Mittel

Empfohlene Erfahrung

5 Stunden zu vervollständigen

Flexibler Zeitplan

In Ihrem eigenen Lerntempo lernen

Was Sie lernen werden

Building the architecture for a memory game, basic state setup, and API integration.
Core game functionality and interaction handling.
Accessibility enhancements and GameOver handling.

Kompetenzen, die Sie erwerben

Kategorie: React.js
Kategorie: Front-End Web Development
Kategorie: Web Development
Kategorie: Code Reusability
Kategorie: Computational Logic
Kategorie: Web Content Accessibility Guidelines
Kategorie: Game Design

Werkzeuge, die Sie lernen werden

Kategorie: Application Programming Interface (API)
Kategorie: Web Applications
Kategorie: Web Frameworks
Kategorie: UI Components
Kategorie: JavaScript Frameworks
Kategorie: Web Development Tools

Wichtige Details

Zertifikat zur Vorlage

Zu Ihrem LinkedIn-Profil hinzufügen

Bewertungen

4 Aufgaben

Unterrichtet in Englisch

Erfahren Sie, wie Mitarbeiter führender Unternehmen gefragte Kompetenzen erwerben.

Weitere Informationen zu Coursera für Unternehmen

Logos von Petrobras, TATA, Danone, Capgemini, P&G und L'Oreal

In diesem Kurs gibt es 4 Module

Discover how to build a fully interactive memory game in React, designed to enhance your development skills and with a focus on accessibility. This course guides you through each step, from fetching and managing API data to designing reusable components and implementing user interactions.

You’ll work on challenges such as randomizing game elements, detecting matches, and handling errors. Along the way, you'll gain practical experience in solving common development problems. Accessibility is a key focus of the project, with detailed guidance on ARIA attributes, semantic HTML, and designing for inclusivity. This course is ideal for anyone looking to deepen their React knowledge while working on a meaningful, real-world project. By the end, you’ll have an accessible, polished memory game that demonstrates your skills and commitment to building user-friendly applications.

This module focuses on the project outline and essential functionalities. You will lay the groundwork with API integration, basic state setup, and card rendering.

Das ist alles enthalten

1 Aufgabe11 Plug-ins

1 AufgabeInsgesamt 15 Minuten

Building the Foundation Quiz15 Minuten

11 Plug-insInsgesamt 57 Minuten

Intro6 Minuten
Welcome to interactive lessons!1 Minute
Boilerplate code6 Minuten
Fetch data from API5 Minuten
Store API data in state4 Minuten
Aside: HTML entities5 Minuten
Render memory cards with API data5 Minuten
Issue with emojisData3 Minuten
Get random emojis pt. 110 Minuten
Get random emojis pt. 26 Minuten
Duplicate and shuffle emojis6 Minuten

Next up, it's time to build the core game logic and interaction handling.

Das ist alles enthalten

1 Aufgabe10 Plug-ins

1 AufgabeInsgesamt 15 Minuten

Module 2 Quiz15 Minuten

10 Plug-insInsgesamt 68 Minuten

Side note: Address future discrepancies3 Minuten
Select a memory card pt. 16 Minuten
Select a memory card pt. 25 Minuten
Select a memory card pt. 310 Minuten
Detect matching cards9 Minuten
Are all memory cards matched?5 Minuten
Create EmojiButton component8 Minuten
Identify selected & matched cards in MemoryCard6 Minuten
Conditional memory card content6 Minuten
Conditional memory card styling10 Minuten

In this module, you'll explore accessibility improvements and implement GameOver handling.

Das ist alles enthalten

1 Aufgabe12 Plug-ins

1 AufgabeInsgesamt 15 Minuten

Module 3 Quiz15 Minuten

12 Plug-insInsgesamt 72 Minuten

Disabled attribute & conditional event handler7 Minuten
Aside: aria-label & aria-live10 Minuten
Add aria-label to EmojiButton9 Minuten
Side note: Renamed state variable1 Minute
Create AssistiveTechInfo component9 Minuten
Aside: aria-atomic6 Minuten
Make AssistiveTechInfo component accessible3 Minuten
Create GameOver component3 Minuten
Add button to GameOver component8 Minuten
Accessibility issue in GameOver component2 Minuten
Aside: Focus as an accessibility tool10 Minuten
Make GameOver component accessible4 Minuten

This modules covers error handling, form integration, and wrapping up the project!

Das ist alles enthalten

1 Aufgabe10 Plug-ins

1 AufgabeInsgesamt 15 Minuten

Module 4 Quiz15 Minuten

10 Plug-insInsgesamt 66 Minuten

Identify error handling issue3 Minuten
Handle errors with useState6 Minuten
Create and render ErrorCard component7 Minuten
Refactor App to use formData8 Minuten
Create form elements9 Minuten
Save form selections in state6 Minuten
Refactor form pt. 17 Minuten
Refactor form pt. 26 Minuten
Improve accessibility of Form component9 Minuten
Outro5 Minuten

Dozent

Ajo Borgvold

Scrimba

2 Kurse972 Lernende

von

Scrimba

Mehr von Mobile and Web Development entdecken

Status: Kostenloser Testzeitraum
Scrimba
Learn React Hooks: Build a Tic Tac Toe Game
Kurs
Packt
Building UI Components with Storybook - A Practical Tutorial
Kurs
Packt
React JS Portfolio Builder 2026 - Hands-On Beginner Workshop
Kurs
Status: Kostenloser Testzeitraum
Packt
React Basics and Initial Projects
Kurs

Warum entscheiden sich Menschen für Coursera für ihre Karriere?

Felipe M.

Lernender seit 2018

„Es ist eine großartige Erfahrung, in meinem eigenen Tempo zu lernen. Ich kann lernen, wenn ich Zeit und Nerven dazu habe.“

Jennifer J.

Lernender seit 2020

„Bei einem spannenden neuen Projekt konnte ich die neuen Kenntnisse und Kompetenzen aus den Kursen direkt bei der Arbeit anwenden.“

Larry W.

Lernender seit 2021

„Wenn mir Kurse zu Themen fehlen, die meine Universität nicht anbietet, ist Coursera mit die beste Alternative.“

Chaitanya A.

„Man lernt nicht nur, um bei der Arbeit besser zu werden. Es geht noch um viel mehr. Bei Coursera kann ich ohne Grenzen lernen.“

Häufig gestellte Fragen

To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.

When you purchase a Certificate you get access to all course materials, including graded assignments. Upon completing the course, your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.

Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.