8 React.js Projektideen, die Ihnen helfen sollen, durch Lernen zu lernen

Eine der besten Möglichkeiten zu lernen ist das Tun. Aber oft haben Entwickler Probleme mit der großen Frage "Was soll ich bauen?"

Hier sind 8 Projektideen mit Projektbeschreibungen und Layoutideen, damit Sie mit dem Lernen beginnen können.

  • Business & Real-World: Kartenstatistik-Dashboard
  • Spaß & interessant: Musikinstrument
  • Persönlich & Portfolio: Blog
  • Produktivität: Notebook
  • Puzzles & Spiele: Space Invaders
  • Tools & Bibliotheken: Framework-Thema
  • Projekt-Add-Ons: Webmentionen
  • Klone: ​​Produktjagd

Dies ist eine Vorschau des kostenlosen eBooks 50 Projects for React & the Static Web. Die vollständigen 50 Projektideen einschließlich dieser 8 finden Sie unter 50reactprojects.com.

Kartenstatistik-Dashboard

Kategorie: Business & Real-World

Erstellen Sie ein Karten-Dashboard mit Statistiken und geografischen Informationen zu COVID-19.

Kurz

Der Umgang mit einer globalen Pandemie bedeutet, dass Viren wie das Coronavirus die Welt je nach geografischer Lage unterschiedlich beeinflussen.

Eine Karte mit einer Aufschlüsselung der Statistiken der einzelnen Länder ist eine nützliche Methode, um festzustellen, welche Länder am stärksten betroffen sind.

Level 1

Der einfachste Weg, Statistiken von Land zu Land anzuzeigen, besteht darin, eine Karte zu haben, auf der Sie die Statistiken der einzelnen Länder neben diesem Land durchsuchen können.

Erstellen Sie eine Karten-App, die die Coronavirus-API von disease.sh verwendet, um der Karte Marker für jedes Land sowie die Anzahl der COVID-19-Fälle hinzuzufügen.

Level 2

Obwohl es hilfreich ist, die Statistiken für jedes Land zu haben, kann es nützlich sein, diese Statistiken mit der Anzahl der Fälle auf der ganzen Welt vergleichen zu können.

Fügen Sie ein Statistik-Dashboard hinzu, in dem die Anzahl der COVID-19-Fälle weltweit sowie alle anderen nützlichen Statistiken der API angezeigt werden.

Stufe 3

Aktuelle Statistiken zu erhalten ist ein guter Weg, um den aktuellen Zustand der Welt zu verstehen, aber wie ist das historisch zu vergleichen?

Verwenden Sie die API für historische Daten, um Diagramme im Dashboard anzuzeigen, die den Kontext für das Wachstum und die Verbreitung des Virus bereitstellen.

Machen

  • Erstellen Sie eine neue Karten-App
  • Abrufen von API-Länderdaten
  • Markierungen zur Karte hinzufügen
  • Fügen Sie Statistiken zu Markierungen hinzu
  • Globale API-Daten abrufen
  • Erstellen Sie ein Statistik-Dashboard
  • Fügen Sie globale Statistiken hinzu
  • API-Verlaufsdaten abrufen
  • Fügen Sie der Karte Diagramme hinzu

Werkzeugkasten

  • Open Disease Data API (Krankheit.sh)
  • React Leaflet (react-leaflet.js.org)
  • Gatsby Leaflet Starter (github.com)

Tutorials

  • So erstellen Sie eine Coronavirus (COVID-19) Dashboard- und Karten-App in Reaktion mit Gatsby und Leaflet (freecodecamp.org)
  • So fügen Sie Ihrem React Map-Dashboard mit Gatsby (freecodecamp.org) Fallstatistiken zu Coronavirus (COVID-19) hinzu
  • Kartierung mit React Leaflet (egghead.io)

Inspiration

  • COVID-19-Dashboard des Zentrums für Systemwissenschaft und -technik (CSSE) der Johns Hopkins University (JHU) (coronavirus.jhu.ed)
  • Coronavirus (COVID-19) Dashboard-Demo (coronavirus-map-dashboard.netlify.app)

Layout-Idee

Musikinstrument

Kategorie: Spaß & Interessant

Erstellen Sie ein interaktives Klavier, mit dem Sie Musik mit Ihrer Tastatur abspielen können.

Kurz

