În acest articol, vom examina mai multe subiecte cu cunoștințele minime necesare pentru a începe să creați aplicații:
Înainte de a începe
Pentru a înțelege în mod clar ce este React, vreau să propun o astfel de opțiune:
Acesta include conceptul de împărțire a interfeței utilizator în componente care sunt părți autonome care pur și simplu suportă, se extind și se aplică în mod repetat.
React putem, dar folosit pentru a construi componente în browser-ul și pe partea de server, care este HTML final va fi format nu pe client și pe server, permițându-vă să construiască așa-numitul izomorf + aplicație vă permite să se evite problemele cu SEO aplicații inerente de o pagină. Dar asta nu e tot, cu ajutorul React poate crea interfețe mobile native (React nativ).
Înainte ca Ajax să apară pentru orice acțiune a utilizatorului, întreaga pagină Web a fost reîncărcată pentru a afișa noile date. Care nu a fost o soluție foarte eficientă atunci când doar o parte din date trebuie să fie actualizată. Odată cu apariția lui Ajax, a fost posibilă actualizarea datelor în pagină în părți. A apărut așa-numitele aplicații de o singură pagină, când a fost încărcată o singură pagină și toate cererile ulterioare au fost procesate fără o reîncărcare completă a paginii.
Pe măsură ce interfețele devin mai complexe, complexitatea gestionării stării acestor aplicații crește. Multe biblioteci utilizează legăturile de date bidirecționale la interfață și manipulează direct arborele DOM. Dar această abordare pierde din punct de vedere al vitezei.
Redarea reactivă este mai ușor de utilizat decât legarea tradițională a datelor. Ne permite să scriem într-un stil declarativ, cum ar trebui să arate și să se comporte componentele. Orice arbore DOM se schimbă odată cu schimbarea datelor, React are o copie ușoară a arborelui DOM care conține starea curentă. Când modificați datele într-un arbore DOM cu React virtual, treceți printr-o comparație cu DOM real, iar schimbările apar numai acolo unde este într-adevăr nevoie. Ceea ce face React foarte rapid și eficient.
În Reacție, totul constă în componente care sunt blocuri de autosuficiență. Toate aceste frumusețe urmăresc principiul "împărți și cuceresc", în care nici o parte nu ar trebui să fie deosebit de dificilă. Dintre componentele mai mici, puteți crea cu ușurință componente complexe și mai multe funcționale.
Abstractarea flexibilă a modelului de document
React are propria sa viziune asupra interfeței cu utilizatorul, care abstractează modelul de document de bază. Cel mai notabil avantaj al acestei abordări este acela că vă permite să utilizați aceleași principii pentru vizualizarea HTML și, de exemplu, interfețele utilizatorilor nativi nativi IOS și Android. Și oferă următoarele avantaje:
Evenimentele se comportă în conformitate cu standardele din toate browserele și dispozitivele;
Componentele HTML React rezultate pot fi construite pe partea de server, ceea ce evită problemele cu SEO și construirea de aplicații izomorfice;
Hello World on React
Hello World React
React - flux de lucru
Fluxul de lucru arată astfel:
După scriere, JSX ar trebui să se transforme automat în JS
Scrieți codul ca module
Gestionați dependențele
Creați fișiere JS și fișiere de hărți pentru depanare
Structura principală a proiectului React conține:
Un director sursă care conține toate modulele JS
package.json - este un fișier manifest NPM standard
Module pentru construirea unui proiect care va ajuta la transformarea JSX în JS. Utilizarea modulelor vă permite să organizați codul împărțind-l în mai multe fișiere, fiecare dintre ele declarând propriile dependențe. Există multe astfel de module. Rect comunitatea a adoptat Webpack ca instrument preferat pentru rezolvarea acestor sarcini.
Nu uitați să executați comenzi
Crearea primei componente
Anexă Consiliul de la Kanban
În această lecție vom crea un instrument de management de proiect în stil Kanban. Aplicația este o consiliu cu diviziune în zone în funcție de stadiul actual al sarcinilor. Când starea sarcinii se schimbă, se trece la o nouă zonă cu starea corespunzătoare.
Proiectul nostru final va arata ca imaginea de mai jos
Ierarhia componentelor în aplicația noastră viitoare
Principiile de separare în componente:
- Amintiți-vă că componentele ar trebui să fie mici și să aibă o zonă de responsabilitate. Cu alte cuvinte, componenta ar trebui în mod ideal să facă doar un singur lucru. Dacă componenta crește, ea trebuie defalcată în componente mai mici.
- Analizați aspectul proiectului, acest lucru vă va oferi indicii cum îl puteți împărți în componente.
- Acordați atenție modelului de date. Încercați să spargeți componentele, astfel încât o componentă să fie o parte a modelului dvs. de date.
Dacă utilizați aceste recomandări, cel mai probabil veți ajunge la componența componentelor prezentate în figura de mai jos.
Necesitățile sunt esențiale în compoziția componentelor. Acestea sunt mecanismul utilizat în React pentru a transfera date de la părinte la copil. Valorile rechizitelor nu pot fi schimbate din interiorul componentei copil la care au fost transferate.
Crearea componentelor
După definirea ierarhiei componentelor, este timpul să le creăm. Există două abordări evidente pentru construirea componentelor: de sus în jos sau de jos în sus. Pentru a obține o idee despre toate elemente de recuzită utilizate în componentele copilului, este logic să începeți construirea componentelor dvs. de sus în jos.
În plus, pentru a facilita susținerea proiectului nostru, vom crea pentru fiecare componentă propriul fișier JS.
În acest stadiu, fișierul A pp.js va fi foarte simplu. Acesta va conține numai date transferate în ierarhia componentelor. Datele propriu-zise vor fi stocate într-o variabilă locală, dar în viitor o vom rezolva și datele vor veni prin serverul API.
Trimiteți-le prietenilor: