Kuidas luua 10 minutiga vestlusrakendus React.js

Kuidas rakendus välja töötame, näeb välja.

Selles artiklis näitan teile lihtsaimat viisi vestlusrakenduse loomiseks saidil React.js. See tehakse täielikult ilma serveripoolse koodita, kuna me lubame Chatkiti API-l hallata tausta.

Ma eeldan, et teate põhilist JavaScripti ja olete React.js'iga pisut varem kokku puutunud. Muud eeldused puuduvad.

Märkus. Olen siin loonud ka tasuta täispika kursuse, kuidas luua vestlusrakendust React.js:
Kursusele pääsemiseks klõpsake pildil.

Kui järgite seda õpetust, saate lõpus oma enda vestlusrakenduse, mida saate siis soovi korral edasi arendada.

Alustame!

1. samm: kasutajaliidese jaotamine komponentideks

Reakt on üles ehitatud komponentide ümber, nii et esimene asi, mida soovite rakenduse loomisel teha, on selle UI osadeks jagamine.

Alustame kogu rakenduse ümber ristküliku joonistamist. See on teie juurkomponent ja kõigi teiste komponentide ühine esivanem. Nimetagem seda rakenduseks:

Kui olete juurkomponendi määratlenud, peate endalt küsima järgmise küsimuse:

Milliseid otseseid lapsi sellel komponendil on?

Meie puhul on mõistlik anda sellele kolm alamkomponenti, mida kutsume järgmiseks:

  • Pealkiri
  • Sõnumite loend
  • SendMessageForm

Joonestame ristküliku nende kõigi jaoks:

See annab meile kena ülevaate erinevatest komponentidest ja meie rakenduse taga olevast arhitektuurist.

Oleksime võinud endalt küsida, mis lastel need komponendid jälle on. Nii oleksime võinud kasutajaliidese jagada veelgi rohkemateks komponentideks, näiteks muutes iga sõnumi oma komponentideks. Kuid peatume siin lihtsuse huvides.

2. samm: koodialuse seadistamine

Nüüd peame oma hoidla seadistama. Kasutame võimalikult lihtsat ülesehitust: index.html-faili koos linkidega JavaScripti faili ja stiililehega. Samuti impordime Chatkit SDK-d ja Babeli, mida kasutatakse meie JSX-i teisendamiseks:

Siin on Scrimba mänguväljak koos juhendaja lõpukoodiga. Soovitaksin teil selle avada uuel vahekaardil ja sellega mängida, kui tunnete end segaduses.

Kogu koodialusega katsetamiseks klõpsake pilti.

Teise võimalusena saate Scrimba projekti alla laadida .zip-failina ja käivitada lihtsa serveri, et see kohalikul viisil tööle saada.

3. samm: juurkomponendi loomine

Kui hoidla on paigas, saame hakata kirjutama mõnda Reacti koodi, mida teeme ka failis index.js.

Alustame põhikomponendist, rakendusest See on meie ainus nutikas komponent, kuna see haldab andmeid ja ühendust API-ga. Siin on selle põhiseadistused (enne kui oleme loogika lisanud):

klassi rakendus laiendab rakendust React.Component {
  
  renderdama () {
    tagasi (
      
                                
    )   }
}