Nicht jeder hat den Luxus, ein Musikinstrument zu besitzen, aber vielleicht haben diese Leute einen Laptop, ein Telefon oder ein Tablet. Ein Klavier zu haben ist eine mächtige Möglichkeit, Menschen Musik spielen zu lassen, auch wenn sie vorher keine Gelegenheit dazu hatten.

Level 1

Mithilfe der Browser- und Web-Audio-APIs können wir Sounds erstellen, die zusammen wie Musik klingen können.

Erstellen Sie eine Reihe von Schaltflächen, die beim Klicken Noten einer Skala wiedergeben.

Level 2

Während nicht jeder zuvor ein Instrument gespielt hat, ist das Konzept und die Benutzeroberfläche eines Instruments wie eines Klaviers im Allgemeinen intuitiver als eine Reihe von Tasten.

Erstellen Sie ein Klavierlayout mit Schaltflächen, die entweder durch Klicken auf die Schaltfläche oder über die physische Tastatur funktionieren.

Stufe 3

Wir haben möglicherweise nur begrenzten Speicherplatz im Browser, aber es gibt eine große Auswahl an Noten, Skalen und Sounds, die eine elektrische Tastatur mit einigen zusätzlichen Effekten erzeugen kann.

Erstellen Sie Effektschalter, die den Klang der Noten beim Umschalten ändern.

Machen

  • Schaltflächen erstellen
  • Spielen Sie den Sound ab, wenn Sie darauf klicken
  • Ordnen Sie Notizen in einer Skala an
  • Erstellen Sie ein Klavierlayout
  • Festlegen von Tastaturereignissen
  • Effektlayout erstellen
  • Audioeffekte umschalten

Werkzeugkasten

  • Reagiere auf HotKeys (github.com)

Tutorials

  • Ein Klavier mit React Hooks bauen (dev.to)
  • So erstellen Sie eine Klaviertastatur mit Vanilla JavaScript (freecodecamp.org)
  • Mit Tone.js ein Klavier bauen! (dev.to)
  • Wie ich ein Klavier in nur 1 KB JavaScript gemacht habe (frankforce.com)

Inspiration

  • React Guitar (react-guitar.com)

Layout-Idee

Blog

Kategorie: Persönlich & Portfolio

Erstellen Sie ein Blog, in dem Sie Ihre Karriereerfahrungen und Projekte teilen können.

Kurz

In jeder Karriere ist ein Blog zum Teilen Ihrer Erfahrungen eine gute Möglichkeit, die Leute wissen zu lassen, woran Sie arbeiten, und anderen zu helfen, aus Ihren Erfahrungen zu lernen.

Dies ist auch eine Möglichkeit, das Gelernte zu vertiefen, damit Sie in Zukunft darauf verweisen können.

Level 1

Um Ihre Erfahrungen teilen zu können, benötigen Sie eine Website-Struktur, mit der Sie neue Inhalte erstellen und vorhandene Inhalte verwalten können.

Eine Möglichkeit, dies zu tun, besteht darin, Markdown-Dateien zu erstellen, aus denen Ihre Website neue Seiten erstellt und die Beiträge anzeigt.

Erstellen Sie ein Blog mit Markdown-Dateien als Inhaltsquelle.

Level 2

Wenn Sie Ihre Inhalte in Markdown-Dateien haben, können Sie statische Inhalte gut verwalten. Möglicherweise möchten Sie jedoch nicht jedes Mal Code bearbeiten müssen, wenn Sie einen Beitrag schreiben oder bearbeiten.

Integrieren Sie ein Content-Management-System, mit dem Sie neue Inhalte hinzufügen oder vorhandene mit einer schönen Benutzeroberfläche bearbeiten können.

Stufe 3

Wenn Sie Code in Ihrem Blog freigeben, unterstützt HTML nativ den Code und die Pre-Tags, mit denen Sie Code lesbar formatieren können. Dies beinhaltet jedoch keine Syntaxhervorhebung, die zur Verbesserung der Lesbarkeit beiträgt.

Integrieren Sie einen Syntax-Textmarker, der Codeblöcke besser lesbar macht.

Machen

  • Erstellen Sie ein Blog
  • Fügen Sie den ersten statischen Inhalt hinzu
  • Statischer Quellinhalt
  • CMS integrieren
  • Fügen Sie dem Inhalt Code hinzu
  • Syntaxhervorhebung hinzufügen

Werkzeugkasten

  • Netlify CMS (netlifycms.org)
  • Prism.js (prismjs.com)

