React
-
Wie man in React eine wiederverwendbare Tastenkombination-Listener-Komponente erstellt
Wenn du wie ich bist und Abkürzungen liebst, weißt du, wie befriedigend es ist, ein paar Tasten zu drücken und die Magie geschehen zu lassen. Egal, ob es das vertraute Ctrl+C – Ctrl+V ist, das Entwickler verwenden, um „Code auszuleihen“ 😉 von LLMs und Code-Seiten, oder die personalisierten Abkürzungen, die wir in unseren Lieblingswerkzeugen einrichten, Tastenkombinationen sparen Zeit und lassen uns wie einen Computer-Experten fühlen. Keine Angst! Ich habe den Code für den Bau von Komponenten entschlüsselt, die Tastenkombinationen auslösen…
-
Wie man E-Mail-Vorlagen mit React Email erstellt und sendet und in Next.js erneut sendet
Moderne Softwareanwendungen verlassen sich oft auf die E-Mail-Kommunikation, um mit Benutzern in Kontakt zu treten. Sie können beispielsweise Authentifizierungscodes während des Anmeldevorgangs, Marketing-E-Mails oder Newsletter senden. Das bedeutet, dass E-Mail-Benachrichtigungen in der Regel das häufigste Kommunikationsmittel mit Benutzern sind. In diesem Tutorial erfahren Sie, wie Sie atemberaubende E-Mail-Vorlagen mit React Email entwerfen und diese mithilfe von Resend – einer einfachen und leistungsstarken E-Mail-API-Plattform – senden können. Voraussetzungen Um das Beste aus diesem Tutorial herauszuholen, sollten Sie ein grundlegendes Verständnis von…
-
Wie man mehrsprachige Apps mit i18n in React erstellt
Ich habe kürzlich an einem spannenden Projekt gearbeitet, bei dem eine Website erstellt wurde, die zwischen Sprachen wechseln kann, um ein breiteres Publikum anzusprechen. Dies hat mir das Konzept der „Lokalisierung“ näher gebracht, das typischerweise die Anpassung von Inhalten beinhaltet, um sie für Benutzer in verschiedenen Sprachen und Regionen relevant, zugänglich und nachvollziehbar zu machen. Lokalisierung geht nicht nur um die Übersetzung von Wörtern, es geht darum, eine Erfahrung zu schaffen, die Benutzer sich unabhängig von ihrer Sprache wie zu…
-
Lernen Sie React von Bob Ziroll
Das Erlernen von React kann anfangs herausfordernd sein, besonders wenn Sie unsicher sind, wie Sie anfangen sollen oder sich dabei erwischen, wie Sie auf einen leeren Code-Editor starren. Aber der richtige Kurs kann Ihnen helfen, die Kernkonzepte zu verstehen und praktische Erfahrungen zu sammeln, indem Sie reale Projekte erstellen. Wir haben gerade einen Kurs auf dem YouTube-Kanal von freeCodeCamp.org veröffentlicht, der Ihnen modernes React auf möglichst engagierte und praktische Weise beibringt. Dieser Kurs, erstellt von Bob Ziroll von Scrimba, ist…
-
Wie man ein Memory-Kartenspiel mit React erstellt
Kürzlich, während ich meinem Kind 🧒🏻 beim Spielen kostenloser Memory-Spiele auf ihrem Tablet zuschaute, bemerkte ich, dass sie mit einer überwältigenden Anzahl von Werbeanzeigen und nervigen Pop-up-Bannern zu kämpfen hatte. Dies inspirierte mich dazu, ein ähnliches Spiel für sie zu erstellen. Da sie derzeit Anime mag, beschloss ich, das Spiel mit niedlichen Anime-Bildern zu erstellen. In diesem Artikel werde ich Sie durch den Prozess führen, das Spiel für sich selbst oder Ihre Kinder 🎮 zu erstellen. Wir werden damit beginnen,…
-
Erstellung und Bereitstellung einer HR-App mit Refine
Einführung In diesem Tutorial werden wir eine HR-Management-Anwendung mit dem Refine Framework erstellen und sie auf der DigitalOcean App Platform bereitstellen. Am Ende dieses Tutorials werden wir eine HR-Management-Anwendung haben, die Folgendes umfasst: Login-Seite: Ermöglicht es Benutzern, sich entweder als Manager oder als Mitarbeiter anzumelden. Manager haben Zugriff auf die Seiten Urlaub und Anfragen, während Mitarbeiter nur Zugriff auf die Seite Urlaub haben. Urlaubsseiten: Ermöglicht es Mitarbeitern, ihren Urlaub anzufordern, anzusehen und zu stornieren. Auch Manager können neue Urlaube zuweisen.…
-
Wie man mit React und Convex ein CRUD-Anwendung baut
CRUD-Operationen sind die Grundlage jeder Anwendung, daher ist es wichtig, dass man sie beherrscht, wenn man neue Technologien lernt. In diesem Leitfaden erlernen Sie, wie Sie mit React und Convex eine CRUD-Anwendung bauen können. Wir werden diese Operationen durch das Erstellen eines Projekts namens Buchsammlungen abdecken. In diesem Projekt können Benutzer Bücher hinzufügen und ihren Status aktualisieren, nachdem sie ein Buch fertig gelesen haben. Inhaltsverzeichnis Was ist Convex? Wie können Sie Ihr Projekt einrichten? Wie können Sie das Schema erstellen?…
-
Wie kannst du zusätzliche Argumente an Next.js Server-Aktionen weitergeben?
Asynchrone Datenänderungen und -verarbeitung ist eine notwendige Aufgabe in modernen Webanwendungen. Manchmal möchte man eine eigenständige asynchrone Funktion auf dem Server ausführen, um Aufgaben wie das Speichern von Daten im Datenstore, das Senden von E-Mails, das Herunterladen von PDFs, die Verarbeitung von Bildern und so weiter durchzuführen. Next.js stellt uns die Server Aktionen zur Verfügung, die asynchrone Funktionen auf dem Server sind. Wir können Server Aktionen für Datenmutationsvorgänge auf dem Server verwenden, aber Server Aktionen können sowohl von Server- als…
-
Wie man RxStomp mit React verwendet – Entwicklung einer Chat-App mit STOMP und React
STOMP ist ein aufregend einfach und dennoch leistungsfähiges Protokoll für die Sendung von Nachrichten, das von populären Servern wie RabbitMQ, ActiveMQ und Apollo implementiert wird. Die Verwendung von STOMP über WebSocket ist ein direktes Protokoll, was es zu einer populären Wahl für die Sendung von Nachrichten aus einem Web-Browser macht, da Protokolle wie AMQP durch Browser begrenzt werden, die TCP-Verbindungen nicht zulassen. Um mit STOMP über WebSocket zu arbeiten, kann man @stomp/stompjs verwenden, das jedoch schwierige Callbacks und eine komplizierte…