Nagu näete, renderdab see lihtsalt kolm last: komponendid , <MessageList> ja <SendMessageForm>.</p><p>Teeme selle pisut keerukamaks, kuna vestlussõnumid tuleb salvestada selle rakenduse komponendi olekusse. See võimaldab meil juurde pääseda sõnumitele läbi selle.state.messages ja edastada need teistele komponentidele.</p><p>Alustame näivandmete kasutamist, et saaksime aru rakenduse andmevoogudest. Siis vahetame selle hiljem välja Chatkit API-l olevate reaalsete andmetega.</p><p>Loome muutuja DUMMY_DATA:</p><pre>const DUMMY_DATA = [   {     senderId: "perborgen",     tekst: "kes võidab?"   },   {     senderId: "janedoe",     tekst: "kes võidab?"   } ]</pre><p>Seejärel lisame need andmed rakenduse olekusse ja edastame selle tugiteenuse osana MessageList.</p><pre>klassi rakendus laiendab rakendust React.Component {      ehitaja () {     Super()     see.riik = {        sõnumid: DUMMY_DATA     }   }      renderdama () {     tagasi (       <div className = "app">         <MessageList messages = {this.state.messages} />         <SendMessageForm />      </div>     )   }</pre><pre>}</pre><p>Me lähtestame ehitaja oleku ja edastame selle.state.messages ka sõnumite loendisse.</p><blockquote>Pange tähele, et ehitajas kutsume super (). Riikliku komponendi loomiseks peate selle tegema.</blockquote><h3>4. samm: näivteadete renderdamine</h3><p>Vaatame, kuidas saaksime need kirjad sõnumiloendis välja tuua. See näeb välja järgmine:</p><pre>klass MessageList laiendab React.Component {   renderdama () {     tagasi (       <ul className = "message-list">         {this.props.messages.map (teade => {           tagasi (            <li key = {message.id}>              <div>                {message.senderId}              </div>              <div>                {message.text}              </div>            </li>          )        })}      </ul>     )   } }</pre><p>See on nn rumal komponent. See võtab ühe rekvisiidi, sõnumid, mis sisaldab hulga objekte. Ja siis renderdame objektidelt lihtsalt teksti ja saatja ID omadused.</p><p>Kui meie näivandmed voolavad sellesse ossa, muudab see järgmise:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568822281416.png" /><p>Nüüd on meil meie rakenduse põhistruktuur ja ka meil on võimalik sõnumeid edastada. Suurepärane töö!</p><p>Asendame nüüd meie näivandmed vestlusruumi tegelike teadetega!</p><h3>5. samm: API-võtmete toomine Chatkitist</h3><p>Tõmbesõnumite saamiseks peame looma ühenduse Chatkit API-ga. Ja selleks peame muidugi hankima API võtmed.</p><p>Siinkohal soovin julgustada teid järgima minu samme, et saaksite oma vestlusrakenduse üles töötada ja käitada. Võite kasutada minu Scrimba mänguväljakut, et testida oma API võtmeid.</p><p>Alustage siin tasuta konto loomisega. Kui olete selle teinud, näete oma juhtpaneeli. Siit saate luua uusi Chatkiti eksemplare. Looge üks ja pange sellele soovitud nimi:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568822282720.png" /><p>Siis suunatakse teid oma vastloodud eksemplari juurde. Siin peate kopeerima neli väärtust:</p><ul><li>Juhtumite otsija</li><li>Testimärgi pakkuja</li><li>Ruumi id</li><li>Kasutajanimi</li></ul><p>Alustame eksemplari otsijaga:</p><img alt="Kopeerimiseks võite kasutada eksemplari loendi paremal küljel asuvat ikooni." src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568822284773.png" /><p>Ja kui natuke kerida, leiate testkäskluse pakkuja:</p><img alt="Märkus: loa saamiseks peate märkima ruutu Lubatud." src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568822287062.png" /><p>Järgmine samm on kasutaja ja toa loomine, mis tehakse samal lehel. Pange tähele, et kõigepealt peate looma kasutaja ja seejärel saate luua ruumi, mis annab teile uuesti juurdepääsu ruumi identifikaatorile.</p><img alt="Valige kasutajanimi, looge tuba ja kopeerige kasutajanimi ja ruumi ID." src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568822290410.png" /><p>Nüüd olete leidnud oma neli identifikaatorit. Hästi tehtud!</p><p>Enne kui asume tagasi koodipõhja juurde, soovin, et saadaksite sõnumi ka käsitsi Chatkiti armatuurlaualt, kuna see aitab meid järgmises peatükis.</p><p>Seda saate teha järgmiselt.</p><img alt="Sõnumi saatmine Chatkit UI-st" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568822292928.png" /><p>See on nii, et meil on tegelikult sõnum, mille järgmisel sammul edastada.</p><h3>6. samm: tõeliste vestlussõnumite renderdamine</h3><p>Pöördugem tagasi meie faili index.js juurde ja salvestage need neli identifikaatorit muutujatena meie faili ülaossa.</p><p>Siin on minu oma, kuid ma soovitaksin teil luua oma:</p><pre>const instanceLocator = "v1: us1: dfaf1e22-2d33-45c9-b4f8-31f634621d24"</pre><pre>const testToken = "https://us1.pusherplatform.io/services/chatkit_token_provider/v1/dfaf1e22-2d33-45c9-b4f8-31f634621d24/token"</pre><pre>const kasutajanimi = "perborgen"</pre><pre>const roomId = 9796712</pre><p>Ja kui see on paigas, oleme lõpuks valmis Chatkitiga ühenduse looma. See juhtub rakenduse komponendis ja täpsemalt komponentDidMount meetodis. See on meetod, mida peaksite kasutama React.js komponentide ühendamisel API-dega.</p><p>Esmalt loome chatManageri:</p><pre>komponentDidMount () {   const chatManager = uus Chatkit.ChatManager ({     instanceLocator: instanceLocator,     userId: kasutajanimi,     tokenProvider: uus Chatkit.TokenProvider ({       url: testToken     })  })</pre><p>... ja siis saame API-ga ühenduse loomiseks dokumendi dochatManager.connect ():</p><pre>  chatManager.connect (). siis (currentUser => {       currentUser.subscribeToRoom ({       tubaId: tubaId,       konksud: {         onNewMessage: teade => {           this.setState ({             sõnumid: [... see.riik.sõnumid, sõnum]           })         }       }     })   }) }</pre><p>See annab meile juurdepääsu praegusele kasutajaobjektile, mis on liides API-ga suhtlemiseks.</p><blockquote>Märkus. Kuna me peame hiljem kasutama funktsioonicurrentUser, salvestage see eksemplarile hästi, tehes seda.currentUser = currentUser.</blockquote><p>Seejärel helistame praegusele kasutajale.subscribeToRoom () ja edastame selle meie toa ID-le ja onNewMessage'i konksule.</p><p>OnNewMessage'i konks käivitatakse iga kord, kui vestlussaali edastatakse uus teade. Nii et iga kord, kui see juhtub, lisame lihtsalt uue teate selle.state.messages lõppu.</p><p>Selle tulemuseks on rakenduse andmete toomine API-st ja nende renderdamine lehel.</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568822294654.png" /><p>See on fantastiline, kuna meil on nüüd olemas kliendi-serveri ühenduse skelett.</p><p>Woohoo!</p><h3>7. samm: kasutaja sisendi haldamine</h3><p>Järgmine asi, mida peame looma, on komponent SendMessageForm. See on niinimetatud kontrollitav komponent, mis tähendab, et komponent juhib sisendväljal selle oleku kaudu pakutavat.</p><p>Vaadake renderdamise () meetodit ja pöörake erilist tähelepanu joontele, mida ma esile tõin:</p><pre>klassi SendMessageForm laiendab React.Component {   renderdama () {     tagasi (       <vorm         className = "send-message-form">         <sisend           onChange = {this.handleChange}           value = {this.state.message}           placeholder = "Sisestage oma teade ja vajutage sisestusklahvi (ENTER)"           tüüp = "tekst" />       </form>     )   } }</pre><p>Me teeme kahte asja:</p><ol><li>Kasutajate sisendite kuulamine onChange'i sündmuse kuulajaga, et saaksime käivitada käepideme muutmise meetodi</li><li>Sisestusvälja väärtuse määramine selgesõnaliselt kasutades seda.state.message</li></ol><p>Ühendus nende kahe sammu vahel leitakse käepideme muutmise meetodist. See värskendab olekut lihtsalt sellele, mida kasutaja sisestusväljale sisestab:</p><pre>handleChange (e) {   this.setState ({     teade: e.target.value   }) }</pre><p>See käivitab uuesti renderdamise ja kuna sisendväli seatakse olekust selgesõnaliselt, kasutades väärtust = {this.state.message}, värskendatakse sisestusvälja.</p><p>Ehkki rakendus tunneb kasutajat kohe, kui ta midagi sisestusväljale sisestab, lähevad andmed tegelikult oleku kaudu enne, kui React kasutajaliidest värskendab.</p><p>Selle funktsiooni katmiseks peame andma komponendi konstruktorile. Selles lähtestame nii oleku kui ka seome selle käepideme muutmise meetodil:</p><pre>ehitaja () {     Super()     see.riik = {        teade: ''     }     this.handleChange = this.handleChange.bind (see) }</pre><p>Peame siduma käepideme muutmise meetodi, nii et meil oleks juurdepääs sellele märksõnale selle sees. Nii töötab JavaScript: see märksõna on funktsiooni põhiosas vaikimisi määratlemata.</p><h3>8. samm: sõnumite saatmine</h3><p>Meie komponent SendMessageForm on peaaegu valmis, kuid peame hoolitsema ka vormi esitamise eest. Peame sõnumid tooma ja need ära saatma!</p><p>Selleks ühendame käepideme edastamise isegi käitleja onSubmiti sündmuse kuulajaga <vormis>.</p><pre>renderdama () {     tagasi (       <vorm         onSubmit = {this.handleSubmit}         className = "send-message-form">         <sisend           onChange = {this.handleChange}           value = {this.state.message}           placeholder = "Sisestage oma teade ja vajutage sisestusklahvi (ENTER)"           tüüp = "tekst" />       </form>     )   }</pre><p>Kuna sisestusvälja väärtus on salvestatud saidile see.state.message, on tegelikult üsna lihtne edastada õigeid andmeid koos edastamisega. Teeme lihtsalt järgmist:</p><pre>handleSubmit (e) {   e.preventDefault ()   this.props.sendMessage (this.state.message)   this.setState ({     teade: ''   }) }</pre><p>Kutsume siin sendMessage'i prop ja edastame parameetrina this.state.message. Võib-olla olete sellest pisut segaduses, kuna me pole veel sendMessage'i meetodit loonud. Teeme seda siiski järgmises jaotises, kuna see meetod elab rakenduse komponendi sees. Nii et ärge muretsege!</p><p>Teiseks tühjendame sisendvälja, määrates selle.state.message tühjaks stringi.</p><p>Siin on kogu komponent SendMessageForm. Pange tähele, et oleme selle sidunud ka käepideme esitamise meetodiga:</p><pre>klassi SendMessageForm laiendab React.Component {   ehitaja () {     Super()     see.riik = {       teade: ''     }     this.handleChange = this.handleChange.bind (see)     this.handleSubmit = this.handleSubmit.bind (see)   }</pre><pre>  handleChange (e) {     this.setState ({       teade: e.target.value     })   }</pre><pre>  handleSubmit (e) {     e.preventDefault ()     this.props.sendMessage (this.state.message)     this.setState ({       teade: ''     })   }</pre><pre>  renderdama () {     tagasi (       <vorm         onSubmit = {this.handleSubmit}         className = "send-message-form">         <sisend           onChange = {this.handleChange}           value = {this.state.message}           placeholder = "Sisestage oma teade ja vajutage sisestusklahvi (ENTER)"           tüüp = "tekst" />       </form>     )   } }</pre><h3>9. samm: sõnumite saatmine Chatkitisse</h3><p>Oleme nüüd valmis, nii et saatke sõnumid Chatkitisse. Seda tehakse rakenduse komponendis, kus loome meetodi nimega this.sendMessage:</p><pre>sendMessage (tekst) {   this.currentUser.sendMessage ({     tekst,     toa ID: toa ID   }) }</pre><p>See võtab ühe parameetri (tekst) ja kutsub lihtsalt selle.currentUser.sendMessage ().</p><p>Viimane samm on see edastada rekvisiidina komponendile <SendMessageForm>:</p><pre>/ * Rakenduse komponent * /    renderdama () {   tagasi (     <div className = "app">       <Pealkiri />       <MessageList messages = {this.state.messages} />       <SendMessageForm sendMessage = {this.sendMessage} />   ) }</pre><p>Ja koos sellega oleme käitleja üle andnud, et SendMessageForm saaks vormi esitamisel sellele tugineda.</p><h3>10. samm: pealkirja komponendi loomine</h3><p>Lõpetuseks looge ka komponent pealkiri. See on lihtsalt lihtne funktsionaalne komponent, mis tähendab funktsiooni, mis tagastab JSX-i avalduse.</p><pre>funktsioon pealkiri () {   return <p class = "title"> Minu vinge vestlusrakendus </p> }</pre><p>Hea tava on kasutada funktsionaalseid komponente, kuna neil on rohkem piiranguid kui klassikomponentidel, mis muudab need veaohtlikumaks.</p><h3>Tulemus</h3><p>Ja selleks on teil oma vestlusrakendus, mida saate kasutada oma sõpradega vestlemiseks!</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568822296050.png" /><p>Andke endale seljaosa pats, kui olete selle lõpuni kodeerinud.</p><p>Kui soovite teada saada, kuidas sellele näitele veelgi tugineda, siis tutvuge siin minu tasuta kursusega, kuidas Reactiga vestlusrakendust luua.</p><p>Täname, et lugesite! Minu nimi on Per, olen Scrimba kaasasutaja ja armastan aidata inimestel uusi oskusi õppida. Jälgige mind Twitteris, kui soovite saada teavitust uute artiklite ja ressursside kohta.</p></div><div class="neighbor-articles"><h4 class="ui header">Vaata ka</h4><a href="/article/holiday-blues-here-s-how-to-add-cheer-4b1b70/" title="Puhkusebluus? Siit saate teada, kuidas lisada cheer">Puhkusebluus? Siit saate teada, kuidas lisada cheer</a><a href="/article/how-to-run-design-exercises-on-a-remote-team-43fa76/" title="Kuidas korraldada kaugharjutusmeeskonnas kujundusharjutusi">Kuidas korraldada kaugharjutusmeeskonnas kujundusharjutusi</a><a href="/article/how-to-start-backpacking-in-your-60s-cdddf8/" title="Kuidas alustada seljakoti pakkumist oma 60ndatel">Kuidas alustada seljakoti pakkumist oma 60ndatel</a><a href="/article/how-to-recognize-and-avoid-bad-clients-4da283/" title="Kuidas halbu kliente ära tunda ja vältida">Kuidas halbu kliente ära tunda ja vältida</a><a href="/article/how-to-ask-for-help-when-writing-4d0f3d/" title="Kuidas kirjutades abi küsida">Kuidas kirjutades abi küsida</a></div></main><div class="push"></div></div><footer style="height:50px">ceadesc.org<!-- --> © <!-- -->2019<!-- --> <a href="https://fi.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a" title="https://ceadesc.org">ceadesc.org</a></footer></div></div></div><script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"></script><script> window.cookieconsent.initialise({ "palette": { "popup": { "background": "#eaf7f7", "text": "#5c7291" }, "button": { "background": "#56cbdb", "text": "#ffffff" } }, "showLink": false }); </script><script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><script> (adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-3845662922897763", enable_page_level_ads: true }); </script></body></html>