Un curs gratuit React care vă va dezvolta abilitățile React JS prin construirea unei aplicații de chat

Chatul mănâncă lumea, iar React mănâncă dezvoltarea front-end. Deci, ce ar putea fi mai bun decât învățarea React prin construirea aplicației de chat? În cel mai recent curs de la Scrimba, veți face exact asta.

Se compune din 17 lecții interactive (plus intro și outro) și cinci provocări în care va trebui să editați singur codul.

Și cea mai bună parte: totul se face în browser. Nu trebuie să scrieți codul serverului. API Chatkit are grijă de greutatea ridicată din partea din spate, astfel încât să ne putem concentra pe construirea clientului de chat.

La sfârșitul cursului, veți rămâne cu propria aplicație de chat personalizată, care include mai multe camere, posibilitatea de a crea camere noi, derulare automată și multe altele. În plus, va fi foarte ușor de personalizat datorită CSS Grid și CSS Variables.

Presupun că știi JavaScript și că ai mai văzut un pic din React (de exemplu, citește-mi articol introductiv de cinci minute, și poate am verificat câteva tutoriale). În afară de asta, nu există condiții prealabile pentru curs.

Acum să aruncăm o privire la modul în care este așezat!

Lecția # 1: Introducerea cursului

Încep prin a vă oferi o introducere rapidă la curs. Vom trece peste ceea ce veți învăța și mă voi prezenta și eu. Vă voi oferi, de asemenea, un vârf despre modul în care veți putea personaliza propria aplicație de chat la sfârșitul cursului.

Lecția # 2: Arhitectura componentelor

Înainte de a începe să construiți o aplicație React, ar trebui să începeți prin a obține o imagine de ansamblu asupra arhitecturii componentelor și astfel să împărțiți interfața de utilizare în componente. Deci, în această prelegere, vă voi arăta cum să faceți exact asta.

Lecția # 3: arhitectură Codebase

În continuare, vom vedea cum se traduce arhitectura componentelor noastre în cod. Mă uit și la modul în care este configurat restul repo, deoarece nu vreau să fii confuz cu privire la diferitele fișiere din repo odată ce începem codarea.

Nu voi crea depozitul de la zero, deoarece există o mulțime de tutoriale care vă ajută să vă configurați mediul de dezvoltare și nu este cu adevărat ceea ce platforma Scrimba este cea mai bine adaptată.

Lecția # 4: componentă MessageList

Acum suntem în sfârșit gata să începem codarea, așa că, în această lecție, vom reda date fictive în MessageList componentă. Vă va prezenta JSX și veți învăța cum să creați dinamic elemente folosind, de exemplu, map() metoda matricei.

{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>  
   )  
})}

În această lecție vei primi și prima ta provocare!

Lecția # 5: Introducere în Chatkit

Acum că putem reda date pe pagină, vom începe integrarea cu API Chatkit, care se va ocupa de back-end-ul aplicației. În această lecție, vă ofer o privire de ansamblu rapidă asupra API-ului.

Lecția nr. 6: Conectarea la Chatkit

Următorul este pur și simplu codificarea fișierului Chatkit integrare, care este foarte simplă: codul de mai sus este tot ce aveți nevoie pentru a începe să preluați mesaje dintr-o cameră de chat. Veți fi expus pentru React’s componentDidMount() metoda ciclului de viață, care este locul în care ar trebui să conectați componenta cu API-uri terțe.

Lecția # 7: Stat și recuzită

Starea și accesoriile sunt cele două moduri în care gestionăm datele în React și trebuie să înțelegeți diferența dintre cele două. În această prelegere, va trebui să folosim ambele tipuri, deoarece ambele vom stoca mesaje de chat în starea noastră App componentă și, de asemenea, transmiteți-le ca recuzită către MessageList componentă.

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

Lecția # 8: Componenta mesaj

În această prelegere, vom construi componenta Mesaj. Are o singură sarcină: să redea numele de utilizator și textul pe care le transmite părinților săi. Vă voi oferi, de asemenea, o provocare să o schimbați dintr-o componentă bazată pe clase într-o componentă funcțională.

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

Lecția # 9: Componenta SendMessageForm

Nu puteți avea o aplicație de chat fără un formular prin care să trimiteți mesaje. Deci, în această prelegere, vom crea exact asta. Vă va învăța despre componentele controlate, care este un concept critic în React. Înseamnă că componenta însăși decide ce se redă în câmpul de intrare, în loc ca nodul DOM să păstreze acea stare internă.

Lecția # 10: Difuzarea mesajelor

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

