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
