Un curs gratuit React care va va dezvolta abilitatile React
Faceți clic aici pentru a ajunge la cursul complet acest articol se bazează pe.

În acest articol, vă voi arăta cel mai simplu mod posibil de a crea o aplicație de chat folosind React.js. Se va face în întregime fără codul de pe server, așa cum vom permite API Chatkit manipulați partea din spate.

Presupun că știi JavaScript de bază și că ai mai întâlnit un pic din React.js. În afară de asta, nu există condiții prealabile.

Notă: De asemenea, am creat un curs gratuit complet pe cum să creați o aplicație de chat React.js aici:

Dacă urmați acest tutorial, veți termina cu propria aplicație de chat la sfârșit, pe care o puteți construi mai departe dacă doriți.

Să începem!

Pasul 1: împărțirea interfeței de utilizare în componente

React este construit în jurul componentelor, așa că primul lucru pe care doriți să-l faceți atunci când creați o aplicație este să împărțiți interfața utilizatorului în componente.

Să începem prin a desena un dreptunghi în jurul întregii aplicații. Aceasta este componenta dvs. rădăcină și strămoșul comun pentru toate celelalte componente. Să-i spunem App:

Aflati cum sa creati o aplicatie de chat React in

După ce ați definit componenta rădăcină, trebuie să vă puneți următoarea întrebare:

Ce copii direcți are această componentă?

În cazul nostru, este logic să îi oferim trei componente secundare, pe care le vom numi următoarele:

  • Title
  • MessagesList
  • SendMessageForm

Să desenăm un dreptunghi pentru fiecare dintre acestea:

1611666968 727 Aflati cum sa creati o aplicatie de chat React in

Acest lucru ne oferă o imagine de ansamblu frumoasă a diferitelor componente și a arhitecturii din spatele aplicației noastre.

Am fi putut continua să ne întrebăm ce copii au din nou aceste componente. Astfel am fi putut rupe interfața de utilizare în și mai multe componente, de exemplu prin transformarea fiecărui mesaj în propriile componente. Cu toate acestea, ne vom opri aici de dragul simplității.

Pasul 2: Configurarea bazei de cod

Acum va trebui să ne configurăm depozitul. Vom folosi cea mai simplă structură posibilă: un fișier * index.html * cu legături către un fișier JavaScript și o foaie de stil. De asemenea, importăm Chatkit SDK și Babel, care sunt folosite pentru a transforma JSX-ul nostru:

1611666968 127 Aflati cum sa creati o aplicatie de chat React in

Iată un loc de joacă Scrimba cu codul final pentru tutorial. Vă recomandăm să o deschideți într-o filă nouă și să vă jucați cu ea ori de câte ori vă simțiți confuz.

1611666968 500 Aflati cum sa creati o aplicatie de chat React in

Alternativ, puteți descărca proiectul Scrimba ca fișier .zip și puteți rula un simplu server pentru al porni și a rula local.

Pasul 3: Crearea componentei rădăcină

Cu depozitul în poziție, putem începe să scriem un cod React, pe care îl vom face în fișierul * index.js *.

Să începem cu componenta principală, App. Aceasta va fi singura noastră componentă „inteligentă”, deoarece va gestiona datele și conexiunea cu API-ul. Iată configurarea de bază pentru aceasta (înainte de a adăuga orice logică):

    class App extends React.Component {
      
      render() {
        return (
          <div className="app">
            <Title />
            <MessageList />
            <SendMessageForm />
         </div>
        )
      }
    }

După cum puteți vedea, redă pur și simplu trei copii: <Title>,<MessageList>, si <SendMessageForm> componente.

Vom face totuși ceva mai complex, deoarece mesajele de chat vor trebui stocate în interiorul stat din aceasta App componentă. Acest lucru ne va permite să accesăm mesajele prin this.state.messages, și, astfel, să le transmită către alte componente.

Vom începe cu utilizarea de date fictive, astfel încât să putem înțelege fluxul de date al aplicației. Apoi vom schimba acest lucru cu date reale din Chatkit API mai târziu.

