어떻게 반응하는지 배우고 싶어요.js?이것은 나의 무료 수업으로 채팅 앱을 구축함으로써 그것을 가르친다.

그림을 클릭하여 수업에 들어가세요.
채팅은 세상을 집어삼키고 있고, 리액트는 프런트엔드 개발을 집어삼키고 있다.그렇다면 채팅 앱을 구축해 리액션을 배우는 것보다 더 좋은 것은 무엇일까?나의 최신 Scrimba 수업에서 너는 이 점을 할 수 있을 것이다.
그것은 17개의 상호작용 과정(소개와 총결산)과 다섯 가지 도전을 포함하므로 코드를 스스로 편집해야 한다.
가장 좋은 것은 이 모든 것이 브라우저에서 이루어진 것이다.서버 쪽 코드를 작성할 필요가 없습니다.Chatkit API 백엔드의 번거로운 업무를 책임지기 때문에 우리는 채팅 클라이언트 구축에 전념할 수 있다.
수업이 끝날 때 당신은 자신의 개성화된 채팅 앱을 가지게 될 것입니다. 그 중에서 여러 개의 채팅방, 새로운 채팅방을 창설하는 기능, 자동 스크롤 등이 포함됩니다.또한 CSS 메쉬와 CSS 변수로 인해 쉽게 사용자 정의할 수 있습니다.

JavaScript에 대해 잘 알고 있고, 이전에 React를 본 적이 있다고 가정합니다. (예를 들어 제 five minute introductory article 를 읽고, 아마도 몇 가지 강좌를 본 적이 있을 것입니다.)그러나 이 외에 본 과정은 어떠한 선결 조건도 없다.
이제 그것이 어떻게 배치되었는지 봅시다.

제 1 과 과정 소개

내가 먼저 너에게 이 과목을 간략하게 소개해 줄게.우리는 네가 배워야 할 내용을 복습하고, 나도 나 자신을 소개하겠다.수업이 끝날 때, 나는 당신에게 어떻게 자신의 채팅 프로그램을 맞춤형으로 만드는지 소개할 것입니다.

강좌 2: 구성 요소 구조

React 애플리케이션을 구축하기 전에 먼저 구성 요소 아키텍처를 이해하고 UI를 구성 요소로 분해해야 합니다.이 수업에서 나는 너희들에게 어떻게 이 점을 할 수 있는지 보여줄 것이다.

제3과: 코드 라이브러리 구조

다음에, 우리는 우리의 구성 요소 구조가 어떻게 코드로 바뀌는지 보게 될 것이다.나는 또한 환매 협의의 나머지 부분을 어떻게 설정하는지 소개할 것이다. 왜냐하면 우리가 인코딩을 시작하면, 나는 당신으로 하여금 전체 환매 협의 중의 각종 문서에 대해 곤혹스럽게 하지 않을 것이다.
나는 처음부터 저장소를 만들지 않을 것이다. 왜냐하면 많은 강좌가 당신이 개발 환경을 설정하는 데 도움을 줄 수 있기 때문이다. 그러나 Scrimba 플랫폼은 그들을 위한 최선의 선택이 아니다.

제 4 과 메시지 목록 구성 요소

이제 우리는 인코딩을 시작할 수 있기 때문에 본 수업에서 우리는 MessageList 구성 요소에 가상 데이터를 나타낼 것이다.이것은 JSX를 소개할 것입니다. map() 그룹 방법을 사용하여 동적 원소를 만드는 방법을 배울 것입니다.

{DUMMY_DATA.map((message, index) => {  
   return (  
     <div key={index} className="message">  
        <div className="message-username">{message.senderId}</div>  
        <div className="message-text">{message.text}</div>  
     </div>  
   )  
})}

이 수업에서 당신은 첫 번째 도전에 직면하게 될 것입니다!

제5과 채팅방 소개

