Reactul a devenit rapid un cadru popular pentru crearea de vizualizări atât pentru client cât și pentru server. A existat o barieră mai mare de intrare cu instrumente, împreună cu o anumită frustrare cu oboseala JavaScript din comunitate. Aplicația create-react-a fost creată pentru a răspunde acestor frustrări.
Mai întâi veți dori să vă asigurați că aveți Nod instalat pe sistemul dvs. Trebuie să aveți instalat cel puțin versiunea 4, dar vă recomandăm să aveți versiunea 6 pentru descărcări mai rapide și o utilizare mai bună a discului. Puteți utiliza nvm pentru a comuta cu ușurință între versiuni de nod.
După ce ați instalat Nodul, veți dori să deschideți instrumentul de linie de comandă preferat și să instalați aplicația create-react-global la nivel global, astfel încât să îl puteți executa oriunde pe sistem.
npm instalează -g create-react-app
Veți dori mai întâi să deschideți linia de comandă și să navigați sau să creați un director unde vă veți desfășura dezvoltarea. Apoi vom crea aplicația executând creați-reacție-aplicație tuts-plus-react-app
. Aceasta va executa instrumentul cli pentru a crea aplicația noastră tuts-plus-react.
Odată ce instrumentul CLI este complet, veți trece la un ecran sumar care vă va informa unde a fost creată aplicația și vă va arăta o listă de comenzi pe care le puteți utiliza.
În continuare, veți dori să navigați la noua noastră aplicație executând cd tuts-plus-react-app
.
Puteți executa aplicația local, executând npm start
. Odată ce aplicația începe, veți fi automat navigat la http: // localhost: 3000 / în browser și vă veți vedea noua aplicație React.
Aplicația folosește webpack pentru a rula un server dev dev. Există o funcție de vizionare, deci când faceți modificări în codul dvs. React și salvați, veți vedea că modificările apar automat în browser.
Dacă faceți erori cu codul dvs., veți vedea aceste erori sau avertismente afișate în browser.
ESLint este inclus pentru a vă asigura că codul respectă stiluri comune de cod. Acest lucru vă va ajuta să vă asigurați că codul dvs. este consecvent, ceea ce este util în special atunci când există mai mulți contribuitori la un proiect. Aș sugera să-l folosiți dacă sunteți nou la React, ca să învățați stiluri bune de codare React și JavaScript.
Dacă sunteți familiarizat cu testele de scriere pentru codul dvs., Jest este inclus pentru a rula teste. Jest este un cadru de testare creat și întreținut de Facebook, creatorii React. Pentru a executa testele, executați testarea npm
în instrumentul de linie de comandă. Aceasta va executa testele și apoi va porni un observator pentru a executa testele când se modifică codul de producție. Există un fișier de test existent pe care îl puteți adăuga src / App.test.js
.
După ce ați terminat toate editările, este timpul ca aplicația să fie implementată. Tot ce trebuie să faceți este să executați npm run build
în directorul de aplicații. Aceasta va folosi Babel pentru a transpira codul dvs. React în codul pe care browserul îl înțelege. De asemenea, vă va minifica codul pentru a vă asigura că aveți cea mai bună performanță în browser.
Dacă decideți să continuați să utilizați aplicația create-react, aș sugera petrecerea timpului de citire prin ghidul de utilizare. Are multe informații utile despre alte subiecte legate de vizualizare, cum ar fi adăugarea foilor de stil CSS, importul altor componente, importul de imagini și fonturi și altele. De asemenea, are informații despre practicile de dezvoltare web, cum ar fi utilizarea HTTPS, conectarea la un capăt de nod, crearea de aplicații web progresive și multe altele.
Există, de asemenea, o oarecare documentație extensivă privind testarea și implementarea aplicației.
Sper că acum puteți vedea cât de ușor este crearea unei aplicații React utilizând proiectul create-react-app. Sper că acest lucru va ajuta la reducerea bariera de intrare și vă va începe cu React. Știu că o să vă bucurați!