Să creăm un DUMMY_DATA variabil:

    const DUMMY_DATA = [
      {
        senderId: "perborgen",
        text: "who'll win?"
      },
      {
        senderId: "janedoe",
        text: "who'll win?"
      }
    ]

Apoi vom adăuga aceste date la starea de App și transmiteți-l la MessageList component ca prop.

    class App extends React.Component {
      
      constructor() {
        super()
        this.state = {
           messages: DUMMY_DATA
        }
      }
      
      render() {
        return (
          <div className="app">
            <MessageList messages={this.state.messages}/>
            <SendMessageForm />
         </div>
        )
      }
    }

Aici, inițializăm statul în constructor și trecem și noi this.state.messages până la MessageList.

Rețineți că sunăm super() în constructor. Trebuie să faceți acest lucru dacă doriți să creați o componentă de stare.

Pasul 4: Redarea mesajelor fictive

Să vedem cum putem reda aceste mesaje în MessageList componentă. Iată cum arată:

    class MessageList extends React.Component {
      render() {
        return (
          <ul className="message-list">                 
            {this.props.messages.map(message => {
              return (
               <li key={message.id}>
                 <div>
                   {message.senderId}
                 </div>
                 <div>
                   {message.text}
                 </div>
               </li>
             )
           })}
         </ul>
        )
      }
    }

Aceasta este așa-numita componentă stupidă. Este nevoie de un prop, messages, care conține o serie de obiecte. Și apoi redăm pur și simplu text și senderId proprietăți din obiecte.

Cu datele noastre fictive care curg în această componentă, se vor reda următoarele:

1611666968 83 Aflati cum sa creati o aplicatie de chat React in

Așadar, acum avem structura de bază pentru aplicația noastră și, de asemenea, putem reda mesaje. Buna treaba!

Acum, să înlocuim datele noastre false cu mesaje reale dintr-o cameră de chat!

Pasul 5: Preluarea cheilor API din Chatkit

Pentru a primi mesaje de preluare, va trebui să ne conectăm cu API-ul Chatkit. Și pentru a face acest lucru, trebuie să obținem chei API.

În acest moment, vreau să vă încurajez să urmați pașii mei, astfel încât să puteți pune în funcțiune propria aplicație de chat. Îl poți folosi pe al meu Loc de joacă Scrimba pentru a testa propriile chei API.

Începeți prin crearea unui program gratuit cont aici. După ce ați făcut acest lucru, veți vedea tabloul de bord. Aici creați noi instanțe Chatkit. Creați unul și dați-i orice nume doriți:

1611666968 714 Aflati cum sa creati o aplicatie de chat React in

Apoi veți fi navigat la instanța dvs. recent creată. Aici va trebui să copiați patru valori:

  • Localizator de instanțe
  • Furnizorul de teste de testare
  • Codul camerei
  • Nume de utilizator

Vom începe cu Localizator de instanțe:

Puteți copia utilizând pictograma din partea dreaptă a Localizatorului de instanțe.

Puteți copia utilizând pictograma din partea dreaptă a Localizatorului de instanțe.

Și dacă derulați puțin în jos, veți găsi Furnizorul de teste de testare:

1611666968 420 Aflati cum sa creati o aplicatie de chat React in

Următorul pas este crearea unui Utilizator* * și a Cameră, care se face pe aceeași pagină. Rețineți că va trebui să creați un utilizator primul, și apoi veți putea crea o cameră, care vă oferă din nou acces la identificatorul camerei.

1611666968 743 Aflati cum sa creati o aplicatie de chat React in

Așa că acum ți-ai găsit cei patru identificatori. Foarte bine!

Cu toate acestea, înainte de a ne întoarce la baza de coduri, vreau să trimiteți manual un mesaj și din tabloul de bord Chatkit, deoarece acest lucru ne va ajuta în capitolul următor.

Iată cum puteți face acest lucru:

1611666968 754 Aflati cum sa creati o aplicatie de chat React in

Acest lucru este astfel încât să avem de fapt un mesaj de redat în pasul următor.