Tutorials

  • Erstellen eines Gatsby-Blogs mit Netlify CMS (gatsbyjs.org)
  • So erstellen Sie Ihr Coding-Blog von Grund auf neu mit Gatsby und MDX (freecodecamp.org)

Inspiration

  • Gatsby Netlify CMS Starter (gatsby-netlify-cms.netlify.app)

Layout-Idee

Notizbuch

Kategorie: Produktivität

Erstellen Sie eine Notizbuch-App, um eine Gruppe von Notizen hinzuzufügen, zu verwalten und zu organisieren.

Kurz

Notizen zu machen ist eine großartige Möglichkeit, um sicherzustellen, dass wir unsere Gedanken im Auge behalten oder uns an die wichtigen Erkenntnisse aus einem Meeting erinnern. Es ist wichtig, sie einfach verwalten und organisieren zu können, um sie später zu finden!

Level 1

Die erste Anforderung an ein Notizbuch besteht darin, Notizen machen zu können. Dies kann ziemlich einfach zu beginnen sein, wenn Sie wirklich eine Art Eingabe benötigen, die das, was Sie schreiben, sammelt und für später irgendwo speichert.

Erstellen Sie ein Formular, um neue Notizen hinzuzufügen und in einer Liste anzuzeigen.

Level 2

Um Ihre Notizen später zu finden, möchten Sie diese Notizen organisieren und nachschlagen. Dazu gehört das Hinzufügen von Kategorien oder eines Tagging-Systems sowie eine Benutzeroberfläche, über die gesucht werden kann.

Fügen Sie die Möglichkeit zum Notieren oder Kategorisieren von Notizen und eine Eingabe zum Durchsuchen hinzu.

Stufe 3

Ob wir es realisieren oder nicht, wir können Verbindungen zwischen unseren Gedanken und vor allem unseren Notizen finden, wo wir dieses Netzwerk von Gedanken für unser Notizbuch nutzen können.

Fügen Sie Roam Research-inspirierte Verknüpfungen von Notizen hinzu, um ein Netzwerk von Gedanken zu erstellen.

Machen

  • Erstellen Sie ein Formular
  • Speichern Sie neue Notizen
  • Notizen auflisten
  • Tags oder Kategorien hinzufügen
  • Notizensuche hinzufügen
  • Notiznetzwerk hinzufügen

Werkzeugkasten

  • Gatsby Brain Theme (github.com)
  • Fuse.js (fusejs.io)

Tutorials

  • Hinzufügen einer Suche zu einer Reaktions-App mit Fuse.js (freecodecamp.org)

Inspiration

  • Schaum (foambubble.github.io)
  • Roam Research (roamresearch.com)
  • Gatsby Garden Theme (github.com)

Layout-Idee

Space Invaders

Kategorie: Puzzles & Spiele

Erstellen Sie ein Space Invaders Spacecraft-Shooter-Spiel, um mehrere Wellen feindlicher Schiffe abzuschießen.

Kurz

Space Invaders ist ein Arcade-Klassiker, der Sie in ein Raumschiff gegen eine außerirdische Invasion versetzt. Wenn Sie versuchen, sie abzuschießen, schießen sie zurück und Sie haben nur einen begrenzten Schutz, bevor Sie getroffen werden können.

Level 1

Der Kern des Spiels besteht darin, dass Sie sich in einem Raumschiff bewegen und versuchen, eine Reihe von Außerirdischen mit Ihren Waffen zu treffen. Während es einen von euch gibt, gibt es viele von ihnen.

Erstelle ein Raumschiff, das sich bewegen und Aliens abschießen kann, die sich nicht bewegen.

Level 2

Was das Spiel schwierig macht, ist, dass sich die Aliens ständig bewegen. Jedes Mal, wenn sie den Rand des Spielbereichs erreichen, fallen sie herunter und beschleunigen, um näher an Ihr Schiff heranzukommen.

Füge den Aliens Bewegung hinzu, die auf dem Spielbereich hin und her gehen. Jedes Mal, wenn die Außerirdischen eine Seite erreichen, sollten sie eine Stufe tiefer fallen. Sie sollten auch in bestimmten Intervallen beschleunigen.

Stufe 3

Du bist auf dich allein gestellt, aber zum Glück kannst du etwas Schutz bekommen. Du hast Schilde, hinter denen du dich verstecken kannst, um dich zu schützen, solange sie dauern.

Erstelle mehrere Schilde vor dem Raumschiff des Spielers, die eine begrenzte Menge an Schaden erleiden können.

