react messenger
1.0.0
Dieses Projekt verwendet React und CSS, um die Facebook -Messenger -Webanwendung neu zu erstellen. Es befindet sich in den frühen Stadien, aber die meisten Bausteine sind vorhanden. Dies ist weder ein offizielles Facebook -Produkt noch von Facebook -Mitarbeitern.
Klicken Sie hier für eine Live -Demo
Bei der Verwendung dieser Komponenten ist es wichtig zu beachten, dass wir einige verschiedene Abhängigkeiten verwenden, um eine bessere Benutzererfahrung zu erzielen. Speziell:
ConversationListItem aufrechtzuerhalten.Mit der Komponentenkomponente kann der Benutzer Nachrichten und Anhänge senden.
| Requisiten | Typ | Beschreibung |
|---|---|---|
rightItems | ToolbarButton[] | Symbole, die rechts neben dem input erscheinen, damit Benutzer mehr als Text senden können (z. B. Fotos, Bargeld, Ort usw.). |
Dies ist eine einfache Komponente, die ConversationSearch rendert und axios verwendet, um Benutzer von der zufälligen Benutzer -API zu holen.
Diese Komponente bietet einen Überblick über eine einzige Konversation, einschließlich eines Fotos, eines Namens (oder eines Gruppentitels) und eines Ausschnitts der neuesten Nachricht. Wir verwenden shave , um die angezeigte Nachricht so zu schneiden, dass alle Instanzen von ConversationListItem den gleichen vertikalen Raum in Anspruch nehmen.
| Requisiten | Typ | Beschreibung |
|---|---|---|
photo | String | Die URL eines Fotos, das für das Gespräch angezeigt werden soll. Die Demo verwendet das Foto der zufälligen Benutzer -API. |
name | String | Der Name des Gesprächs, egal ob es sich um eine Gruppe oder eine Person handelt. |
text | String | Der Text der neuesten Nachricht; Sie müssen dies nicht selbst abschneiden. |
Dies ist ein einfaches input , das der Facebook -Messenger -Suchleiste ähnelt. Sein Platzhalter ist zentriert, bis die Input fokussiert ist und den Platzhalter nach links bewegt.
Da der größte Teil der Arbeit von MessageList erledigt wird, ist diese Komponente ziemlich einfach. Wie unten erwähnt, gibt es viele props , mit denen Sie verschiedene Gruppen von Nachrichten stylen können.
| Requisiten | Typ | Beschreibung |
|---|---|---|
data | Object | Ein Objekt, das Informationen über die Nachricht enthält. Wir data.timestamp data.message |
isMine | Boolean | Wendet eine Farbton auf die Nachricht an ( #007aff in der Demo) und richtet sie nach rechts aus, was angibt, dass die Nachricht von Ihnen gesendet wurde. |
startsSequence | Boolean | Gibt an, dass die Nachricht den Beginn einer Abfolge von Nachrichten darstellt. Dies setzt den entsprechenden Grenzradius, je nachdem, ob die Nachricht von Ihnen oder jemand anderem gesendet wurde. |
endsSequence | Boolean | Gibt an, dass die Nachricht das Ende einer Sequenz von Nachrichten darstellt. Dies legt den entsprechenden Randradius unterer Grenz fest, je nachdem, ob die Nachricht von Ihnen oder jemand anderem gesendet wurde. |
showTimestamp | Boolean | Bestimmt, ob der Zeitstempel der Nachricht angezeigt werden sollte oder nicht. Die Demo -App legt diesen Wert auf true fest, wenn mehr als eine Stunde zwischen Nachrichten weitergegeben wurde. |
Dies ist eine täuschend-einfache Komponente, die viele schwere Heben für die Darstellung von Nachrichten von Nachrichten mit angemessenem Styling ausführt (siehe MessageList.renderMessages ). Insbesondere verwenden wir Informationen über die Nachrichten ( author und timestamp ), um Gruppen von Nachrichten zusammen mit modifizierten Grenzradii und Margin näher zu bringen. Dies ist nicht nur in Facebook Messenger vorhanden, sondern auch in anderen Apps wie iMessage. Sie können diese Funktionalität entfernen, wenn Sie möchten.
Diese Komponente ist im Wesentlichen der Wrapper für die Webanwendung. Es definiert ein CSS -Gitterlayout und enthält einige Helferklassen (z. B. scrollable , sodass wir die Scrollen zwischen Seitenleiste und Inhaltsscheiben trennen können).
Die Demo verwendet zwei Symbolleisten, die sich über der Seitenleiste und inhaltlichen Scheiben befinden. Diese Komponente zeigt einen Titel an und kann auch Schaltflächen enthalten. Der Titel bleibt in der Symbolleiste zentriert, unabhängig davon, ob Elemente auf beiden Seiten vorhanden sind.
| Requisiten | Typ | Beschreibung |
|---|---|---|
title | String | Der Titel, der in der Mitte der Symbolleiste angezeigt wird. |
leftItems | ToolbarButton[] | Die ToolbarButton -Elemente, die auf der linken Seite der Symbolleiste erscheinen sollten. |
rightItems | ToolbarButton[] | Die ToolbarButton -Elemente, die auf der rechten Seite der Symbolleiste erscheinen sollten. |
Wahrscheinlich besser als "Symbolknopf" beschrieben, ist es genau das - eine Taste, die ein Symbol anzeigt. Ich werde rechtzeitig Überlegungen zur Zugänglichkeit hinzufügen.
| Requisiten | Typ | Beschreibung |
|---|---|---|
icon | String | Der Name des Symbols, das über eine Symbolschrift dargestellt werden soll. Ich benutze Ionicons in der Demo, aber dies könnte leicht gegen FontaWesome oder eine ähnliche Bibliothek ausgetauscht werden. Sie können sogar Ihre eigene Symbol -Schriftart bei Icomoon erstellen. |
Dies ist eine ziemlich einfache Bibliothek, aber ich habe vor, weiterhin Verbesserungen vorzunehmen und Funktionen hinzuzufügen. Wenn Sie einen Beitrag leisten möchten, sind Sie mehr als willkommen.
Im Projektverzeichnis können Sie ausführen:
npm start Führt die App im Entwicklungsmodus aus.
Öffnen Sie http: // localhost: 3000, um es im Browser anzuzeigen.
Die Seite wird neu laden, wenn Sie Änderungen vornehmen.
Sie werden auch Fellfehler in der Konsole sehen.
npm test Startet den Testläufer im interaktiven Uhrenmodus.
Weitere Informationen finden Sie im Abschnitt zum Ausführen von Tests.
npm run build Build die App für die Produktion im build -Ordner.
Es reagiert korrekt im Produktionsmodus und optimiert den Build für die beste Leistung.
Der Build wird abgebaut und die Dateinamen enthalten die Hashes.
Ihre App ist bereit für die Bereitstellung!
Weitere Informationen finden Sie im Abschnitt zur Bereitstellung.
npm run eject Hinweis: Dies ist ein Einweg-Betrieb. Sobald Sie eject , können Sie nicht zurückgehen!
Wenn Sie mit dem Build -Tool und den Konfigurationsauswahl nicht zufrieden sind, können Sie jederzeit eject . In diesem Befehl wird die einzelne Build -Abhängigkeit von Ihrem Projekt entfernt.
Stattdessen kopiert es alle Konfigurationsdateien und die transitiven Abhängigkeiten (Webpack, Babel, Eslint usw.) direkt in Ihr Projekt, damit Sie die volle Kontrolle über sie haben. Alle Befehle mit Ausnahme eject funktionieren weiterhin, aber sie verweisen auf die kopierten Skripte, damit Sie sie optimieren können. Zu diesem Zeitpunkt sind Sie alleine.
Sie müssen niemals eject verwenden. Das kuratierte Feature -Set eignet sich für kleine und mittlere Bereitstellungen, und Sie sollten sich nicht verpflichtet fühlen, diese Funktion zu verwenden. Wir verstehen jedoch, dass dieses Tool nicht nützlich wäre, wenn Sie es nicht anpassen könnten, wenn Sie dafür bereit sind.
Sie können mehr in der Dokumentation der React -App erstellen.
Um Reaktionen zu lernen, lesen Sie die React -Dokumentation.
Dieser Abschnitt hat sich hier bewegt: https://facebook.github.io/create-react-app/docs/code-Ssplitting
Dieser Abschnitt hat sich hier bewegt: https://facebook.github.io/create-react-app/docs/analyzing-the-bundlesize
Dieser Abschnitt hat sich hier bewegt: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
Dieser Abschnitt hat sich hier bewegt: https://facebook.github.io/create-react-app/docs/advanced-configuration
Dieser Abschnitt hat sich hier bewegt: https://facebook.github.io/create-react-app/docs/deployment
npm run build kann nicht minify minificyDieser Abschnitt hat sich hier umgezogen: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-tho-Minify