Pasul 6: Redarea mesajelor reale de chat

Acum să ne întoarcem la noi index.js fișier și stocați acești patru identificatori ca variabile în partea de sus a fișierului nostru.

Iată-le pe ale mele, dar te-aș încuraja să le creezi pe a ta:

    const instanceLocator = "v1:us1:dfaf1e22-2d33-45c9-b4f8-31f634621d24"

    const testToken = "https://us1.pusherplatform.io/services/chatkit_token_provider/v1/dfaf1e22-2d33-45c9-b4f8-31f634621d24/token"

    const username = "perborgen"

    const roomId = 9796712

Și având în vedere acest lucru, suntem în sfârșit gata să ne conectăm cu Chatkit. Acest lucru se va întâmpla în App componentă, și mai precis în componentDidMount metodă. Aceasta este metoda pe care ar trebui să o utilizați atunci când conectați componentele React.js la API-uri.

Mai întâi vom crea un chatManager:

    componentDidMount() {
      const chatManager = new Chatkit.ChatManager({
        instanceLocator: instanceLocator,
        userId: userId,
        tokenProvider: new Chatkit.TokenProvider({
          url: testToken
        })
     })  

… și apoi vom facechatManager.connect() pentru a vă conecta cu API-ul:

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

Acest lucru ne oferă acces la currentUser obiect, care este interfața pentru interacțiunea cu API-ul.

Notă: așa cum va trebui să folosimcurrentUser mai târziu, păstrați-l bine pe instanță făcând this.currentUser = ``currentUser.

Apoi, sunăm currentUser.subscribeToRoom() și transmite-o noastră roomId si un onNewMessage cârlig.

onNewMessage cârligul este declanșat de fiecare dată când un nou mesaj este difuzat în camera de chat. Deci, de fiecare dată când se întâmplă, vom adăuga pur și simplu noul mesaj la sfârșitul anului this.state.messages.

Aceasta are ca rezultat ca aplicația să preia date din API și apoi să le redea pe pagină.

1611666968 720 Aflati cum sa creati o aplicatie de chat React in

Este minunat, deoarece avem acum scheletul pentru conexiunea client-server.

Woo hoo!

Pasul 7: gestionarea datelor introduse de utilizator

Următorul lucru pe care va trebui să îl creăm este SendMessageForm componentă. Acesta va fi un așa-numit componentă controlată, adică componenta controlează ceea ce este redat în câmpul de intrare prin starea sa.

Uită-te la render() și acordați o atenție specială liniilor pe care le-am evidențiat:

    class SendMessageForm extends React.Component {
      render() {
        return (
          <form
            className="send-message-form">
            <input
              onChange={this.handleChange}
              value={this.state.message}
              placeholder="Type your message and hit ENTER"
              type="text" />
          </form>
        )
      }
    }

Facem două lucruri:

  1. Ascultarea intrărilor utilizatorului cu onChange ascultător de evenimente, astfel încât să putem
    declanșează handleChange metodă
  2. Setarea value a câmpului de intrare folosind în mod explicit this.state.message

Conexiunea dintre acești doi pași se găsește în interiorul handleChange metodă. Pur și simplu actualizează starea la orice tip de utilizator introduce în câmpul de intrare:

    handleChange(e) {
      this.setState({
        message: e.target.value
      })
    }

Acest lucru declanșează o redare și, deoarece câmpul de intrare este setat în mod explicit din starea folosind value={this.state.message}, câmpul de introducere va fi actualizat.

Deci, chiar dacă aplicația se simte instantaneu pentru utilizator atunci când introduce ceva în câmpul de intrare, datele trec de fapt prin stat înainte ca React să actualizeze interfața de utilizare.

Pentru a încheia această caracteristică, trebuie să acordăm componentei un constructor. În el, vom inițializa starea și vom lega this în handleChange metodă:

    constructor() {
        super()
        this.state = {
           message: ''
        }
        this.handleChange = this.handleChange.bind(this)
    }

Trebuie să legăm handleChange, astfel încât să avem acces la this cuvânt cheie din interiorul acestuia. Așa funcționează JavaScript: this cuvântul cheie este implicit nedefinit în interiorul corpului unei funcții.

Pasul 8: Trimiterea mesajelor

Al nostru SendMessageForm componentă este aproape terminată, dar trebuie să ne ocupăm și de trimiterea formularului. Trebuie să preluăm mesajele și să le trimitem!

Pentru a face acest lucru, vom conecta un handleSubmit chiar gestionează cu onSubmit ascultător de evenimente în <form>.

    render() {
        return (
          <form
            onSubmit={this.handleSubmit}
            className="send-message-form">
            <input
              onChange={this.handleChange}
              value={this.state.message}
              placeholder="Type your message and hit ENTER"
              type="text" />
        </form>
        )
      }

Deoarece avem câmpul de intrare stocat în this.state.message, este de fapt destul de ușor să transmiteți datele corecte împreună cu trimiterea. Bine
pur și simplu faceți:

    handleSubmit(e) {
      e.preventDefault()
      this.props.sendMessage(this.state.message)
      this.setState({
        message: ''
      })
    }

Aici, sunăm la sendMessage prop și de trecere this.state.message ca parametru. S-ar putea să fiți puțin confuz de acest lucru, deoarece nu am creat sendMessage metodă încă. Cu toate acestea, vom face acest lucru în secțiunea următoare, deoarece această metodă trăiește în interiorul App componentă. Deci, nu vă faceți griji!

În al doilea rând, ștergem câmpul de introducere prin setare this.state.message la un șir gol.

Iată întregul SendMessageForm componentă. Observați că am legat și noi this la handleSubmit metodă:

    class SendMessageForm extends React.Component {
      constructor() {
        super()
        this.state = {
          message: ''
        }
        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
      }

      handleChange(e) {
        this.setState({
          message: e.target.value
        })
      }

      handleSubmit(e) {
        e.preventDefault()
        this.props.sendMessage(this.state.message)
        this.setState({
          message: ''
        })
      }

      render() {
        return (
          <form
            onSubmit={this.handleSubmit}
            className="send-message-form">
            <input
              onChange={this.handleChange}
              value={this.state.message}
              placeholder="Type your message and hit ENTER"
              type="text" />
          </form>
        )
      }
    }

Pasul 9: Trimiterea mesajelor către Chatkit

Acum suntem gata, așa că trimiteți mesajele pe Chatkit. Asta s-a încheiat în App componentă, unde vom crea o metodă numită this.sendMessage:

    sendMessage(text) {
      this.currentUser.sendMessage({
        text: text,
        roomId: roomId
      })
    }

Este nevoie de un parametru (textul) și apelează pur și simplu this.currentUser.sendMessage().

Ultimul pas este de a transmite acest lucru la <SendMessageForm> componentă drept suport:

    /* App component */
      
    render() {
      return (
        <div className="app">
          <Title />
          <MessageList messages={this.state.messages} />
          <SendMessageForm sendMessage={this.sendMessage} />
      )
    }

Și odată cu asta, am transmis mai jos handler-ul, astfel încât SendMessageForm îl poate invoca la trimiterea formularului.

Pasul 10: Crearea componentei Titlu

Pentru a termina, să creăm și componenta Title. Este doar o componentă funcțională simplă, adică o funcție care returnează o expresie JSX.

    function Title() {
      return <p class="title">My awesome chat app</p>
    }

Este o practică bună să utilizați componente funcționale, deoarece acestea au mai multe constrângeri decât componentele clasei, ceea ce le face mai puțin predispuse la erori.

Rezultatul

Și cu asta în loc aveți propria aplicație de chat pe care o puteți folosi pentru a discuta cu prietenii!

1611666968 242 Aflati cum sa creati o aplicatie de chat React in

Dați-vă o palmă pe spate dacă ați codat până la capăt.

Dacă doriți să aflați cum să construiți mai departe pe acest exemplu, apoi consultați cursul meu gratuit despre cum să creați o aplicație de chat cu React aici.

Multumesc pentru citire si codificare fericita 🙂