Machen

  • Erstelle ein neues Spiel
  • Erstellen Sie statische Aliens
  • Erstelle ein Spieler-Raumschiff
  • Fügen Sie Steuerelemente für Raumfahrzeuge hinzu
  • Fügen Sie eine Raumfahrzeugwaffe hinzu
  • Alienschaden konfigurieren
  • Lass Aliens zurückschießen
  • Aliens bewegen
  • Fügen Sie Alien-Intervalle hinzu
  • Schilde hinzufügen

Tutorials

  • Lerne JavaScript, indem du 7 Spiele baust (freecodecamp.org)

Inspiration

  • Space Invaders (codepen.io)

Layout-Idee

Framework-Thema

Kategorie: Tools & Bibliotheken

Erstellen Sie ein Gatsby-Thema, das ein Projekt mit dem Tailwind CSS-Framework erstellt.

Kurz

Als Entwickler müssen wir normalerweise jedes Mal, wenn wir ein neues Projekt erstellen, eine Reihe ähnlicher Schritte ausführen. Mit Tools wie Themen können wir diese Schritte jedoch abstrahieren und auf benutzerfreundliche Weise verpacken, die für jedes neue Projekt geeignet ist.

Level 1

Gatsby-Themes sind ein Plugin-ähnliches System, bei dem wir die Gatsby-Pipeline nutzen können, um Funktionen als Paket auf npm zu teilen.

Dies öffnet die Tür, um wirklich alles zu tun, was wir auf einer Gatsby-Site tun würden, macht es jedoch für jede Gatsby-Site wiederverwendbar.

Erstellen Sie ein neues Gatsby-Thema, das bei Verwendung eine neue Styleguide-Seite für jedes Projekt erstellt, zu dem es hinzugefügt wurde.

Level 2

Das Ziel von Themen ist nicht nur das Erstellen von Seiten, sondern auch das Hinzufügen von Funktionen, die uns produktiv machen. Dies beinhaltet Dinge wie Frameworks und Projektkonfigurationen.

Fügen Sie dem Gatsby-Design ein CSS-Framework hinzu, mit dem das hinzugefügte Projekt dieses Framework verwenden kann.

Stufe 3

Manchmal sind Themen nur als Werkzeuge besser, manchmal ist es hilfreich, eine Meinung zu haben. Eine Möglichkeit, einem CSS-Framework nützliche Funktionen hinzuzufügen, besteht darin, Bestandskomponenten zu erstellen.

Erstellen Sie wiederverwendbare React-Komponenten mit dem CSS-Framework, das in dem Projekt verwendet werden kann, zu dem das Thema hinzugefügt wurde.

Machen

  • Erstellen Sie ein neues Thema
  • Zum Beispielprojekt hinzufügen
  • Neue Stilseite erstellen
  • CSS-Framework hinzufügen
  • Verwenden Sie im Beispiel CSS
  • Erstellen Sie Komponenten
  • Verwenden Sie Komponenten

Werkzeugkasten

  • Gatsby-Themen (gatsbyjs.org)
  • Rückenwind (tailwindcss.com)

Tutorials

  • Erstellen eines Themas (gatsbyjs.org)
  • Was ist Tailwind CSS und wie kann ich es meiner Website oder React App hinzufügen? (freecodecamp.org)

Inspiration

  • Gatsby Rückenwind-Thema (github.com)

Layout-Idee

Webmentionen

Kategorie: Projekt-Add-Ons

Fügen Sie einer Website, die Twitter-Interaktionen mit der Website anzeigt, die Integration von Webmentionen hinzu.

Kurz

Soziale Interaktion ist ein wirkungsvoller Weg, um mehr Publikum und Konversation zu Themen zu bringen, über die wir schreiben.

Etwas auf einer Website zu haben, zeigt, dass Interaktion hilfreich sein kann, um Menschen dazu zu inspirieren, sich zu engagieren, oder um Menschen das Gefühl zu geben, ein Teil davon zu sein.

Level 1

Um Webmentions nutzen zu können, muss eine Website mit Meta-Tags konfiguriert werden, um Informationen bereitzustellen.

Fügen Sie einer Website die richtigen Meta-Tags hinzu und überprüfen Sie deren Verwendung mit webmention.io.

Level 2

Mit der Webmentions-API können Sie Verbindungen in sozialen Interaktionen programmgesteuert über eine URL Ihrer Website anzeigen. Sie können die Art der Interaktion und sogar den Profil-Avatar der Person abrufen.

