5 Reagieren Sie auf Projekte, die Sie in Ihrem Portfolio benötigen

Sie haben die Arbeit aufgenommen und haben jetzt ein solides Verständnis für die React-Bibliothek.

Darüber hinaus verfügen Sie über gute Kenntnisse in JavaScript und setzen die hilfreichsten Funktionen in Ihren React-Code ein.

Sie haben große Fortschritte gemacht ... aber was machen Sie jetzt?

Wie können Sie die Lücke zwischen dem Erkennen der Grundlagen von React und dem Werden eines professionellen Entwicklers schließen?

Viele Entwickler stoßen auf dieses Problem, wenn sie diese Zwischenstufe des Lernens von React oder einer anderen JavaScript-Bibliothek erreichen. Sie kennen den größten Teil der Bibliothek selbst sowie das JavaScript, um es effektiv zu nutzen, aber sie kennen den nächsten Schritt nicht.

Warum Sie Apps erstellen sollten

Nachdem Sie die Grundlagen von React gelernt haben, müssen Sie sich mit den erworbenen Fähigkeiten vertraut machen, um Apps zu erstellen. Diese Vorgehensweise ist der Kern eines effektiven React-Entwicklers - das Wissen, wie man Apps selbst erstellt und die richtigen Tools im React-Ökosystem verwendet, um dies zu tun.

Aber welche Apps sollten Sie mit React erstellen, um Ihre Fähigkeiten als Entwickler zu verbessern?

In diesem Artikel werden 5 verschiedene Arten von Apps beschrieben, die Sie nach der grundlegenden ToDo-App erstellen sollten. Der große Vorteil beim Erstellen von Apps besteht darin, dass sie nach ihrer Bereitstellung mit Ihrem Portfolio verknüpft werden können, um Arbeitgebern Ihr Fachwissen auf leistungsstarke und unmittelbare Weise zu zeigen.

Für jeden App-Typ werde ich beliebte Beispiele behandeln, die Sie als Inspiration verwenden können, die Tools, die ich zum Erstellen der einzelnen Funktionen empfehlen würde, sowie eine kurze Demo einer solchen App, die ich persönlich mit React erstellt habe.

So starten Sie Apps mit React

Im Gegensatz zum Lernen von React selbst, wo Sie Dutzende von Artikeln finden, um tiefer in ein verwandtes Konzept einzutauchen, ist der Prozess des Erstellens einer App größtenteils eine selbstgesteuerte Aktivität ohne viel Anleitung.

Wenn Sie anfangen, Apps selbst zu erstellen, würde ich empfehlen, nach Artikeln zu suchen, die Ihnen die Grundlagen des Erstellens einer App vermitteln, und in den von ihnen bereitgestellten App-Quellcode einzutauchen. Selbst das Lesen von Code selbst macht Sie zu einem besseren Entwickler.

Wenn diese Beispiele zu entmutigend erscheinen, um sich selbst zu erstellen, denken Sie daran, was Sie als React-Entwickler wissen - um Anwendungen in zusammensetzbare Komponenten zu zerlegen. Jede Anwendung muss Stück für Stück, Komponente für Komponente erstellt werden. Konzentrieren Sie sich darauf, jeweils ein Feature zu erstellen. Mit der Zeit erhalten Sie ein besseres Gefühl dafür, welche Tools Sie für die einzelnen Funktionen benötigen und welche allgemeinen Muster beim Erstellen von Apps im Allgemeinen verwendet werden.

Hinweis: Ein Missverständnis, das ich hatte, als ich anfing, echte Anwendungen wie diese zu erstellen, war, dass ich ein komplettes Backend / eine API mit Node oder Python erstellen musste, um die Funktionalität zu erhalten, die ich brauchte. Sie müssen das nicht tun. Informieren Sie sich über leistungsstarke serverlose Technologien wie Firebase, AWS Amplify oder Hasura, mit denen Sie sofort ein vollständiges Backend erstellen können, ohne selbst eines erstellen und bereitstellen zu müssen. Investieren Sie in Tools, die Sie produktiver machen und Zeit sparen.

Erstellen Sie eine Social Media App

Wenn ich Ihnen nur eine App empfehlen müsste, um sie Ihrem Portfolio hinzuzufügen, wäre dies eine Social-Media-App. Twitter, Facebook und Instagram sind recht ausgefeilt und bieten eine ständig wachsende Anzahl von Funktionen, um die Benutzer zu motivieren. Darüber hinaus ist es die Art von App, die Sie wahrscheinlich am besten kennen, wenn es darum geht, wie sie funktionieren soll.

Fast alle Social-Media-Apps haben eine Reihe von Funktionen gemeinsam:

  • die Möglichkeit für Benutzer, Beiträge mit Text- und / oder Mediendateien zu verfassen,
  • ein Live-Feed dieser Beiträge,
  • anderen Benutzern ermöglichen, Beiträge zu mögen und zu kommentieren,
  • sowie Benutzerauthentifizierung.

