Impara a costruire un'app di chat react in 10 minuti - React JS Tutorial (2023)

In questo articolo, ti mostrerò il modo più semplice possibile per creare un'applicazione di chat utilizzando React.js.Sarà fatto interamente senza codice lato server, poiché lasceremoCHATKIT APIGestisci il back-end.

Suppongo che tu conosca JavaScript di base e che tu abbia mai incontrato un po 'di react.js prima.A parte questo, non ci sono prerequisiti.

Nota: ho anche creato un corso gratuito a figura interaCome creare un'app di chat React.js qui:

Se segui questo tutorial, finirai con la tua applicazione di chat alla fine, su cui puoi costruire ulteriormente se desideri.

Iniziamo!

Passaggio 1: rompere l'interfaccia utente in componenti

React è costruito attorno ai componenti, quindi la prima cosa che vuoi fare quando crei un'app è di interrompere l'interfaccia utente in componenti.

Cominciamo disegnando un rettangolo attorno all'intera app.Questo è il tuo componente radicale e l'antenato comune per tutti gli altri componenti.ChiamiamoloApp:

Dopo aver definito il tuo componente principale, devi porsi la seguente domanda:

Quali bambini diretti ha questo componente?

Nel nostro caso, ha senso dargli tre componenti per bambini, che chiameremo quanto segue:

• Titolo
• Elenco dei messaggi
• SendMessageForm

Disegniamo un rettangolo per ciascuno di questi:

Questo ci dà una bella panoramica dei diversi componenti e dell'architettura dietro la nostra app.

Avremmo potuto continuare a chiederci quali bambini hanno di nuovo questi componenti.Quindi avremmo potuto infrangere l'interfaccia utente in ancora più componenti, ad esempio trasformando ciascuno dei messaggi in propri componenti.Tuttavia, ci fermeremo qui per motivi di semplicità.

Passaggio 2: impostare la base di codice

Ora dovremo configurare il nostro repository.Useremo la struttura più semplice possibile: un file *indice.html *con collegamenti a un file javascript e un foglio di stile.Stiamo anche importando Chatkit SDK e Babele, che viene utilizzato per trasformare il nostro JSX:

Ecco un parco giochi Scrimbacon il codice finale per il tutorial.Ti consiglierei di aprirlo in una nuova scheda e giocarci ogni volta che ti senti confuso.

In alternativa, puoi scaricare il progetto Scrimba come file .zip ed eseguire un sempliceserver per farlo funzionare localmente.

Passaggio 3: creazione del componente radice

Con il repository in atto, siamo in grado di iniziare a scrivere un codice React, che faremo all'interno del file *index.js *.

Cominciamo con il componente principale,App.Questo sarà il nostro unico componente "intelligente", in quanto gestirà i dati e la connessione con l'API.Ecco la configurazione di base per questo (prima di aggiungere qualsiasi logica):

L'app di classe estende react.component {render () {return (
    
)}

Come puoi vedere, rende semplicemente tre bambini: il,, e ilcomponenti.

Lo renderemo un po 'più complesso, poiché i messaggi di chat dovranno essere archiviati all'interno delstatodi questoAppcomponente.Questo ci consentirà di accedere ai messaggithis.state.Messages, e quindi passarli in giro ad altri componenti.

Inizieremo con i dati fittizi in modo da poter comprendere il flusso di dati dell'app.Quindi lo scambieremo con dati reali daCapannaAPI più tardi.

Creiamo unDummy_datavariabile:

cost dammy_data = [{Senderid: "Perborgen", testo: "Chi vincerà?"}, {Senderid: "Janedoe", testo: "Chi vincerà?"}]

Quindi aggiungeremo questi dati allo stato diAppe passalo alMessagelistacomponente come prop.

L'app di classe estende react.component {costructor () {super () this.state = {Messaggi: dammy_data}} render () {return (
   < /div>)}}