Verbinden Sie eine Website mit Webmentions und fügen Sie eine Liste sozialer Interaktionen zu Blogpostseiten hinzu.

Stufe 3

Jetzt, da auf der Website alle Interaktionen angezeigt werden, sollte es eine einfache Möglichkeit geben, an der Konversation teilzunehmen.

Fügen Sie einen sozialen Link hinzu, der beim Klicken einen Tweet mit einem Link zur Seite erstellt.

Machen

  • Fügen Sie der Website Meta-Tags hinzu
  • Überprüfen Sie Meta-Tags
  • Stellen Sie eine Verbindung zu Webmention her
  • Verbinde dich sozial mit Bridgy
  • Listen Sie Interaktionen auf
  • Tweet-Button hinzufügen

Werkzeugkasten

  • Webmention.io (webmention.io)
  • Bridgy (bridge.gy)
  • Gatsby Plugin Webmention (github.com)

Tutorials

  • Indieweb pt2: Verwenden von Webmentionen in elf (mxb.dev)
  • Clientside Webmentions (swyx.io)
  • Erste Schritte mit Webmentions in Gatsby (knutmelvaer.no)
  • Erstellen von Gatsby Plugin Webmentions (christopherbiscardi.com)

Inspiration

  • Knut Melvær (knutmelvaer.no)
  • Swyx (swyx.io)

Layout-Idee

Produktjagd

Kategorie: Klone

Erstellen Sie einen Product Hunt-Klon, mit dem Benutzer ein neues Produkt mit Bewertungen veröffentlichen können.

Kurz

Wir alle leben für Produkte, egal ob es sich um unsere Mobiltelefone oder die Apps handelt, die wir auf unseren Laptops verwenden.

Obwohl es auf der Welt Unmengen von Produkten gibt, kann es schwierig sein, durch die guten und die schlechten zu navigieren. Tools wie Product Hunt bieten eine Plattform, um sich über neue Tools zu informieren und Reaktionen und Bewertungen von anderen zu erhalten.

Level 1

Der wichtigste Teil beim Erlernen neuer Produkte ist das Produkt selbst. Wir möchten wissen, was das Produkt ist, wie es aussieht und wie es funktioniert.

Erstellen Sie eine Seite, auf der Sie einer Website ein neues Produkt mit Titel, Bild und Beschreibung hinzufügen können.

Level 2

Wenn wir uns mit Produkten vertraut machen, können wir anhand von Bewertungen einem Produkt vertrauen, bevor wir es kaufen. Es hilft uns, Vertrauen in das zu gewinnen, wofür wir unser Geld oder unsere Zeit ausgeben werden.

Fügen Sie die Möglichkeit hinzu, Bewertungen zu jedem Produkt hinzuzufügen.

Stufe 3

Die Menschen lieben Produkte, deshalb gibt es Tonnen davon auf der Welt. Es gibt viel zu viele, um manuell zu sortieren, daher benötigen wir einen Mechanismus zum Suchen und Durchsuchen.

Fügen Sie die Möglichkeit hinzu, Produkte zu suchen und nach Kategorien zu suchen.

Machen

  • Produktwebsite erstellen
  • Datenbank erstellen
  • Produktformular hinzufügen
  • Produkt zur Datenbank hinzufügen
  • Produkt für Seite anfordern
  • Bewertungsformular hinzufügen
  • Bewertungen zur Datenbank hinzufügen
  • Fügen Sie dem Produkt Bewertungen hinzu
  • Produktsuche hinzufügen
  • Produktkategorien hinzufügen

Werkzeugkasten

  • Hasura (hasura.io)

Tutorials

  • Erstellen einer Product Hunt-Klon-App mit Hasura und Next.js (logrocket.com)
  • So erstellen Sie eine Basisversion von Product Hunt mit React (freecodecamp.org)

Layout-Idee

Weitere Projekte

Wenn Sie weitere Projektideen wünschen, schauen Sie sich 50 Projekte für React & the Static Web an!

Hör auf dich zu fragen, was ich bauen soll? Kostenlos herunterladen bei 50reactprojects.com

Folgen Sie mir für mehr Javascript, UX und andere interessante Dinge!

  • ? Folge mir auf Twitter
  • ? ️ Abonniere mein Youtube
  • ✉️ Melden Sie sich für meinen Newsletter an