Kako izraditi aplikaciju za chat React.js za 10 minuta

Kako će izgledati aplikacija koju ćemo graditi

U ovom ću vam članku pokazati najlakši način kreiranja aplikacije za chat putem React.js. Učinit će se u potpunosti bez koda na strani poslužitelja, kao što ćemo dopustiti da Chatkit API radi s back-endom.

Pretpostavljam da znate osnovni JavaScript i da ste malo prije naišli na React.js. Osim toga, ne postoje preduvjeti.

Napomena: Ovdje sam također stvorio besplatni cjelovečernji tečaj o tome kako stvoriti React.js aplikaciju za chat ovdje:
Kliknite sliku da biste stigli na tečaj.

Ako slijedite ovaj vodič, na kraju ćete imati vlastitu aplikaciju za chat, a zatim je možete nadograditi ako želite.

Započnimo!

1. korak: razbijanje korisničkog sučelja na komponente

React je izgrađen oko komponenti, tako da prvo što želite učiniti prilikom stvaranja aplikacije je da se korisničko sučelje razbije na komponente.

Započnimo crtanjem pravokutnika oko cijele aplikacije. Ovo je vaša korijenska komponenta i zajednički predak za sve ostale komponente. Nazovimo to aplikacijom:

Nakon što definirate svoju korijensku komponentu, postavite sebi sljedeće pitanje:

Koju izravnu djecu ima ova komponenta?

U našem slučaju ima smisla dati tri dječje komponente, koje ćemo nazvati sljedećim:

  • Titula
  • MessagesList
  • SendMessageForm

Nacrtajmo pravokutnik za svaki od njih:

To nam daje lijep pregled različitih komponenti i arhitekture iza naše aplikacije.

Mogli smo se i dalje pitati koja djeca opet imaju te komponente. Dakle, mogli smo razbiti korisničko sučelje na još više komponenti, na primjer, pretvorbom svake poruke u vlastite komponente. Mi ćemo se ipak ovdje zaustaviti radi jednostavnosti.

Korak 2: Postavljanje baze koda

Sada ćemo morati postaviti naše spremište. Upotrijebit ćemo najjednostavniju moguću strukturu: datoteku index.html s vezama na JavaScript datoteku i tablicu stilova. Uvozimo i SDT Chatkit i Babel koji se koriste za transformiranje našeg JSX-a:

Evo Scrimba igrališta s konačnim kodom za udžbenik. Preporučujem vam da je otvorite na novoj kartici i igrate se s njom kad god se osjećate zbunjeno.

Kliknite sliku da biste eksperimentirali sa cijelom bazom kodova.

Alternativno, projekt Scrimba možete preuzeti u obliku .zip datoteke i pokrenuti jednostavan poslužitelj kako biste ga postavili i pokrenuli lokalno.

Korak 3: Izrada korijenske komponente

Ako je spremište spremljeno, možemo započeti pisati neki React kôd, što ćemo učiniti unutar datoteke index.js.

Započnimo s glavnom komponentom, App. Ovo će biti naša jedina „pametna“ komponenta, pošto će upravljati podacima i vezom s API-jem. Evo osnovnih postavki za to (prije nego što smo dodali bilo koju logiku):

klasa aplikacija proširuje React.Component {
  
  render () {
    povratak (
      
                                     )   }
}