Sobald Sie das erledigt haben, können Sie Profile für jeden Ihrer Benutzer hinzufügen, in denen er sein Konto personalisieren und die Benutzer verwalten kann, denen er folgt.

App-Beispiele: Instagram, Twitter, Snapchat, Reddit

Zu nutzende Technologien:

  • Erstellen Sie die React App oder Next.js, um eine dynamische Benutzeroberfläche mit Posts, Likes und Nachrichten zu erstellen
  • Firebase, AWS Amplify oder Hasura (unter Verwendung von GraphQL mit Abonnements) für Echtzeitdaten
  • Serverlose Funktionen wie AWS Lambda oder Firebase-Funktionen für Benachrichtigungen
  • Cloudinary- oder Firebase-Speicher zum Hochladen von Bildern oder Videos

Erstellen Sie eine E-Commerce-App

Wählen Sie einige Ihrer Lieblingsseiten aus, und ich garantiere, dass in mindestens einer von ihnen eine E-Commerce-App eingebettet ist, auch wenn es sich nur um eine kleine Storefront handelt. E-Commerce-Apps sind allgegenwärtig, und ich wette, dass Sie irgendwann in Ihrer Karriere als Entwickler aufgefordert werden, eine zu erstellen.

Es ist verlockend, eine beeindruckende, groß angelegte E-Commerce-Plattform wie Amazon aufzubauen, aber ich würde empfehlen, an etwas Kleinerem und Fokussierterem zu arbeiten.

Anstelle eines Marktplatzes, der allen Menschen alles bietet, sollten Sie sich für eine Branche entscheiden, die Sie interessiert. Wenn Sie beispielsweise Haushaltswaren mögen, können Sie sich ansehen, was Crate & Barrel oder Williams-Sonoma für ihre Standorte gebaut haben.

Abgesehen von Produkten können E-Commerce-Apps Verbrauchern einen Service bieten. Wenn es sich um einen lokal bereitgestellten Dienst handelt, kann der App eine interaktive Karte hinzugefügt werden, damit der Dienstanbieter und der Kunde den Standort des jeweils anderen kennen. Es fallen mir Anwendungen für die Zustellung von Lebensmitteln wie UberEats und Doordash ein, bei denen der Standort der Person erforderlich ist, die das Lebensmittel bestellt.

Unabhängig davon, was verkauft wird, ob physisch oder virtuell, besteht jede E-Commerce-App aus einer Storefront mit den Produkt- oder Servicedetails. Wenn Benutzer mehrere Produkte gleichzeitig kaufen können, sollte es einen Einkaufswagen geben, in dem Benutzer die Produkte verwalten können, die sie kaufen möchten.

Schließlich benötigt jede E-Commerce-App einen Checkout-Prozess, bei dem Benutzer ihre Produkte entweder anonym oder nach der Authentifizierung kaufen können.

Beliebte Beispiele: Airbnb, Uber, UberEats, Doordash, Etsy, Udemy

Zu nutzende Technologien:

  • Erstellen Sie eine React App oder Gatsby für die Storefront und zeigen Sie Produkte an
  • Streifen mit dem Paket React-Stripe-Elemente für die Zahlungsabwicklung
  • Serverlose Funktion wie Netlify / AWS Lambda zur Abwicklung des Checkout-Prozesses
  • Algolia für blitzschnelle Produktsuche
  • Snipcart zum einfachen Erstellen eines Warenkorbs und zum Verwalten von Warenkorbprodukten

Erstellen Sie eine Unterhaltungs-App

Dies ist die breiteste aller Kategorien. Was meine ich mit Unterhaltung? Eine App, die sich auf eine bestimmte Art von Medien konzentriert. Dies können Filme, Podcasts oder Musik sein, um nur einige zu nennen.

Einige gute Beispiele hierfür wären Netflix, Audible und Soundcloud oder Spotify. Wenn Sie Kunst oder Design in diese Kategorie aufnehmen, können wir Websites wie Behance oder Dribbble zur Liste hinzufügen.

Das Interessante an dieser Kategorie ist, dass viele Unterhaltungs-Apps an Social-Media-Apps angrenzen. Eine App wie Tiktok, die kurze, einfallsreiche Videos enthält, zeichnet sich beispielsweise durch ein hohes Benutzereingriff aus. Eine andere App wie YouTube konzentriert sich auf Benutzerinteraktionen durch Likes, Kommentare und Abonnements.

Überlegen Sie, welche Art von Medien oder Unterhaltung Sie am meisten interessiert, und prüfen Sie, ob Sie eine einfache Plattform darauf aufbauen können, auf der sich Benutzer anmelden und die gewünschten Inhalte speichern können. Anschließend sollten Sie soziale Elemente hinzufügen, mit denen Sie Kommentare hinzufügen und Inhalte mit anderen Benutzern auf der Plattform teilen können.

