A învăța și înțelege React - tutorialul practic

Aici vor fi prezentate subiectele care vor fi abordate mai departe și se va discuta despre motivația din spatele acestui curs.

Există în prezent numeroase cadre UI pentru JavaScript – de ce ar trebui să fie React? Pe lângă popularitatea indiscutabilă a acestei biblioteci, există și câteva motive mai profunde care vorbesc în favoarea React.

În această lecție configurăm mediul de dezvoltare și creăm rapid aplicația noastră React folosind npm create vite.

După ce am creat o aplicație React "proaspătă" în ultima lecție, urmează să înțelegem structura acestei aplicații și să explicăm cum poate fi încorporat React într-un site web.

Un mic refresh pentru tema var vs. let/const.

Destructurarea permite extragerea selectivă a elementelor din obiecte și tablouri. Privind cu atenție, se pot observa multe aplicații care fac codul JS mai elegant și mai compact.

Funcțiile sunt esențiale în JS și au fost până acum declarate și definite folosind doar cuvântul cheie function. ES6 introduce o modalitate elegantă și scurtă de a scrie codul, făcându-l mai ușor de citit și oferind o soluție pentru o problemă persistentă legată de this.

În NodeJs, modulele au fost folosite de la început, însă la început s-a bazat exclusiv pe formatul modulului CommonJs cu require. Din ES6 există o definiție de modul în standard și astfel cuvintele cheie noi import/export. Între timp, acest format este acceptat de aproape toate bibliotecile JS (noi) și NodeJs poate să lucreze cu ele în ultimele versiuni.

Cu JSX, descrieți interfața de utilizator a unei componente și integrați expresii JS în ea. Fișierul proiectului pentru videoclip conține codul final pentru această secțiune tutorial.

Componentele proprii React pot fi scrise foarte ușor folosind funcții care returnează JSX.

Această lecție explică cum datele și expresiile JavaScript pot fi integrate în JSX.

Fără un state care poate fi modificat, este dificil să se implementeze o aplicație utilă. În React, de obicei, se folosește useState. Această lecție prezintă acest hook și explică cum se utilizează.

Props sunt folosite pentru transmiterea datelor către componentele copil. Aici se explică cum se întâmplă acest lucru și la ce trebuie să fim atenți.

Când proprietățile se schimbă dinamic, funcția de redare corespunzătoare a componentei va fi rechemată.

Aici este explicat cum va fi structurată aplicația To-do. Fișierul proiectului conține codul final pentru această secțiune de tutorial.

Când un component copil dorește să comunice ceva componentei părinte, acest lucru se realizează printr-un Prop de apel înapoi.

Scopurile ar trebui să fie finalizate la un moment dat. Aici vom discuta cum funcționează acest lucru în cod.

Apariția unei interfețe de utilizator este fără îndoială importantă. De aceea, explic aici cum funcționează acest lucru folosind biblioteca Emotion și cum se poate utiliza Proprietatea className cu aceasta. De asemenea, se va discuta și despre atributul style-, cu ajutorul căruia se poate stiliza fiecare element în detaliu separat.

Filtrarea matricei To-do poate împărți To-do-urile în două grupuri.

Desigur, trebuie să poți șterge și To-do-urile. Aici este explicat cum funcționează acest lucru prin filtrarea array-urilor.

Până acum, am învelit întotdeauna componentele în DIV-uri. Dar în anumite situații, acest lucru poate fi evitat.

Acum devine interesant: To-dos pot fi stocate persistent destul de ușor în memoria browser-ului și desigur încărcate din nou, astfel încât să supraviețuiască reîncărcării paginii.

Cu ajutorul useEffect se pot integra efecte secundare. Montarea unei componente poate fi tratată și cu această funcție.

Un scurt rezumat al aplicației noastre de To-do și ultimele îmbunătățiri.

Aplicația playerului video este creată cu create vite și se explică cum ar trebui să fie structurată aplicația. Fișierul de proiect atașat videoclipului conține codul final pentru playerul video.

Prin atributul ref se pot referi elemente DOM și se poate accesa cu useRef. Aici facem acest lucru cu elementul video.

Noi creăm player-ul video propriu-zis, care deja are butoane pentru Redare, Pauză și Stop.

Deoarece nu avem nevoie niciodată de redarea și pauza în același timp, le combinăm într-un singur buton.

Controalele proprii ale elementului video controlează, de asemenea, video-ul, ceea ce însă duce la faptul că starea noastră nu este actualizată corespunzător la butonul redare/pauză. Vom remedia aceasta folosind event handler-e la elementul video.

Putem schimba volumul folosind un regulator dedicat.

Sărirea la o poziție oarecare în video (Seek) poate fi realizată ușor prin setarea proprietății currentTime.

Lungimea videoclipului este stabilită doar după încărcarea metadatelor video, motiv pentru care trebuie să așteptăm evenimentul corect.

Playlist-ul este realizat printr-o listă care poate fi implementată cu elementul HTML select.

Folosim useEffect aici pentru a reacționa la schimbarea proprietății src și pentru a reseta starea player-ului video.

Lista de redare este transformată din intrări fixe într-un tablou.

Acum intervine editarea listei de videoclipuri: Adăugăm adăugarea intrărilor video.

Ceea ce adăugăm trebuie să putem șterge. Facem acest lucru similar cu aplicația de To-do prin filtrare.

Lista de redare nu ar trebui să servească doar ca o „listă de marcaje”, ci și pentru a reda automat videoclipurile unul după altul. Acest lucru va fi realizat în această lecție.

Pentru cei nerăbdători: butoane pentru următorul și precedentul videoclip.

Se realizează un tratament special pentru primul și ultimul videoclip: butoanele Următorul și Anterior ar trebui să fie dezactivate corespunzător.

Acum salvăm și încărcăm lista noastră de redare. Acest lucru se face analog cu aplicația To-do în spațiul de stocare local al browserului.

Clipurile video utilizate ca exemple în aplicația Video Player pot fi vizualizate aici în original (toate cu licență CC-Attribution, consultați site-urile web corespunzătoare):

Elephants dream: https://orange.blender.org/
Big Buck Bunny: https://peach.blender.org/
Sintel: https://durian.blender.org/

Prin exemplul dat de hook-ul useJsonFetch-este explicat cum se pot scrie funcții hook personalizate.

Schimbarea stării cu setter-ul din useState poate fi truculentă. Cu useImmer, însă, nu mai este o problemă.

Interfața utilizatorului va fi construită mai rapid și va reacționa mai rapid la interacțiunile utilizatorului atunci când apelurile inutile ale funcțiilor de randare nu au loc. Cu memo se poate preveni randarea componentelor atunci când proprietățile lor nu se schimbă.

Cu useCallback se poate preveni randarea inutilă a componentelor copil atunci când sunt utilizate Proprietăți de Callback.

Calculări complexe în cadrul funcțiilor de redare ar trebui să fie efectuate doar dacă este necesar. Cu ajutorul lui useMemo, rezultatele acestor calculații pot fi memorate luând în considerare dependențele.

Însumez aici rezultatele cursului și ofer indicii cu privire la ceea ce ar trebui să vizualizeze participanții după curs.