react messenger
1.0.0
該項目使用React和CSS重新創建Facebook Messenger Web應用程序。它處於早期階段，但大多數構建塊已經到位。這不是官方的Facebook產品，也不由任何Facebook員工維護。
單擊此處進行現場演示
當使用這些組件時，重要的是要記住，我們利用一些不同的依賴項來獲得更好的用戶體驗。具體來說：
ConversationListItem之間的一致性。組成的組件允許用戶發送消息和附件。
| 道具 | 類型 | 描述 |
|---|---|---|
rightItems | ToolbarButton[] | 在input元素右側出現的圖標允許用戶發送的文本超過文本（例如照片，現金，位置等）。 |
這是一個簡單的組件，它渲染ConversationSearch並使用axios從隨機用戶API中獲取用戶。
該組件提供了一個對話的概述，包括照片，名稱（或組標題）以及最新消息的摘要。我們使用shave來修剪顯示的消息，以便所有ConversationListItem的實例都佔據相同數量的垂直空間。
| 道具 | 類型 | 描述 |
|---|---|---|
photo | String | 將要顯示對話的照片的URL。該演示使用隨機用戶API提供的照片。 |
name | String | 對話的名稱，無論是小組還是個人。 |
text | String | 最新信息的文字；您不必自己截斷。 |
這是一個簡單的input元素，其樣式類似於Facebook Messenger搜索欄。它的佔位符居中，直到投入集中為直到將佔位符移至左側。
由於大多數工作都是由MessageList完成的，因此此組件非常直接。如下所述，有很多props使您可以設計不同的消息組。
| 道具 | 類型 | 描述 |
|---|---|---|
data | Object | 包含有關消息信息的對象。我們使用data.message用於消息主體和data.timestamp用於javaScript日期對象的timestamp表示發送消息的時間。 |
isMine | Boolean | 將色調應用於消息（演示中的#007aff ），並將其對齊向右對齊，表明該消息是由您發送的。 |
startsSequence | Boolean | 表示消息表示一系列消息的開始。這設置了適當的頂端半徑，具體取決於您還是其他人發送的消息。 |
endsSequence | Boolean | 表示消息表示一系列消息的終結。這設置了適當的底部邊界半徑，具體取決於您還是其他人發送的消息。 |
showTimestamp | Boolean | 確定是否應顯示消息的時間戳。如果消息之間超過一個小時，則演示應用程序將此值設置為true 。 |
這是一個欺騙性的簡單組件，可以用適當的造型來渲染一系列消息序列（請參閱MessageList.renderMessages ）。具體來說，我們使用有關消息（ author和timestamp ）的信息將消息組與修改後的邊框-Radii和Margin一起渲染。這不僅存在於Facebook Messenger中，而且還存在於iMessage等其他應用中。如果需要，可以刪除此功能。
該組件本質上是Web應用程序的包裝器。它定義了CSS電網佈局並揭示了一些輔助類（例如scrollable ，使我們可以在側欄和內容窗格之間分開滾動）。
該演示使用兩個工具欄，它們位於側邊欄上方和內容窗格上方。該組件顯示一個標題，還可以包含按鈕。無論兩側是否存在元素，標題仍然以工具欄為中心。
| 道具 | 類型 | 描述 |
|---|---|---|
title | String | 標題將顯示在工具欄的中心。 |
leftItems | ToolbarButton[] | ToolbarButton元素應出現在工具欄的左側。 |
rightItems | ToolbarButton[] | ToolbarButton元素應出現在工具欄的右側。 |
可能更好地描述為“圖標按鈕”，僅僅是一個顯示圖標的按鈕。我將及時添加可訪問性注意事項。
| 道具 | 類型 | 描述 |
|---|---|---|
icon | String | 圖標的名稱將通過圖標字體表示。我在演示中使用離子孔，但可以很容易地將其換成Fontawesome或類似的庫。您甚至可以在Icomoon上製作自己的圖標字體。 |
這是一個相當簡單的庫，但我確實計劃繼續進行改進和添加功能。如果您想做出貢獻，您會非常歡迎您。
在項目目錄中，您可以運行：
npm start在開發模式下運行該應用程序。
打開http：// localhost：3000在瀏覽器中查看。
如果您進行編輯，該頁面將重新加載。
您還將在控制台中看到任何棉絨錯誤。
npm test在交互式手錶模式下啟動測試跑者。
有關更多信息，請參見有關運行測試的部分。
npm run build將應用程序構建到build文件夾中。
它正確地捆綁了在生產模式下進行反應，並優化構建以獲得最佳性能。
構建被縮小，文件名包括哈希。
您的應用已準備好部署！
有關更多信息，請參見有關部署的部分。
npm run eject注意：這是一個單向操作。 eject後，您將無法返回！
如果您對構建工具和配置選擇不滿意，則可以隨時eject 。此命令將從您的項目中刪除單個構建依賴關係。
取而代之的是，它將將所有配置文件和傳遞依賴性（webpack，babel，eslint等）複製到您的項目中，以便您完全控制它們。除eject以外的所有命令仍然可以工作，但是它們將指向複製的腳本，以便您可以調整它們。在這一點上，您是一個人。
您不必使用eject 。策劃的功能集適用於中小型部署，您不應該感到有義務使用此功能。但是，我們知道，如果您在準備好後，您無法自定義該工具，則該工具將沒有用。
您可以在創建React應用程序文檔中了解更多信息。
要學習反應，請查看反應文檔。
本節已搬到這裡：https：//facebook.github.io/create-react-app/docs/code-splitting
本節已搬到這裡：https：//facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
本節已搬到這裡：https：//facebook.github.io/create-react-app/docs/making-a-progressive-web-app-app
本節已搬到這裡：https：//facebook.github.io/create-react-app/docs/advanced-configuration
本節已搬到這裡：https：//facebook.github.io/create-react-app/docs/deployment
npm run build無法縮小本節已搬到這裡：https：//facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-build-fails-to-minify
