react messenger
1.0.0
このプロジェクトは、ReactとCSSを使用して、Facebook Messenger Webアプリケーションを再現します。それは初期段階にありますが、ほとんどのビルディングブロックが整っています。これは公式のFacebook製品ではなく、Facebookの従業員によって維持されていません。
ライブデモについては、ここをクリックしてください
これらのコンポーネントを使用する場合、より良いユーザーエクスペリエンスを実現するためにいくつかの異なる依存関係を利用していることに留意することが重要です。具体的には：
ConversationListItem間の一貫性を維持するために長いメッセージをトリミングするために剃る。Composeコンポーネントにより、ユーザーはメッセージと添付ファイルを送信できます。
| 小道具 | タイプ | 説明 |
|---|---|---|
rightItems | ToolbarButton[] | input要素の右側に表示されるアイコンにより、ユーザーはテキスト（写真、現金、場所など）以上のものを送信できます。 |
これは、 ConversationSearchをレンダリングし、 axiosを使用してランダムユーザーAPIからユーザーを取得するシンプルなコンポーネントです。
このコンポーネントは、写真、名前（またはグループタイトル）、最新のメッセージのスニペットなど、1つの会話の概要を提供します。 shaveを使用して表示されたメッセージをトリミングして、 ConversationListItemのすべてのインスタンスが同じ量の垂直空間を占有するようにします。
| 小道具 | タイプ | 説明 |
|---|---|---|
photo | String | 会話のために表示される写真のURL。デモは、ランダムユーザーAPIによって提供される写真を使用します。 |
name | String | 会話の名前、それがグループであろうと個人であろうと。 |
text | String | 最新のメッセージのテキスト。これを自分で切り捨てる必要はありません。 |
これは、Facebook Messenger Search Barに似ているようにスタイルを整える単純なinput要素です。そのプレースホルダーは、入力が集中するまで中央に配置され、プレースホルダーを左に移動します。
作業のほとんどはMessageListによって行われているため、このコンポーネントは非常に簡単です。以下に記載されているように、メッセージの異なるグループをスタイリングできる多くのpropsがあります。
| 小道具 | タイプ | 説明 |
|---|---|---|
data | Object | メッセージに関する情報を含むオブジェクト。メッセージボディにdata.messageとdata.timestampを使用します。 |
isMine | Boolean | メッセージ（デモの#007aff ）に色合いを適用し、右に合わせて、メッセージが送信されたことを示します。 |
startsSequence | Boolean | メッセージが一連のメッセージの開始を表すことを示します。これにより、メッセージがあなたまたは他の誰かによって送信されたかどうかに応じて、適切な上部の境界半径が設定されます。 |
endsSequence | Boolean | メッセージが一連のメッセージの終わりを表すことを示します。これにより、メッセージがあなたと他の誰かによって送信されたかどうかに応じて、適切な底部の境界半径が設定されます。 |
showTimestamp | Boolean | メッセージのタイムスタンプを表示する必要があるかどうかを判断します。デモアプリは、メッセージ間で1時間以上が通過した場合、この値をtrueに設定します。 |
これは、適切なスタイリングを使用して、一連のメッセージをレンダリングするために多くの重い持ち上げを行う一見シンプルなコンポーネントです（ MessageList.renderMessagesを参照）。具体的には、メッセージ（ authorとtimestamp ）に関する情報を使用して、修正されたボーダーラディとマージンと一緒にメッセージのグループをより密接にします。これは、Facebook Messengerだけでなく、Imessageのような他のアプリにも存在します。必要に応じて、この機能を削除できます。
このコンポーネントは、基本的にWebアプリケーションのラッパーです。 CSSグリッドレイアウトを定義し、いくつかのヘルパークラスを公開します（たとえばscrollable 、サイドバーとコンテンツペインの間をスクロールすることができます）。
デモは、サイドバーとコンテンツペインの上にある2つのツールバーを使用します。このコンポーネントはタイトルを表示し、ボタンを含めることもできます。タイトルは、どちらの側にも要素が存在するかどうかに関係なく、ツールバー内に集中しています。
| 小道具 | タイプ | 説明 |
|---|---|---|
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を使用する必要はありません。キュレーションされた機能セットは、小規模および中央の展開に適しているため、この機能を使用する義務を感じるべきではありません。ただし、準備ができたときにカスタマイズできなかった場合、このツールは役に立たないことを理解しています。
Create Reactアプリのドキュメントで詳細をご覧ください。
Reactを学ぶには、React Documentationをご覧ください。
このセクションはここに移動しました：https：//facebook.github.io/create-rect-app/docs/code-splitting
このセクションはここに移動しました：https：//facebook.github.io/create-rect-app/docs/analyzing-the-bundle-size
このセクションはここに移動しました：https：//facebook.github.io/create-rect-app/docs/making-a-progrising-web-app
このセクションはここに移動しました：https：//facebook.github.io/create-rect-app/docs/advanced-configuration
このセクションはここに移動しました：https：//facebook.github.io/create-rect-app/docs/deployment
npm run buildマイニル化に失敗しますこのセクションは、https：//facebook.github.io/create-rect-app/docs/troubleshooting#npm-run-build-fails-to-minifyです