[! 사진을 클릭하여 채팅방 API](https://pusher.com/chatkit?utm_source=scrimba&utm_medium=medium&utm_campaign=announcment-post에 입장)
사진을 클릭하여 채팅 도구 꾸러미 API에 들어갑니다.
이제 페이지에 데이터를 표시할 수 있습니다. Chatkit API 과 통합을 시작하여 응용 프로그램의 백엔드를 책임질 것입니다.이 과에서는 API에 대해 간략하게 설명합니다.

제6과 채팅방 연결

다음은 간단하게 작성Chatkit 통합입니다. 이것은 매우 간단합니다. 위의 코드는 채팅방에서 정보를 얻기 시작하는 데 필요한 모든 코드입니다.ReactcomponentDidMount()의 라이프 사이클 방법을 접하게 됩니다. 이 방법에서 구성 요소를 제3자 API와 연결해야 합니다.

제 7 과 상태와 도구

상태와 도구는 우리가 React에서 데이터를 처리하는 두 가지 방식입니다. 그 차이를 이해해야 합니다.이 과정에서 우리는 이 두 가지 유형을 사용해야 한다. 왜냐하면 우리는 App 구성 요소의 상태로 채팅 메시지를 저장하고 그것들을 도구로 MessageList 구성 요소에 전달하기 때문이다.

constructor() {  
  super()  
  this.state = {  
    messages: []  
  }  
}

제8과: 메시지 구성 요소

이 과정에서 우리는 메시지 구성 요소를 구축할 것이다.부모로부터 전해진 사용자 이름과 텍스트를 보여 주는 작업이 있습니다.클래스 기반 구성 요소에서 기능 구성 요소로 바꾸는 도전도 드리겠습니다.

function Message(props) {  
  return (  
    <div className="message">  
      <div className="message-username">{props.username}</div>  
      <div className="message-text">{props.text}</div>  
    </div>  
  )  
}

강좌 9: SendMessageForm 구성 요소

메시지를 보내는 폼이 없으면 채팅 앱을 사용할 수 없습니다.그래서 이 수업에서 우리는 완전한 것을 만들 것이다.그것은 제어된 구성 요소에 대한 지식을 가르쳐 줄 것이다. 이것은 React의 관건적인 개념이다.즉, 구성 요소 자체는 내부 상태의 DOM 노드 자체가 아닌 입력 필드에 나타나는 내용을 결정합니다.

제 10 과 정보 브로드캐스트

sendMessage(text) {  
  this.currentUser.sendMessage({  
    text,  
    roodId: 9434230  
  })  
}

현재 우리는 이미 준비가 되어 있다. SendMessageForm 메시지를 Chatkit에 보내서 재생할 수 있도록 해야 한다.따라서 React의 또 다른 핵심 개념인 역방향 데이터 흐름을 배울 수 있습니다.
React에서 데이터는 상위 레벨에서 하위 레벨로 아래로 흐릅니다.그러나 때때로 우리는 부모와 연락하고, 그들을 촉발하는 방법, 그리고 그들 자신으로부터의 데이터를 필요로 한다.

제 11 과 방 목록 구성 요소

우리는 이미 핵심 채팅 기능(메시지 발송 및 표시)이 있기 때문에 RoomList 모듈로 이동할 때가 되었다. 이 모듈은 채팅 패키지의 실례에서 사용할 수 있는 모든 채팅방을 보여 준다.
Chatkit의 새로운 개념을 소개하고 부모 구성 요소에서 하위 구성 요소로 데이터를 보내는 방법에 대한 지식을 공고히 합니다.ES6 spread operator 를 다시 방문하면 구축 시 어떻게 반응하는지 쉽게 알 수 있습니다.js 응용 프로그램.

제 12 과 방 예약

그리고 특정한 방을 예약하는 법을 배워야 한다.우리는 사건 탐지기와 RoomList 구성 요소에 표시된 모든 방을 연결할 것이다.이것은 App 구성 요소 중 하나를 터치합니다. 이 방법은Chatkit 사용자에게 특정한 방을 구독하고 싶다고 알려 줍니다.

subscribeToRoom(roomId) {  
  this.setState({ messages: [] })  
  this.currentUser.subscribeToRoom({  
    roomId: roomId,  
    hooks: {  
      onNewMessage: message => {  
        this.setState({  
          messages: [...this.state.messages, message]  
        })  
      }  
    }  
  })  
}

제 13 과 방 순서 및 현재 방 강조 표시

이 과정에서는 JavaScript의 .sort() 배열 방법을 소개합니다. 데이터가 처음에 어디에 있든지 방의 정렬 순서가 정확해야 하기 때문입니다.
const orderedRooms=[…this.props.rooms].정렬(a,b)=>a.id-b.id)
우리는 또한 사용자에게 신호를 보내기 위해 현재 채팅하는 방에 active 종류를 추가할 것이다.