Qui, stiamo inizializzando lo stato nelcostruttoreE stiamo anche passandothis.state.Messagesgiù versoMessagelista.
Nota che stiamo chiamandosuper()nel costruttore.Devi farlo se vuoi creare un componente statale.
Passaggio 4: rendering di messaggi fittizi
Vediamo come possiamo rendere questi messaggi inMessagelistacomponente.Ecco come appare:
Class Messagelist estende react.component {render () {return (
 {this.props.messages.map (message => {return (
 
 {message.senderid} 
 
 {message.text} 
 
)})} 
)}}
Questo è un cosiddetto stupido componente.Ci vuole un sostegno,messaggi, che contiene una serie di oggetti.E poi stiamo semplicemente rendendo fuori iltestoEcentriProprietà dagli oggetti.
Con i nostri dati fittizi che fluiscono in questo componente, renderà quanto segue:
Quindi ora abbiamo la struttura di base per la nostra app e siamo anche in grado di eliminare i messaggi.Ottimo lavoro!
Ora sostituiamo i nostri dati fittizi con i messaggi reali da una chat room!
Passaggio 5: recupero degli api-chiavi da chatkit
Per ricevere messaggi di recupero, dovremo connetterci con l'API Chatkit.E per farlo, dobbiamo ottenere le chiavi API.
A questo punto, voglio incoraggiarti a seguire i miei passi in modo da poter ottenere la tua applicazione di chat attivo e funzionante.Puoi usare il mioScrimba PlaygroundPer testare le tue chiavi API.
Inizia creando un gratuitoaccount qui.Una volta che hai fatto, vedrai la tua dashboard.Qui è dove crei nuove istanze di chatkit.Crea uno e dai qualsiasi nome tu voglia:
Quindi verrai navigato per l'istanza appena creata.Qui dovrai copiare quattro valori:
Localizzatore di istanza
Test Token Provider
ID stanza
Nome utente
Inizieremo con ilLocalizzatore di istanza:
È possibile copiare usando l'icona sul lato destro del localizzatore di istanza.
E se scorri un po 'verso il basso troverai ilTest Token Provider:
Il prossimo passo è creare unUtente* * e aCamera, che viene fatto sulla stessa pagina.Nota che dovrai creare un utentePrimo, e poi sarai in grado di creare una stanza, che ti dà di nuovo accesso all'identificatore della stanza.
Quindi ora hai trovato i tuoi quattro identificatori.Ben fatto!
Tuttavia, prima di tornare alla base di codice, voglio che tu invii manualmente un messaggio anche dalla dashboard di Chatkit, poiché questo ci aiuterà nel prossimo capitolo.
Ecco come farlo:
Questo è così che abbiamo effettivamente un messaggio da rendere fuori nel passaggio successivo.
Passaggio 6: rendering di veri messaggi di chat
Ora torniamo al nostroindice.jsFile e archivia questi quattro identificatori come variabili nella parte superiore del nostro file.
Ecco i miei, ma ti incoraggio a creare il tuo:
const instancelocator = "V1: US1: DFAF1E22-2D33-45C9-B4F8-31F634621D24" const TesToken = "https://us1.pusherplatform.io/services/chatkit_token_proudider/v1/dfaf1e222d3-45c9-b4f8-31d 24/token "const username = "perborgen" const roomid = 9796712
E con questo in atto, siamo finalmente pronti a connetterci con Chatkit.Questo accadrà nelAppcomponente e più specificamente nelcomponentdidmountmetodo.Questo è il metodo che dovresti usare quando si collega i componenti react.js alle API.
Per prima cosa creeremo unChatManager:
componentDidMount () {const ChatManager = new ChatKit.ChatManager ({Instancelocator: Instancelocator, UserId: UserId, TokenProvider: New Chatkit.TokenProvider ({URL: Testken})}))
... e poi lo faremochatmanager.connect ()Per connettersi con l'API:
chatmanager.connect (). Quindi (currentUser => {CurrentUser.subScriscriceToroom ({RoomID: RoomID, Hooks: {OnNewMessage: Message => {this.setState ({Messages: [... this.state.Messages, Message]}}}})}}})})}
Questo ci dà accesso autente attualeOggetto, che è l'interfaccia per interagire con l'API.
Nota: come dovremo utilizzareutente attualePiù tardi, ben immagazzinalo sull'istanza facendothis.currentUser = `` CurrentUser.
Quindi chiamiamoCurrentUser.SubscriStiscriteToom ()e passalo il nostrostrisciaree unOnnewMessagegancio.
ILOnnewMessageHook viene attivato ogni volta che un nuovo messaggio viene trasmesso nella chat room.Quindi ogni volta che succede, aggiungeremo semplicemente il nuovo messaggio alla fine dithis.state.Messages.
Ciò si traduce nel recupero dei dati dall'API e quindi nel renderli sulla pagina.
Questo è fantastico, dato che ora abbiamo lo scheletro per la nostra connessione client-server.
Woohoo!
Passaggio 7: gestione dell'input dell'utente
La prossima cosa che dovremo creare è ilSendMessageFormcomponente.Questo sarà un cosiddettocomponente controllato, significa che il componente controlla ciò che viene reso nel campo di input attraverso il suo stato.
Dai un'occhiata alrender ()metodo e presta particolare attenzione alle linee che ho messo in evidenza:
class SendMessageForm estende react.ComPonent {render () {return (   form>)}
Stiamo facendo due cose:
Ascoltando gli input dell'utente con ilOnchangeAscoltatore di eventi, in modo che possiamo
innescare ilCambia di manometodo
Impostazione delvaloredel campo di input usando esplicitamentethis.state.message
La connessione tra questi due passaggi si trova all'interno delCambia di manometodo.Aggiorna semplicemente lo stato a qualunque cosa l'utente tipi nel campo di input:
HandleChange (e) {this.setState ({Message: e.target.value})}
Ciò innesca un rendering e poiché il campo di input è impostato esplicitamente dallo stato usandovalue = {this.state.message}, il campo di input verrà aggiornato.
Quindi, anche se l'app si sente immediata per l'utente quando digita qualcosa nel campo di input,I dati effettivamente passano tramite lo stato prima che React aggiorni l'interfaccia utente.
Per concludere questa funzione, dobbiamo dare al componente acostruttore.In esso, iniziatizzeremo entrambi lo stato e vinceremoQuestonelCambia di manometodo:
costructor () {super () this.state = {messaggio: ''} this.handlechange = this.handlechange.bind (this)}
Dobbiamo legare ilCambia di manometodo in modo che avremo accesso aQuestoParola chiave al suo interno.È così che funziona JavaScript: ilQuestoLa parola chiave è per impostazione predefinitanon definitoAll'interno del corpo di una funzione.
Passaggio 8: invio di messaggi
NostroSendMessageFormIl componente è quasi finito, ma dobbiamo anche prenderci cura della presentazione del modulo.Dobbiamo recuperare i messaggi e inviarli!
Per fare questo collegheremo aHandlesubmitpersino gestore con ilOnsubmitAscoltatore di eventi nel
.
render () {return (
   form>)}
Poiché abbiamo il valore del campo di input memorizzato inthis.state.message, in realtà è abbastanza facile passare i dati corretti insieme alla presentazione.BENE
Basta fare:
HandLeSubmit (e) {e.preventDefault () this.props.sendMessage (this.state.message) this.setState ({Message: ''})}
Qui, stiamo chiamando ilinvia messaggioimpegno e passaggiothis.state.messagecome parametro.Potresti essere un po 'confuso da questo, poiché non abbiamo creato ilinvia messaggiometodo ancora.Tuttavia, lo faremo nella prossima sezione, poiché quel metodo vive all'interno delAppcomponente.Quindi non preoccuparti!
In secondo luogo, stiamo cancellando il campo di input mediante impostazionethis.state.messagea una stringa vuota.
Ecco l'interoSendMessageFormcomponente.Si noti che abbiamo anche legatoQuestoalHandlesubmitmetodo:
Classe SendMessageForm estende react.ComPonent {costructor () {super () this.state = {messaggio: ''} this.HandleChange = this.Handlechange.bind (this) this.handlesubmit = this.handlesubmit.bind (this)} HandleChangeAngeAngeEChange(e) {this.setState ({Message: e.target.value})} HandlesUmmit (e) {e.preventDefault () this.props.sendMessage (this.state.Message) this.setState ({Message: ''})} render () {return (
   form>)}}
Passaggio 9: inviare i messaggi a Chatkit
Ora siamo pronti, quindi invia i messaggi a Chatkit.Che è stato fatto nelAppcomponente, dove creeremo un metodo chiamatothis.sendMessage:
SendMessage (text) {this.currentUser.sendMessage ({text: text, roomid: roomid})}
Ci vuole un parametro (il testo) e chiama semplicementethis.currentUser.sendMessage ().
L'ultimo passo è passarlo acomponente come prop:
/ * Componente app * /render () {return (
   )}
E con ciò, abbiamo tramanato il gestore in modo cheSendMessageFormpuò invocarlo quando il modulo viene inviato.
Passaggio 10: creazione del componente del titolo
Per finire, creiamo anche il componente del titolo.È solo un semplice componente funzionale, che significa una funzione che restituisce un'espressione JSX.
Titolo funzione () {return 
 la mia fantastica app di chat 
}
È una buona pratica usare componenti funzionali, in quanto hanno più vincoli rispetto ai componenti di classe, il che li rende meno inclini ai bug.
Il risultato
E con questo in atto hai la tua applicazione di chat che puoi usare per chattare con i tuoi amici!
Concediti una pacca sul retro se hai codificato fino alla fine.
Se vuoi imparare a costruire ulteriormente su questo esempio,Quindi controlla il mio corso gratuito su come creare un'app di chat con React qui.
Grazie per aver letto e felice programmazione :)