Kao što vidite, jednostavno čini troje djece: komponente , <MessageList> i <SendMessageForm>.</p><p>Ipak ćemo to malo složiti, jer će poruke za chat trebati biti pohranjene unutar stanja ove komponente aplikacije. To će nam omogućiti pristup porukama kroz this.state.messages i na taj način ih proslijediti ostalim komponentama.</p><p>Počet ćemo s lažnim podacima kako bismo razumjeli protok podataka aplikacije. Zatim ćemo kasnije to zamijeniti stvarnim podacima iz Chatkit API-ja.</p><p>Kreirajmo varijablu DUMMY_DATA:</p><pre>const DUMMY_DATA = [   {     senderId: "perborgen",     tekst: "tko će pobijediti?"   }   {     senderId: "janedoe",     tekst: "tko će pobijediti?"   } ]</pre><p>Zatim ćemo te podatke dodati u stanje aplikacije i proslijediti ih komponenti MessageList-a kao pomoćnu pomoć.</p><pre>klasa aplikacija proširuje React.Component {      constructor () {     super()     this.state = {        poruke: DUMMY_DATA     }   }      render () {     povratak (       <div className = "aplikacija">         <MessageList poruke = {this.state.messages} />         <SendMessageForm />      </ Div>     )   }</pre><pre>}</pre><p>Evo, inicirali smo stanje u konstruktoru i također prenosimo this.state.messages na MessageList.</p><blockquote>Imajte na umu da u konstruktoru zovemo super (). To morate učiniti ako želite stvoriti izvanrednu komponentu.</blockquote><h3>Korak 4: Isporuka lažnih poruka</h3><p>Pogledajmo kako ove poruke možemo iznijeti u komponenti MessageList. Evo kako to izgleda:</p><pre>MessageList klase proširuje React.Component {   render () {     povratak (       <ul className = "lista poruka">         {this.props.messages.map (message => {           povratak (            <li key = {message.id}>              <Div>                {Message.senderId}              </ Div>              <Div>                {Message.text}              </ Div>            </ Li>          )        })}      </ Ul>     )   } }</pre><p>Ovo je takozvana glupa komponenta. Potrebna je jedna pomoćna poruka, koja sadrži niz objekata. A zatim jednostavno obnavljamo svojstva teksta i pošiljatelja iz objekata.</p><p>Kada se u ovu komponentu ulaze naši podaci, bit će prikazano sljedeće:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568822281416.png" /><p>Dakle, sada imamo osnovnu strukturu za našu aplikaciju, a također smo u mogućnosti prikazivati ​​poruke. Odličan posao!</p><p>Sada zamijenimo naše lažne podatke stvarnim porukama iz chat sobe!</p><h3>Korak 5: Dohvaćanje API-ključeva iz Chatkita</h3><p>Da bismo dohvatili poruke, morat ćemo se povezati s Chatkit API-jem. Da bismo to učinili, naravno da trebamo nabaviti API ključeve.</p><p>U ovom trenutku, želim vas potaknuti da slijedite moje korake kako biste mogli pokrenuti i pokrenuti vlastitu aplikaciju za chat. Možete koristiti moje Scrimba igralište kako biste testirali vlastite API ključeve.</p><p>Započnite s stvaranjem besplatnog računa ovdje. Nakon što učinite to, vidjet ćete svoju nadzornu ploču. Ovdje stvarate nove instance Chatkita. Stvorite ga i dajte mu ime koje god želite:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568822282720.png" /><p>Tada ćete biti navigirani do novostvorene instance. Ovdje ćete trebati kopirati četiri vrijednosti:</p><ul><li>Lokacija instancije</li><li>Testirajte tokena</li><li>ID sobe</li><li>Korisničko ime</li></ul><p>Počet ćemo s Lokacijom instanci:</p><img alt="Možete kopirati pomoću ikone s desne strane pronalazača instance." src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568822284773.png" /><p>A ako se malo pomaknete prema dolje, naći ćete davatelja testnih tokena:</p><img alt="Napomena: morat ćete potvrditi potvrdni okvir ENABLED da biste pristupili tokenu." src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568822287062.png" /><p>Sljedeći je korak kreiranje korisnika i sobe, što se vrši na istoj stranici. Imajte na umu da ćete prvo morati stvoriti korisnika, a zatim ćete moći stvoriti sobu koja vam opet omogućava pristup identifikatoru sobe.</p><img alt="Odaberite korisničko ime, kreirajte sobu, a zatim kopirajte korisničko ime i ID sobe." src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568822290410.png" /><p>Dakle, sada ste pronašli svoja četiri identifikatora. Dobro napravljeno!</p><p>Ipak, prije nego što se vratimo na kodnu bazu, želim ručno poslati i poruku sa nadzorne ploče Chatkita, jer će nam ovo pomoći u sljedećem poglavlju.</p><p>Evo kako to učiniti:</p><img alt="Slanje poruke s korisničkog sučelja Chatkita" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568822292928.png" /><p>To je tako da u stvari imamo poruku koju ćemo dati u sljedećem koraku.</p><h3>Korak 6: Izrada stvarnih poruka u chatu</h3><p>Vratimo se našoj datoteci index.js i pohranimo ove četiri identifikatora kao varijable na vrh naše datoteke.</p><p>Evo mojih, ali bih vas ohrabrio da stvorite svoje:</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 korisničko ime = "perborgen"</pre><pre>const sobaId = 9796712</pre><p>I uz to mjesto, konačno smo spremni za povezivanje s Chatkitom. To će se dogoditi u App komponenti, točnije u komponentiDidMount. To je metoda koju biste trebali upotrijebiti za povezivanje React.js komponenata s API-jevima.</p><p>Prvo ćemo stvoriti chatManager:</p><pre>komponentaDidMount () {   const chatManager = novi Chatkit.ChatManager ({     instanceLocator: instanceLocator,     userId: korisničko ime,     tokenProvider: novi Chatkit.TokenProvider ({       url: testToken     })  })</pre><p>… I tada ćemo se dochatManager.connect () povezati s API-jem:</p><pre>  chatManager.connect (). zatim (currentUser => {       currentUser.subscribeToRoom ({       sobaId: sobaId,       kuke: {         onNewMessage: poruka => {           this.setState ({             poruke: [... this.state.messages, message]           })         }       }     })   }) }</pre><p>To nam omogućava pristup trenutnom korisničkom objektu, koji je sučelje za interakciju s API-jem.</p><blockquote>Napomena: Kako ćemo kasnije trebati koristiticurrentUser, dobro ga spremite u instancu radeći ovo.currentUser = currentUser.</blockquote><p>Zatim zovemo currentUser.subscribeToRoom () i prosljeđujemo nam našu sobu ID i onNewMessage kuku.</p><p>Kuka onNewMessage aktivira se svaki put kada se nova poruka emitira u sobu za chat. Tako da kad god se to dogodi, novu poruku jednostavno ćemo dodati na kraju ove.state.messages.</p><p>Zbog toga se podaci iz API-ja dohvaćaju, a zatim prikazuju na stranici.</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568822294654.png" /><p>To je sjajno, jer sada imamo kostur za vezu naša klijent-poslužitelj.</p><p>Juhu!</p><h3>Korak 7: Rukovanje korisničkim unosom</h3><p>Sljedeće što ćemo trebati stvoriti je komponenta SendMessageForm. Ovo će biti takozvana kontrolirana komponenta, što znači da komponenta kontrolira ono što se prikazuje u polju za unos putem svog stanja.</p><p>Pogledajte metodu render () i obratite posebnu pozornost na linije koje sam istaknuo:</p><pre>klasa SendMessageForm proširuje React.Component {   render () {     povratak (       <oblik         className = "send-poruke-oblik">         <input           onChange = {this.handleChange}           value = {this.state.message}           placeholder = "Upišite svoju poruku i pritisnite ENTER"           type = "tekst" />       </ Oblik>     )   } }</pre><p>Radimo dvije stvari:</p><ol><li>Slušanje korisničkih unosa s slušateljem događaja onChange kako bismo mogli pokrenuti metodu handleChange</li><li>Postavljanje vrijednosti polja za unos izričito pomoću this.state.message</li></ol><p>Veza između ta dva koraka nalazi se unutar metode handleChange. Jednostavno ažurira stanje na ono što korisnik upiše u polje za unos:</p><pre>handleChange (e) {   this.setState ({     poruka: e.target.value   }) }</pre><p>To pokreće ponovno prikaz, a pošto je polje za unos izričito postavljeno iz stanja koristeći vrijednost = {this.state.message}, polje za unos će se ažurirati.</p><p>Dakle, iako se aplikacija osjeća trenutno kada korisnik nešto upiše u polje za unos, podaci zapravo prelaze stanje prije nego što React ažurira korisničko sučelje.</p><p>Da bismo zaključili ovu značajku, moramo komponenti dati konstruktor. U njemu ćemo oboje inicijalizirati stanje i svezati to metodom handleChange:</p><pre>constructor () {     super()     this.state = {        poruka: ''     }     this.handleChange = this.handleChange.bind (ovo) }</pre><p>Moramo vezati metodu handleChange kako bismo imali pristup ovoj ključnoj riječi unutar nje. Tako djeluje JavaScript: ova je ključna riječ po zadanom nedefinirana u tijelu funkcije.</p><h3>Korak 8: Slanje poruka</h3><p>Naša komponenta SendMessageForm je gotovo gotova, ali trebamo voditi računa i o podnošenju obrasca. Trebamo preuzeti poruke i poslati ih!</p><p>Da bismo to učinili, spojit ćemo kvakuPodnesite ravnomjerni rukovatelj s poslušačem događaja onSubmit u <form></p><pre>render () {     povratak (       <oblik         onsubmit = {this.handleSubmit}         className = "send-poruke-oblik">         <input           onChange = {this.handleChange}           value = {this.state.message}           placeholder = "Upišite svoju poruku i pritisnite ENTER"           type = "tekst" />       </ Oblik>     )   }</pre><p>Kako imamo vrijednost polja unosa pohranjenog u ovoj.state.message, zapravo je prilično lako proslijediti ispravne podatke zajedno sa slanjem. Jednostavno ćemo učiniti:</p><pre>handleSubmit (e) {   e.preventDefault ()   this.props.sendMessage (this.state.message)   this.setState ({     poruka: ''   }) }</pre><p>Ovdje zovemo sendMessage prop i prosljeđujemo ovaj.state.message kao parametar. Možda vas to malo zbuni jer još nismo stvorili metodu slanja poruke. Međutim, to ćemo učiniti u sljedećem odjeljku, pošto ta metoda živi unutar komponente komponente App. Dakle, ne brinite!</p><p>Drugo, brišemo polje za unos postavljanjem this.state.message na prazan niz.</p><p>Evo cijele komponente SendMessageForm. Napominjemo da smo ovo također povezali s metodom handleSubmit:</p><pre>klasa SendMessageForm proširuje React.Component {   constructor () {     super()     this.state = {       poruka: ''     }     this.handleChange = this.handleChange.bind (ovo)     this.handleSubmit = ovo.handleSubmit.bind (ovo)   }</pre><pre>  handleChange (e) {     this.setState ({       poruka: e.target.value     })   }</pre><pre>  handleSubmit (e) {     e.preventDefault ()     this.props.sendMessage (this.state.message)     this.setState ({       poruka: ''     })   }</pre><pre>  render () {     povratak (       <oblik         onsubmit = {this.handleSubmit}         className = "send-poruke-oblik">         <input           onChange = {this.handleChange}           value = {this.state.message}           placeholder = "Upišite svoju poruku i pritisnite ENTER"           type = "tekst" />       </ Oblik>     )   } }</pre><h3>9. korak: Slanje poruka na Chatkit</h3><p>Sada smo spremni pa pošaljite poruke u Chatkit. To je završeno u komponenti aplikacije, gdje ćemo izraditi metodu koja se zove this.sendMessage:</p><pre>sendMessage (tekst) {   this.currentUser.sendMessage ({     tekst,     sobaId: sobaId   }) }</pre><p>Potreban je jedan parametar (tekst) i jednostavno ga zove this.currentUser.sendMessage ().</p><p>Posljednji korak je proslijediti ovo na komponentu <SendMessageForm> kao pomoćnu pomoć:</p><pre>/ * Komponenta aplikacije * /    render () {   povratak (     <div className = "aplikacija">       <Naslov />       <MessageList poruke = {this.state.messages} />       <SendMessageForm sendMessage = {this.sendMessage} />   ) }</pre><p>I uz to smo proslijedili rukovatelj kako bi SendMessageForm mogao pozvati na njega kad se obrazac preda.</p><h3>Korak 10: Stvaranje naslova komponente</h3><p>Za kraj, napravimo i komponentu naslova. To je jednostavno jednostavna funkcionalna komponenta, znači funkcija koja vraća JSX izraz.</p><pre>funkcija Naslov () {   return <p class = "title"> Moja fantastična aplikacija za chat </p> }</pre><p>Dobra je praksa koristiti funkcionalne komponente, jer imaju više ograničenja od komponenata klase, što ih čini manje sklonima pogreškama.</p><h3>Rezultat</h3><p>A uz to imate i vlastiti chat program pomoću kojeg možete razgovarati sa svojim prijateljima!</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568822296050.png" /><p>Poklonite se leđima ako ste ih šifrirali do samog kraja.</p><p>Ako želite naučiti kako dalje graditi na ovom primjeru, ovdje pogledajte moj besplatni tečaj o stvaranju aplikacije za chat s Reactom.</p><p>Hvala na čitanju! Zovem se Per, suosnivač sam Scrimba i volim pomagati ljudima da nauče nove vještine. Slijedite me na Twitteru ako želite biti obaviješteni o novim člancima i resursima.</p></div><div class="neighbor-articles"><h4 class="ui header">Vidi također</h4><a href="/question/how-to-split-a-tuple-in-python/" title="kako podijeliti korpicu u pythonu">kako podijeliti korpicu u pythonu</a><a href="/question/how-to-save-in-legend-of-zelda-nes/" title="kako spasiti u legendi o zeldi nes">kako spasiti u legendi o zeldi nes</a><a href="/question/how-to-make-a-pole-lathe/" title="kako napraviti tokarski stroj">kako napraviti tokarski stroj</a><a href="/question/how-to-pronounce-inej/" title="kako se izgovara inej">kako se izgovara inej</a><a href="/question/how-to-get-screws-in-fallout-76/" title="kako doći do vijaka u otpadu 76">kako doći do vijaka u otpadu 76</a><a href="/question/how-to-incorporate-fiverr-into-weebly/" title="kako uklopiti fiverr u weebly">kako uklopiti fiverr u weebly</a><a href="/question/how-to-find-eigenvalues-of-a-symmetric-matrix/" title="kako pronaći vlastite vrijednosti simetrične matrice">kako pronaći vlastite vrijednosti simetrične matrice</a><a href="/question/how-to-clean-leather-golf-gloves/" title="kako očistiti kožne rukavice za golf">kako očistiti kožne rukavice za golf</a></div></div><div class="article-sidebar"><div class="neighbor-articles"><h4 class="ui header">Vidi također</h4><a href="/article/how-to-get-yourself-out-of-rock-bottom-48bea8/" title="Kako se izvući iz dna kamena">Kako se izvući iz dna kamena</a><a href="/article/how-to-build-your-online-brand-as-a-software-developer-758ffb/" title="Kako izgraditi internetsku marku kao programer softvera">Kako izgraditi internetsku marku kao programer softvera</a><a href="/article/bouquets-or-bitterness-how-to-bloom-where-you-are-planted-bbec32/" title="Buketi ili gorkost? Kako cvjetati tamo gdje ste planirani">Buketi ili gorkost? Kako cvjetati tamo gdje ste planirani</a><a href="/article/how-to-talk-to-someone-with-abandonment-issues-62ab2a/" title="Kako razgovarati s nekim tko ima pitanja napuštanja">Kako razgovarati s nekim tko ima pitanja napuštanja</a><a href="/article/3d-artists-how-to-make-money-working-on-decentraland-projects-5c87e7/" title="3D umjetnici: kako zaraditi radeći na projektima Decentraland">3D umjetnici: kako zaraditi radeći na projektima Decentraland</a><a href="/article/how-to-give-him-the-best-blowjob-of-his-life-6deb3c/" title="Kako mu pružiti najbolji udarac u svom životu">Kako mu pružiti najbolji udarac u svom životu</a><a href="/article/how-to-make-more-money-as-an-entrepreneur-3a8e74/" title="Kako zaraditi više novca kao poduzetnik">Kako zaraditi više novca kao poduzetnik</a><a href="/article/how-to-use-client-raindrop-without-using-the-hydrogen-api-42be5a/" title="Kako se koristi Client Raindrop BEZ korištenja vodikovog API-ja">Kako se koristi Client Raindrop BEZ korištenja vodikovog API-ja</a></div></div></div></main><div class="push"></div></div><footer><div class="flags-footer"><a href="https://uz.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="uz flag"></i></a><a href="https://bg.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="bg flag"></i></a><a href="https://et.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="ee flag"></i></a><a href="https://lt.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="lt flag"></i></a><a href="https://lv.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="lv flag"></i></a><a href="https://sr.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="rs flag"></i></a><a href="https://sl.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="si flag"></i></a><a href="https://sk.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="sk flag"></i></a><a href="https://uk.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="ua flag"></i></a><a href="https://sq.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="al flag"></i></a><a href="https://hy.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="am flag"></i></a><a href="https://is.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="is flag"></i></a><a href="https://az.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="az flag"></i></a><a href="https://kk.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="kz flag"></i></a><a href="https://fa.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="ir flag"></i></a><a href="https://tg.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="tj flag"></i></a><a href="https://ga.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="ie flag"></i></a><a href="https://be.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="by flag"></i></a><a href="https://ka.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="ge flag"></i></a><a href="https://ky.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="kg flag"></i></a><a href="https://lb.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="lu flag"></i></a><a href="https://lo.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="la flag"></i></a><a href="https://ar.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="sa flag"></i></a><a href="https://bn.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="in flag"></i></a><a href="https://ca.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="es flag"></i></a><a href="https://zh.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="cn flag"></i></a><a href="https://cs.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="cz flag"></i></a><a href="https://da.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="dk flag"></i></a><a href="https://nl.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="nl flag"></i></a><a href="https://tl.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="ph flag"></i></a><a href="https://fi.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="fi flag"></i></a><a href="https://fr.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="fr flag"></i></a><a href="https://de.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="de flag"></i></a><a href="https://el.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="gr flag"></i></a><a href="https://iw.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="il flag"></i></a><a href="https://hi.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="in flag"></i></a><a href="https://hu.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="hu flag"></i></a><a href="https://id.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="id flag"></i></a><a href="https://it.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="it flag"></i></a><a href="https://ja.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="jp flag"></i></a><a href="https://ko.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="kr flag"></i></a><a href="https://ms.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="my flag"></i></a><a href="https://mr.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="io flag"></i></a><a href="https://no.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="no flag"></i></a><a href="https://pl.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="pl flag"></i></a><a href="https://pt.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="pt flag"></i></a><a href="https://ro.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="ro flag"></i></a><a href="https://ru.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="ru flag"></i></a><a href="https://internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="es flag"></i></a><a href="https://sv.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="ch flag"></i></a><a href="https://ta.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="sg flag"></i></a><a href="https://te.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="in flag"></i></a><a href="https://th.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="th flag"></i></a><a href="https://tr.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="tr flag"></i></a><a href="https://ur.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="pk flag"></i></a><a href="https://vi.internautasporlapaz.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a/"><i class="vn flag"></i></a></div>internautasporlapaz.org<!-- --> © <!-- -->2021<!-- --> </footer></div></div></div></body></html>