Acum că avem SendMessageForm în loc, trebuie să trimitem mesajele către Chatkit, astfel încât acesta să le poată difuza. Acest lucru vă va forța să învățați un alt concept de bază al React: fluxul invers de date.

În React, datele curg în jos, de la părinte la copil. Cu toate acestea, uneori avem nevoie de componente copil pentru a ajunge la părinții lor și a le declanșa metodele, împreună cu unele date de la ei înșiși.

Lecția # 11: Componenta RoomList

Deoarece avem acum funcțiile de bază pentru chat (trimiterea și afișarea mesajelor), este timpul să treceți la RoomList componentă, care afișează toate camerele pe care le aveți disponibile în instanța dvs. Chatkit.

Vă va prezenta câteva concepte noi în Chatkit, plus vă va consolida cunoștințele despre cum să trimiteți date de la componentele părinte la componentele copil. Vom revizui, de asemenea, operatorul de propagare ES6, care este foarte la îndemână să știm când construim aplicații React.js.

Lecția # 12: Abonați-vă la camere

Apoi, va trebui să aflați cum să vă abonați la anumite camere. Vom conecta un ascultător de evenimente cu fiecare dintre camerele afișate în RoomList componentă. Aceasta va declanșa o metodă în App componentă, care îi spune Chatkit că utilizatorul dorește să se aboneze la camera respectivă.

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

Lecția # 13: Ordinea camerei și evidențierea camerei curente

Această prelegere vă va introduce în .sort() metoda matricei în JavaScript, deoarece va trebui să ne asigurăm că camerele noastre sunt sortate în ordinea corectă, indiferent de unde provin datele inițial.

const orderedRooms = […this.props.rooms].sort ((a, b) => a.id – b.id)

Vom adăuga și un active curs în camera în care discutăm în prezent pentru a-i semnaliza utilizatorului.

Lecția # 14: Adăugarea rulării automate

Este necesară derularea automată pentru a trece automat la cele mai recente mesaje așa cum apar în MessageList componentă. Este un mic truc îngrijitor care vă introduce în următoarele metode ale ciclului de viață al componentelor:

• componentWillUpdate()
• componentDidUpdate()

Va trebui, de asemenea, să folosimReactDOM.findDOMNode() metoda, așa că veți cunoaște și asta.

Lecția # 15: Componenta NewRoomForm

Această componentă vă permite să creați camere noi. Va fi o reîmprospătare a componentelor controlate din a noua lecție.

Cu aceasta, am terminat cu tot codul React pentru aplicație. Deci, pentru restul cursului, ne vom concentra pe proiectare folosind CSS.

Lecția # 16: Crearea propriei aplicații de chat

Înainte de a începe modificarea designului aplicației, vreau să clonez codul meu, astfel încât să obțineți propria copie a repo. Acest lucru vă pregătește pentru următoarele ecrane în care veți personaliza designul acestuia. Vă voi ghida prin fiecare pas până când veți obține propria copie și cheile API gratuite de la Chatkit.

Lecția # 17: Schimbarea aspectului cu CSS Grid

Folosim grila CSS pentru a controla aspectul aplicației, ceea ce vă oferă o flexibilitate foarte bună atunci când vine vorba de schimbarea acesteia, grid-template-areas. Vă voi învăța cum puteți muta elemente pe pagină prin schimbarea doar a câtorva linii de CSS.

Lecția # 18: Schimbarea temei cu variabile CSS

Înainte și după modificarea variabilelor.

Deoarece folosim variabile CSS pentru culorile noastre, puteți schimba cu ușurință tema aplicației. Aici, vă voi oferi provocarea de a găsi o paletă frumoasă online și apoi să o implementați în aplicația dvs.

Dacă combinați modificările de aspect din lecția anterioară cu o nouă paletă în aceasta, veți rămâne cu propria aplicație de chat personalizată! Iată unul pe care l-am făcut pentru mine, doar pentru distracție:

Lecția # 19: Outro și provocări finale

Dacă ajungeți până aici: felicitări! Ați investit cu adevărat în îmbunătățirea abilităților dvs. și sunt 100% sigur că va da roade. În acest ecran, vă ofer câteva provocări de închidere pe care le puteți face dacă sunteți cu adevărat pregătit pentru asta.

Dacă ai fi mulțumit cursul, am fi foarte recunoscători dacă l-ați recomanda unui prieten sau l-ați distribui pe rețelele de socializare, deoarece așa descoperă cursurile noastre gratuite Scrimba.

Mult succes cu cursul și codificare fericită 🙂