React.js로 커스텀 플래시 메시지 컴포넌트를 만드는 방법
자체 서버를 구축하는 대신 CometChat Pro를 사용하여 실시간 채팅 메시지 송수신을 처리합니다.
완료되면 다음과 같은 기능적인 채팅 응용 프로그램이 있어야 합니다(물론 진행하면서 조정하고 실험할 수 있습니다).
이 튜토리얼을 따라하기 쉽도록 일련의 단계로 구성했습니다. 코드를 확인하고 싶으시다면, 여기를 클릭 .
위치를 새로 고칠 수 없습니다
프로젝트 설정
이를 위해 Create React App이라는 덜 알려진 gem을 사용할 것입니다. 최고의 것? npm이 설치되어 있으므로 npx를 사용하여 한 단계로 create-react-app을 설치하고 실행할 수 있습니다.
npx create-react-app chatapp // note: npm v5.2+ 이 명령을 실행하면 chatapp이라는 새 폴더가 다음 구조로 생성됩니다.
또한 React를 사용하려면 React Router와 CometChat Pro SDK도 설치해야 합니다. 이렇게 하려면 chatapp 디렉토리로 이동하여 다음을 실행하십시오.
npm install react-router-dom @cometchat-pro/chat --save 반응 라우터 추가
React Router를 사용하여 필요한 페이지로 사용자를 라우팅합니다. React Router를 설정하려면 먼저 |_+_| 싸개 index.js 파일의 구성 요소. |_+_| 내부 |_+_| 요소.
index.js를 다음 스니펫으로 바꿉니다.
Router|_+_| 응용 프로그램의 진입점입니다. 유일한 실제 작업은 React 애플리케이션을 렌더링하는 것입니다. 실제 로직의 대부분은 다음에 수정할 App.js라는 파일에서 발생합니다.
App.js에서는 사용자가 로드한 경로에 따라 다른 구성 요소를 렌더링할 수 있도록 추가 React Router 종속성을 가져와야 합니다. 예를 들어 사용자가 /login 경로로 이동하는 경우 로그인 구성 요소를 렌더링해야 합니다. 마찬가지로 사용자가 /chat 경로로 이동하면 |_+_| 요소:
App이 코드를 실행하려고 하면 |_+_| 그리고 |_+_| 구성 요소. 지금 해보자.
내 마인크래프트 계정을 잃어버렸어
로그인 구성 요소 만들기
프로젝트를 멋지고 깔끔하게 유지하려면 |__+_|라는 폴더를 만드세요. 사용자 정의 구성 요소를 유지합니다.
그런 다음 새로 생성된 폴더에서 다음 코드를 사용하여 Login.js라는 파일을 생성합니다.
Router프리젠테이션 HTML을 제외하고 여기에 있는 대부분의 코드는 React 양식을 처리하는 데 전념합니다.
Groupchat 구성 요소 업데이트
Groupchat 구성 요소는 로그인 구성 요소보다 훨씬 더 많은 책임이 있습니다. 빠른 알림으로 다음과 같이 표시됩니다.
대부분 |_+_| 구성 요소의 작업은 채팅 라이브러리 모듈과 사용자에게 제공할 UI를 연결하는 것입니다. 예를 들어 사용자가 메시지를 보낼 때 |_+_| 새 메시지가 들어오면 콜백 함수가 호출됩니다.
import React from 'react'; import { BrowserRouter as Router } from 'react-router-dom'; // added import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; ReactDOM.render( , document.getElementById('root')); 여기에서 소화해야 할 것이 많으므로 중요한 부분을 분해해 보겠습니다.
- |_+_| – 이 기능은 GUID를 전달하고 저장된 텍스트 메시지가 구성 요소의 상태에 있는 그룹에 메시지를 보내는 것을 처리합니다. 사용자가 그룹의 일부가 아닌 경우 그룹에 가입하도록 요청한 다음 sendMessage 함수를 다시 호출합니다.
- |_+_| – 이 기능은 메시지 리스너에 대한 콜백 기능으로 사용되며 채팅 목록에 최신 메시지가 표시되는지 확인합니다.
- |_+_| – 이것은 sendMessage 함수를 호출합니다.
- |_+_| – 이것은 chat.getLoggedInUser() 메소드를 호출하고 컴포넌트의 상태에 사용자 객체를 저장합니다.
- |_+_| – 이것은 chat.addMessageListener() 함수를 호출하고 수신된 모든 새 메시지를 |__+_| 구성 요소의 상태에 저장되고 앱에서 렌더링되는 배열입니다.
- |_+_| – 이것은 getUser 및 messageListener 함수를 호출합니다.
마지막으로 메시지가 우리의 것인지 다른 사람의 것인지에 따라 클래스를 렌더링합니다. 이런 식으로 다음 섹션의 주제인 다양한 스타일을 적용할 수 있습니다.
스타일 업데이트
지금 응용 프로그램을 실행하면 작동하지만 지금까지 CSS에 대해 언급하지 않았다면 상당히 어, 이상하게 보일 것입니다. 이것은 CSS에 대한 자습서가 아니므로 자세히 설명하지 않겠지만, 따라하는 데 도움이 되도록 다음을 App.css 파일에 붙여넣을 수 있습니다(이는 |_ +_| 이전):
index.js결론
|_+_|를 사용하여 애플리케이션을 실행합니다. 그리고 낮고 보라, 당신의 채팅 신청이 완료되었습니다. 최소한 기본 기능은 있습니다. CometChat을 사용하면 온라인 목록, 다이렉트 메시지, 미디어 메시지 및 기타 여러 기능을 포함하도록 앱을 쉽게 확장할 수 있습니다.
이 튜토리얼이 확실히 도움이 되기를 바랍니다. 이 글이 마음에 드셨다면 다른 분들에게도 공유 부탁드립니다.!!
_이 기사는 원래 게시되었습니다. 코멧챗의
#reactjs #react-native #자바스크립트 #웹 개발