Erstellen und implementieren Sie eine React-Chat-App mit Chatengine.io

Blog

Dies wird eine riesige Tutorial-Reihe für alle, die sich für React interessieren. Wir werden eine vollständige Chat-Anwendung erstellen mit Chatengine.io , Firebase, React, und wir werden es für Vercel bereitstellen. So haben Sie die Möglichkeit, den gesamten Entwicklungslebenszyklus durchzuarbeiten!



  • 0:00 Einführung
  • 11:50 Teil 1: Einrichtung
  • 42:15 Teil 2: Routing
  • 50:25 Teil 3: Serverlose Funktionen
  • 1:07:17 Teil 4: Formik
  • 1:43:02 Teil 5: Firebase
  • 2:20:05 Teil 6: Kontext-API
  • 2:36:15 Teil 7: Chatengine
  • 2:46:26 Teil 8: Chatliste
  • 3:28:51 Teil 9: Benutzer hinzufügen
  • 3:59:12 Teil 10: Nachrichten senden
  • 4:33:14 Teil 11: Bilder senden
  • 4:50:14 Teil 12: Avatare hochladen
  • 5:06:14 Teil 13: Bereitstellung nach Vercel

GitHub-Repository: https://github.com/portexe/react-chatengine-demo

Nachfolgend finden Sie die einzelnen Ressourcen für jeden einzelnen Teil des Kurses:




Teil 1:

In diesem Video werden wir die Boilerplate React App klonen und die Abhängigkeiten installieren. Wir müssen uns einrichten chatengine.io und Firebase-Konten und führen Sie die Ersteinrichtung des Projekts durch.




Teil 2:

Als erstes müssen wir den React Router so einrichten, dass wir in unserer Einzelseitenanwendung problemlos zwischen den verschiedenen Seiten navigieren können.


Teil 3:

Wir möchten unseren privaten Schlüssel dem Client nicht preisgeben. Dies würde enorme Sicherheitsprobleme mit sich bringen. In diesem Video richten wir eine serverlose Funktion ein, die das App-Geheimnis verwendet, um neue Chat-Benutzer zu erstellen.


Teil 4:

Formik ermöglicht uns einen sehr eleganten und leicht verständlichen Umgang mit Formularen. Neben Formik werden wir Yup für unsere Anmelde- und Anmeldeformularvalidierungen verwenden.


Teil 5:

Jetzt ist ein guter Zeitpunkt, um unsere Anmelde-/Anmeldeformulare mit Firebase und Chatengine zu verbinden. Wir verwenden Firebase, um die Authentifizierung abzuwickeln, und dann verwenden wir den Firebase-Callback, um den API-Aufruf an unsere serverlose Funktion createUser abzuwickeln.


Teil 6:

Wir erstellen einen gemeinsamen Kontext mit der React Context API, um den Status über mehrere Komponenten hinweg zu teilen.


Teil 7:

kein solches Modul 'firebase'

Hier werden wir anfangen, uns in die Chat-Engine-Ereignisse einzuklinken

Laden Sie das Bild hier herunter: https://github.com/portexe/react-chatengine-demo/blob/master/public/img/pointLeft.png '>

www.youtube.com

Erstellen und implementieren Sie eine React-Chat-App mit Chatengine.io

Dies wird eine riesige Tutorial-Reihe für alle, die sich für React interessieren. Wir werden eine vollständige Chat-Anwendung mit Chatengine.io, Firebase, React erstellen und sie für Vercel bereitstellen. So haben Sie die Möglichkeit, den gesamten Entwicklungslebenszyklus durchzuarbeiten!