Beliebte Beispiele: YouTube, Netflix, Audible, Spotify, Tiktok

Zu nutzende Technologien:

  • Erstellen Sie React App, Next.js oder Gatsby, um die App-Benutzeroberfläche zu erstellen
  • npm Paket React-Player zum Abspielen von Medien
  • Cloudinary- oder Firebase-Speicher zum Hochladen von Medien
  • Algolia für die Suche nach Medien nach Namen (z. B. Audiospur, Video, Film usw.)

Erstellen Sie eine Messaging-App

Messaging-Apps sind riesig. Sie haben wahrscheinlich einen kostenlosen Messaging-Dienst wie WhatsApp oder Viber auf Ihrem Telefon oder einen in Ihre Social-Media-Plattform integrierten wie Facebook Messenger. Dienste wie Intercom mit Instant Messaging sind auch als Web-Apps verfügbar, sodass Unternehmen ihren Benutzern sofortigen Kundensupport bieten können.

Jede Messaging-App besteht aus einem Gespräch mit zwei oder mehr Personen, bei dem Nachrichten in Echtzeit gesendet werden. Ähnlich wie bei der Social Media-App würde ich einen Dienst wie Firebase oder Hasura empfehlen, der Daten über WebSockets transportiert, damit Nachrichten sofort in der Konversation angezeigt werden.

Die meisten Messaging-Apps befinden sich auf Mobilgeräten oder Tablets. Wenn dies nicht Ihr erster App-Klon ist, ist dies eine großartige Gelegenheit, über das Web hinauszugehen und mit React Native eine mobile App zu erstellen. Besser noch, Sie könnten gleichzeitig mit einem Paket wie React Native Web eine Web- und eine Mobile-Messaging-App erstellen.

Beliebte Beispiele: WhatsApp, Viber, Discord, Messenger, Slack

Zu nutzende Technologien:

  • React Native oder React Native Web zum Erstellen als mobile App oder Hybrid-App (Web + Mobile)
  • Firebase, AWS Amplify oder Hasura (unter Verwendung von GraphQL-Abonnements) zum Senden von Nachrichten in Echtzeit
  • Cloudinary- oder Firebase-Speicher zum Senden von Nachrichten mit Bild- oder Videoinhalten
  • npm-Paket emoji-mart für einen raffinierten Slack-ähnlichen Emoji-Picker, den Benutzer in ihre Nachrichten aufnehmen können

Erstellen Sie eine Produktivitäts-App

Dies ist wahrscheinlich die einfachste Art von App, mit der man beginnen kann, wenn man bedenkt, dass es so viele Tutorials für grundlegende Produktivitäts-Apps gibt. Wenn ich von Produktivitäts-Apps spreche, beziehe ich mich auf Notizen-Apps, Apps zum Verwalten von Teams und Aufgabenlisten. Im Allgemeinen alles, was Ihnen hilft, eine bestimmte Aufgabe zu erfüllen oder produktiver zu sein.

Das Besondere an der Erstellung einer Produktivitäts-App ist, dass sie aufgrund der relativen Einfachheit vieler ihrer Funktionen eine gute Einführung in die App-Erstellung bietet.

Sie können mit etwas Einfachem beginnen, z. B. einem Texteditor, um formatierten Text mit Markdown einfach zu schreiben und ihn dann zu erweitern. Fügen Sie dann die Möglichkeit hinzu, Text als einzelne Dateien auf Ihrem Computer zu speichern. Danach eine Funktion zum Exportieren dieses Markdowns als HTML zum Schreiben formatierter E-Mails.

Fragen Sie zum Erstellen einer Produktivitäts-App, welche Funktionen eine App haben könnte, um Ihren Tagesablauf zu vereinfachen, und gehen Sie von dort aus.

Beliebte Beispiele: Todoist, Begriff, Dinge usw.

Zu nutzende Technologien:

  • Erstellen Sie eine React App für das Web oder React Native für Handys
  • React-Markdown des npm-Pakets, um den Markdown in Ihrer App-Benutzeroberfläche anzuzeigen
  • npm-Paket react-codemirror2 zum Schreiben von Code in Ihre Notizen
  • Das npm-Paket kann per Drag & Drag zum Nachbestellen von Listeninhalten neu geordnet werden

Viel Glück bei Ihrer App-Erstellung und wir sehen uns im nächsten Artikel.

Willst du ein JS Master werden? Nehmen Sie am 2020 JS Bootcamp teil

Nehmen Sie am 2020 JS Bootcamp teil

Folgen Sie + Sagen Sie Hallo! ? Twitter • codeartistry.io