Sie wollen Ihre Entwicklerfähigkeiten auf das nächste Level heben oder Ihren zukünftigen Arbeitgeber beeindrucken? Dann erstellen Sie diesen LinkedIn-Klon !

Teil 4

In Teil 3 dieser Serie haben wir die Feed- und die Widgets-Komponente erstellt und die Feed-Komponente mit Firestore verbunden.

In diesem letzten Artikel werden wir Redux einrichten, um den Status des Benutzers zu verwalten, die Anmeldeseite zu erstellen und schließlich auf Firebase bereitzustellen!

1. — Einrichten von Redux

Redux ist eine JavaScript-Bibliothek zum Verwalten des Anwendungsstatus. In der ersten Folge haben wir mit dem Redux Toolkit einen React -Anwendungsstarter erstellt . Dadurch wurde eine Vorlage zur Verwendung von Redux mit React erstellt. Bevor wir fortfahren, müssen wir die von der Vorlage erstellten Ordner neu organisieren.

• Löschen Sie die Counter.module.cssund die Counter.jsDatei aus dem counterOrdner.
• Verschieben Sie die counterSlice.jsDatei in den featuresOrdner.
• Löschen Sie den counterOrdner und benennen Sie die counterSlice.jsDatei um in userSlice.js.

• Ersetzen Sie den Code in userSlice.jsdurch Folgendes:
• Ersetzen Sie den Inhalt in der store.jsDatei durch Folgendes:

Wenn sich der Benutzer abmeldet, ist der Status des Benutzers gleich null, während wenn sich der Benutzer anmeldet, der Status gleich ist action.payload, ein Objekt, das die Benutzerinformationen enthält.

• Gehen Sie nun zu App.jsund fügen Sie den folgenden Code hinzu:

const user = useSelector(selectUser)

• Verwenden Sie in App.jseinen ternären Operator, um entweder die Hauptanwendung anzuzeigen, wenn der Benutzer angemeldet ist, oder um die Anmeldeseite anzuzeigen, wenn der Benutzer abgemeldet ist oder kein Profil hat.

Wir müssen jetzt die Anmeldeseite erstellen.

2. — Erstellen Sie die Anmeldeseite

• Erstellen Sie im Ordner eine Datei mit dem Namen . Login Login.js
• Sobald Sie sich in der Datei befinden, geben Sie ein rfce , um das Snippet von ES7 Snippets zu verwenden .
• Erstellen Sie noch im Login Ordner eine Login.cssDatei und importieren Sie sie in Ihre Login.jsKomponente.
• Die letzte Login Komponente sieht so aus:

Die Registrierung wird mit der Pfeilfunktion registerunter Verwendung von Firebase Authentication und verwaltet createUserWithEmailAndPassword.

Die Authentifizierung wird mit der Pfeilfunktion loginToAppunter Verwendung von Firebase Authentication und verwaltet signInWithEmailAndPassword.

Die vom Benutzer gesammelten Informationen werden mit UseDispatch()Hook in den Redux-Speicher geschoben.

• Um unserer Login.jsKomponente etwas Stil zu verleihen, öffnen Login.cssSie den folgenden Code und fügen Sie ihn hinzu:

Um unsere Anwendung zu vervollständigen, müssen wir jetzt die Abmeldefunktion hinzufügen, den Benutzer angemeldet lassen, sobald er angemeldet ist, und die Daten in der Feed-Komponente aus der Firestore-Datenbank anzeigen.

• Fügen Sie zurück zur App.jsKomponente den folgenden Code hinzu:

• Gehen Sie nun zu HeaderOption.jsund fügen Sie onClickder Funktion ein Ereignis hinzu HeaderOption.
• Gehen Sie zu Header.jsund fügen Sie den folgenden Code hinzu:

• Gehen Sie nun zu der Sidebar.jsDatei und ändern Sie den Inhalt wie folgt:
• Gehen Sie zur Feed.jsDatei und ändern Sie den Inhalt wie folgt:

Herzliche Glückwünsche! Sie haben gerade einen LinkedIn-Klon erstellt!!

3. – Bereitstellen auf Firebase

Stellen Sie vor der Bereitstellung sicher, dass Sie die Firebase-Tools installieren.

• Um unser Projekt bereitzustellen, gehen Sie zur Konsole und geben Sie den Befehl „firebase init“ ein.

• Wählen Sie diese Option aus, um ein vorhandenes Projekt zu verwenden

• Geben Sie im öffentlichen Verzeichnis „ build “ ein

• Als Single-Page-App konfigurieren
• Führen Sie nun in der Konsole den Befehl „ npm run build “ aus

Nachdem der Build abgeschlossen ist, geben Sie in der Konsole „ firebase deploy “ ein.

Sobald Sie dies abgeschlossen haben, sollten Sie eine URL erhalten, unter der Ihre App online gehostet wird. Schau dir hier meine an:https://linkedin-clone-5ebs.web.app/.

Herzliche Glückwünsche!!! Sie haben gerade Ihren Google Clone auf Firebase Hosting bereitgestellt!!

Fazit

Toll! Sie haben gerade einen LinkedIn Clone realisiert! Ich hoffe, Sie hatten Spaß beim Erstellen dieses Projekts und Sie haben das Endergebnis erreicht!

Wenn Sie sich unterwegs verlaufen haben, hier der Link zu Teil 1 , Teil 2 und Teil 3 und wie versprochen der vollständige Quellcode auf meinem GitHub!