react messenger
1.0.0
이 프로젝트는 React 및 CSS를 사용하여 Facebook Messenger 웹 응용 프로그램을 재현합니다. 초기 단계이지만 대부분의 빌딩 블록이 제자리에 있습니다. 이것은 공식적인 Facebook 제품이 아니며 Facebook 직원이 유지 관리하지도 않습니다.
라이브 데모를 보려면 여기를 클릭하십시오
이러한 구성 요소를 사용할 때는 더 나은 사용자 경험을 달성하기 위해 몇 가지 다른 종속성을 활용하고 있음을 명심해야합니다. 구체적으로:
ConversationListItem 간의 일관성을 유지하기 위해 긴 메시지를 다듬기 위해 면도하십시오.구성 요소를 사용하면 사용자가 메시지 및 첨부 파일을 보낼 수 있습니다.
| 소품 | 유형 | 설명 |
|---|---|---|
rightItems | ToolbarButton[] | input 요소의 오른쪽에 나타나는 아이콘으로 인해 사용자는 텍스트 이상 (예 : 사진, 현금, 위치 등)을 보낼 수 있습니다. |
이것은 ConversationSearch 렌더링하고 axios 사용하여 임의의 사용자 API에서 사용자를 가져 오는 간단한 구성 요소입니다.
이 구성 요소는 사진, 이름 (또는 그룹 제목) 및 최신 메시지의 스 니펫을 포함한 단일 대화의 개요를 제공합니다. shave 사용하여 표시된 메시지를 다듬어 모든 ConversationListItem 목록이 동일한 양의 수직 공간을 차지하도록합니다.
| 소품 | 유형 | 설명 |
|---|---|---|
photo | String | 대화를 위해 표시 될 사진의 URL. 데모는 임의의 사용자 API가 제공 한 사진을 사용합니다. |
name | String | 대화의 이름은 그룹이든 개인이든. |
text | String | 가장 최근의 메시지의 텍스트; 당신은 이것을 직접 잘라낼 필요가 없습니다. |
이것은 Facebook 메신저 검색 바와 유사하게 스타일링 된 간단한 input 요소입니다. 자리 표시자는 입력이 집중 될 때까지 중앙에 위치하여 자리 표시자를 왼쪽으로 옮깁니다.
대부분의 작업은 MessageList 에 의해 수행 되므로이 구성 요소는 매우 간단합니다. 아래에 언급 된 바와 같이, 독특한 메시지 그룹을 스타일링 할 수있는 많은 props 있습니다.
| 소품 | 유형 | 설명 |
|---|---|---|
data | Object | 메시지에 대한 정보가 포함 된 개체. 메시지 본문 및 data.timestamp 메시지가 전송 된 시간을 나타내는 JavaScript 날짜 개체에 대한 data.message 사용합니다. |
isMine | Boolean | 메시지 (데모의 #007aff )에 색조를 적용하고 오른쪽에 정렬하여 메시지가 귀하가 전송했음을 나타냅니다. |
startsSequence | Boolean | 메시지가 일련의 메시지의 시작을 나타냅니다. 이것은 메시지를 귀하 또는 다른 사람이 전송했는지 여부에 따라 적절한 상단 테두리 반경을 설정합니다. |
endsSequence | Boolean | 메시지가 일련의 메시지의 끝을 나타냅니다. 이것은 메시지를 귀하 또는 다른 사람이 전송했는지 여부에 따라 적절한 바닥 테두리 반경을 설정합니다. |
showTimestamp | Boolean | 메시지의 타임 스탬프가 표시되어야하는지 여부를 결정합니다. 데모 앱은 메시지간에 1 시간 이상이 통과 된 경우이 값을 true 로 설정합니다. |
이것은 적절한 스타일을 갖춘 메시지 시퀀스 시퀀스를 위해 많은 무거운 리프팅을 수행하는 기만적으로 단순한 구성 요소입니다 ( MessageList.renderMessages 참조). 특히, 우리는 메시지 ( author 및 timestamp )에 대한 정보를 사용하여 수정 된 Border-Radii 및 마진과 함께 메시지 그룹을 더 가깝게 렌더링합니다. 이것은 Facebook Messenger뿐만 아니라 iMessage와 같은 다른 앱에도 존재합니다. 원하는 경우이 기능을 제거 할 수 있습니다.
이 구성 요소는 본질적으로 웹 응용 프로그램의 래퍼입니다. 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 할 수 있습니다. 이 명령은 프로젝트에서 단일 빌드 종속성을 제거합니다.
대신 모든 구성 파일과 전이 종속성 (웹 팩, 바벨, eslint 등)을 프로젝트에 바로 복사하여 전체 제어를 제공합니다. eject 제외한 모든 명령은 여전히 작동하지만 복사 된 스크립트를 가리켜 조정할 수 있습니다. 이 시점에서 당신은 혼자입니다.
eject 사용할 필요는 없습니다. 선별 된 기능 세트는 중소 배포에 적합 하며이 기능을 사용해야 할 의무가 없어야합니다. 그러나 우리는이 도구가 준비가되었을 때 사용자 정의 할 수 없다면 유용하지 않다는 것을 이해합니다.
React Create 앱 문서에서 더 많은 것을 배울 수 있습니다.
React를 배우려면 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-aprogressive-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를 여기로 이동했습니다
