react messenger

React Messenger

Этот проект использует React и CSS для воссоздания веб -приложения Facebook Messenger. Это на ранних стадиях, но большинство строительных блоков на месте. Это не официальный продукт в Facebook и не поддерживается ни одного сотрудников Facebook.

Нажмите здесь для живой демонстрации

---

Доступные компоненты

При использовании этих компонентов важно помнить, что мы используем несколько разных зависимостей для достижения лучшего пользовательского опыта. Конкретно:

• Момент для анализа дат джавазипий и печати их читаемым способом.
• Брить, чтобы обрезать длинные сообщения, чтобы поддерживать согласованность между ConversationListItem .
• Axios для облегчения HTTP -запросов (для сообщений, пользователей и т. Д.).

Сочинять

Компонент Compose позволяет пользователю отправлять сообщения и вложения.

реквизит	тип	описание
rightItems	ToolbarButton[]	Значки, которые появляются справа от input элемента, позволяя пользователям отправлять больше, чем текст (например, фотографии, наличные, местоположение и т. Д.).

Список разговоров

Это простой компонент, который отменяет ConversationSearch и использует axios для извлечения пользователей из API случайного пользователя.

Разговор listitem

Этот компонент содержит обзор одного разговора, включая фотографию, название (или название группы) и фрагмент самого последнего сообщения. Мы используем shave , чтобы обрезать отображаемое сообщение, так что все экземпляры ConversationListItem занимали одинаковое количество вертикального пространства.

реквизит	тип	описание
photo	String	URL -адрес фотографии, который будет отображаться для разговора. Демо использует фотографию, предоставленную API случайного пользователя.
name	String	Название разговора, будь то группа или человек.
text	String	Текст самого последнего сообщения; Вам не нужно усекать это самостоятельно.

CongsationSearch

Это простой элемент input , который стилизован, чтобы напоминать строку поиска Messenger Facebook. Его заполнитель сосредоточен до тех пор, пока вход не будет сфокусирован, перемещая заполнителя влево.

Сообщение

Поскольку большая часть работы выполняется MessageList , этот компонент довольно прямой. Как указано ниже, существует много props , которые позволяют вам создавать различные группы сообщений.

реквизит	тип	описание
data	Object	Объект, содержащий информацию о сообщении. Мы используем data.message для тела сообщений и data.timestamp для объекта даты JavaScript, представляющего время, в которое было отправлено сообщение.
isMine	Boolean	Применяет оттенок к сообщению ( #007aff в демонстрации) и выравнивает его вправо, указывая, что сообщение было отправлено вами.
startsSequence	Boolean	Указывает, что сообщение представляет собой начало последовательности сообщений. Это устанавливает соответствующий радиус верхней границы, в зависимости от того, было ли сообщение отправлено вами или кем -то еще.
endsSequence	Boolean	Указывает, что сообщение представляет собой конец последовательности сообщений. Это устанавливает соответствующий нижний радиус границы, в зависимости от того, было ли вам отправлено сообщение или кто -то еще.
showTimestamp	Boolean	Определяет, должна ли быть показана временная метка сообщения. Демо -приложение устанавливает это значение true , если между сообщениями проходило более одного часа.

Массагелист

Это обманчиво простой компонент, который делает большую тяжелую работу для рендеринга последовательностей сообщений с соответствующим стилем (см. MessageList.renderMessages ). В частности, мы используем информацию о сообщениях ( author и timestamp ) для того, чтобы представить группы сообщений ближе вместе с модифицированными границами-радии и маржой. Это не только в Facebook Messenger, но и в других приложениях, таких как Imessage. Вы можете удалить эту функциональность, если хотите.

Посланник

Этот компонент по сути является оберткой для веб -приложения. Он определяет макет сетки CSS и обнажает несколько вспомогательных классов (например, scrollable , что позволяет нам отделить прокрутку между боковой панелью и панелями содержимого).

Панель инструментов

Демо использует две панели инструментов, которые расположены над боковой панелью и контентом. Этот компонент отображает заголовок и также может включать кнопки. Название остается сосредоточенным на панели инструментов независимо от того, присутствуют ли элементы с обеих сторон.

реквизит	тип	описание
title	String	Заголовок будет отображаться в центре панели инструментов.
leftItems	ToolbarButton[]	Элементы ToolbarButton , которые должны появляться на левой стороне панели инструментов.
rightItems	ToolbarButton[]	Элементы ToolbarButton , которые должны появляться на правой стороне панели инструментов.

Инструментальная панель

Вероятно, лучше описать как «кнопка значка», это просто это - кнопка, которая показывает значок. Я добавлю соображения доступности вовремя.

реквизит	тип	описание
icon	String	Название значка будет представлено через шрифт значка. Я использую иониконы в демонстрации, но это можно легко заменить на Fontawesome или аналогичную библиотеку. Вы даже можете сделать свой собственный шрифт иконы в Icomoon.

---

Дорожная карта

Это довольно прямая библиотека, но я планирую продолжать вносить улучшения и добавлять функции. Если вы хотите внести свой вклад, вас более чем приглашают.

• Сообщения медиа (например, фотографии, видео)
• Подсказки инструментов, Popovers, модалы (для просмотра, отправка новых сообщений и т. Д.)
• Изящная деградация (индикатор состояния сети, загрузка спиннеров и т. Д.)
• Отзывчивость

---

Доступные сценарии

В каталоге проекта вы можете запустить:

npm start

Запускает приложение в режиме разработки.
Откройте http: // localhost: 3000, чтобы просмотреть его в браузере.

Страница будет перезагружаться, если вы сделаете изменения.
Вы также увидите любые ошибки ворса в консоли.

npm test

Запускает Test Runner в режиме интерактивных часов.
См. Раздел о запуске тестов для получения дополнительной информации.

npm run build

Создает приложение для производства в папку build .
Он правильно реагирует в производственном режиме и оптимизирует сборку для наилучшей производительности.

Сборка занижена, а имена файлов включают хэши.
Ваше приложение готово к развертыванию!

См. Раздел о развертывании для получения дополнительной информации.

npm run eject

Примечание: это односторонняя операция. После того, как вы eject , вы не можете вернуться!

Если вы не удовлетворены инструментом сборки и выбором конфигурации, вы можете eject в любое время. Эта команда удалит единственную зависимость сборки из вашего проекта.

Вместо этого он скопирует все файлы конфигурации и транзитивные зависимости (Webpack, Babel, Eslint и т. Д.) Все команды, кроме eject все еще будут работать, но они будут указывать на скопированные сценарии, так что вы можете настроить их. На данный момент вы сами.

Вам не нужно когда -либо использовать eject . Кураторский набор функций подходит для небольших и средних развертываний, и вы не должны чувствовать себя обязанным использовать эту функцию. Однако мы понимаем, что этот инструмент не будет полезен, если вы не сможете настроить его, когда будете готовы к нему.

Узнать больше

Вы можете узнать больше в документации Create React App.

Чтобы узнать реагирование, ознакомьтесь с документацией React.

Разделение кода

Этот раздел перешел сюда: https://facebook.github.io/create-react-app/docs/code-spliting

Анализ размера пакета

Этот раздел перешел сюда: 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

Расширенная конфигурация

Этот раздел перешел здесь: 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-fails to-minify