강좌 14: 자동 스크롤 추가

Autoscroll이 자동으로 MessageList 어셈블리에 나타나는 최신 메시지로 이동해야 합니다.이 기술은 다음과 같은 구성 요소의 라이프 사이클 방법을 보여 주는 교묘한 팁입니다.

componentWillUpdate()

componentDidUpdate()

우리는 ReactDOM.findDOMNode() 방법을 더 사용해야 합니다. 그러면 당신도 이 방법을 이해할 수 있습니다.

제15과: NewRoomForm 구성 요소

이 구성 요소를 사용하면 새 방을 만들 수 있습니다.이것은 제9과 통제된 구성 요소의 복습이 될 것이다.
이렇게 해서 우리는 응용 프로그램의 모든 React 코드를 완성했다.따라서 이 과정의 나머지 부분에서는 CSS를 이용한 설계를 중점적으로 소개하겠습니다.

제16과 자신의 채팅 앱 만들기

우리가 응용 프로그램 설계를 수정하기 전에, 나는 나의 코드를 복제해서, 이렇게 하면 너는 자신의 리포 복사본을 얻을 수 있을 것이라고 생각한다.이것은 다음 화면 설정을 위한 것입니다. 디자인을 개성화할 것입니다.Chatkit에서 복사본과 무료 API 키를 얻을 때까지 단계별로 안내해 드리겠습니다.

강좌 17: CSS 메쉬를 사용하여 레이아웃 변경

우리는 CSS 격자를 사용하여 응용 프로그램의 레이아웃을 제어합니다. 이것은 응용 프로그램을 변경할 때 당신에게 매우 유연성을 제공합니다. grid-template-areas나는 몇 줄의 CSS를 바꾸어 페이지의 요소를 이동하는 방법을 가르쳐 줄 것이다.

제18과: CSS 변수를 사용하여 주제 변경

변수를 수정하기 전과 후에
우리가 색에 CSS 변수를 사용할 때, 프로그램의 테마를 쉽게 바꿀 수 있습니다.여기서, 나는 너에게 도전을 할 것이다. 인터넷에서 괜찮은 팔레트를 찾아서, 그것을 너의 응용 프로그램에 응용할 것이다.
만약 당신이 지난 수업의 레이아웃 변경을 본 수업의 새로운 팔레트와 결합한다면 당신은 자신의 개성화된 채팅 앱을 가지게 될 것입니다!나는 나 자신을 위해 하나를 만들었다. 단지 재미를 위해서였다.

제19과 도전 출력과 끝

만약 네가 여기까지 왔다면: 축하해!너는 정말 너의 기술을 향상시키는 데 많은 노력을 기울였다. 나는 이것이 보답이 있을 것이라고 100% 믿는다.이 영상에서 나는 너에게 몇 가지 마지막 도전을 줄 것이다. 만약 네가 정말 준비가 된다면 너는 할 수 있다.

네가 떠나기 전에, 나는 우리가 아마추어부터 전문적인React 개발자까지 12시간여의 시간을 가지고 있다는 것을 말하고 싶다.
읽어주셔서 감사합니다!저는 페어라고 합니다. 연합 창시자입니다. 저는 사람들이 새로운 기술을 배우는 것을 돕는 것을 좋아합니다.새로운 글과 자원에 대한 통지를 받고 싶으면 따라오세요.
수업이 순조롭고 코딩이 즐겁기를 바랍니다:)