React: Ghidul complet pentru începători pentru utilizarea ReactJS

Ați auzit despre ReactJS, dar nu știți de unde să începeți? Ați început să vă jucați cu ReactJS, dar nu sunteți sigur cum să îl utilizați în viața de zi cu zi? Acest articol va fi ghidul tău pentru a învăța și a stăpâni biblioteca React JavaScript, cea mai populară bibliotecă folosită de dezvoltatori astăzi. Vă voi arăta exact cum să începeți cu ReactJS și cum să îl integrați în fluxul dvs. de lucru, astfel încât să puteți crea interfețe de utilizator mai dinamice fără a fi nevoie să faceți un ocol inutil printr-un alt cadru sau bibliotecă. Să începem!

Ce este ReactJS?

React este o bibliotecă de dezvoltare front-end care vă încurajează să construiți componente reutilizabile. Dacă sunteți în căutarea unei modalități eficiente de a crea interfețe cu utilizatorul, React ar putea fi exact ceea ce aveți nevoie. Când creați interfețe de utilizator cu Vanilla JavaScript sau jQuery, codul dvs. poate deveni foarte complicat și greu de utilizat foarte repede. Folosind React și metoda sa preferată de dezvoltare bazată pe componente, codul dvs. va fi mult mai ușor de reutilizat și întreținut.

De fapt, odată ce ați construit câteva componente, este relativ ușor pentru alți dezvoltatori din echipa dvs. să intre și să contribuie cu cod fără să aibă experiență (sau cunoștințe despre) React!

Recomandat pentru tine: 5 sfaturi demne pentru a optimiza performanța aplicației React Native.

De ce să folosiți ReactJS?

În primul rând, ai de ales în fața ta când vine vorba de cadre JavaScript. Deci, de ce ai alege React? Ei bine, pentru început, atunci când vine vorba de a ajuta dezvoltatorii să creeze aplicații mari care sunt ușor de înțeles și de implicat de către utilizatorii finali.

Pentru dezvoltatorii care au lucrat doar cu jQuery sau Vanilla JavaScript până acum, să învețe cum să lucreze cu noile tehnologii poate fi frustrant. În unele cazuri, dezvoltatorii pot avea nevoie de sute de linii de cod doar pentru a crea o casetă modală simplă sau o bară de navigare. Deoarece React folosește DOM virtual în loc să scrie și să rescrie elemente DOM reale de fiecare dată când există o schimbare de stare (așa cum se face adesea în Angular), utilizarea React poate economisi timp prețios, permițând mai puține linii de cod și, de asemenea, face aplicațiile mai rapide decât erau. inainte de.

Instalarea acestuia într-un browser

Înainte de a putea utiliza React într-un browser, trebuie să îl instalați. Din fericire, este un proces simplu datorită npm și Browserify. Utilizați Node sau alt mediu de pe partea serverului? De asemenea, puteți utiliza npm și Browserify pentru asta. După ce ați instalat totul, creați un fișier HTML cu editorul de text preferat. În caz contrar, utilizați un generator standard, cum ar fi Create-React-App, care creează un proiect de pornire de bază pentru dvs., care are deja toate aceste lucruri configurate.

Conversia App.js pentru a utiliza ReactJS

Tot codul nostru se află în prezent într-un singur fișier numit App.js. Dar asta face dificil de testat. Deci, să-l împărțim în mai multe fișiere. Vom începe prin a converti o componentă de la scrisă în ES6 la scrisă în JSX. Este mai ușor dacă păstrăm toate componentele noastre React într-un singur director (ceea ce ar trebui să faceți). Deci, să creăm un director src/components gol și să mutăm App.js în el: mv app/App.js src/components/app-react.js. Apoi redenumiți-l în app-react.js.

Pentru a utiliza React în loc de doar ES6, schimbați utilizarea strictă; în partea de sus a fișierului dvs. pentru a folosi babel; De asemenea, va trebui să instalați Babel prin npm install –save babel-CLI babel-preset-es2015 babel-preset-react, ceea ce va face Babel să compilați noua sintaxă JSX.

Începeți să construiți cu aplicația noastră exemplu

Există o mulțime de modalități de a începe cu React, dar una dintre preferatele noastre este construirea unei aplicații simple To-Do List. Pentru a vă face să vă mișcați rapid și pentru a evita multe greșeli comune, am creat un exemplu de aplicație în care tot ce trebuie să faceți este să schimbați codul back-end și componentele front-end. Vine echipat cu tot ce aveți nevoie, inclusiv imagini, pentru a vă asigura că arată la fel de bine pe cât funcționează.

Nu ai chef de codificare? Nici o problemă! De fapt, puteți copia toate componentele noastre urmând acești pași simpli. Odată ce le-ați copiat în proiectul dvs., modificați-le pur și simplu pentru a se potrivi cu scopurile dvs.! Alegerea este a ta! Consultați toate cele trei opțiuni de început aici.

Exemplu de bază de utilizare a componentelor

Dacă te uiți la orice aplicație web, unul dintre primele lucruri pe care le vei observa este că fiecare element este separat. Pe o pagină tipică, există diferite anteturi, subsoluri, logo-uri și butoane. Cu toate acestea, atunci când lucrați cu React.js, în loc să utilizați mai multe elemente HTML pentru fiecare componentă a paginii dvs., puteți utiliza un singur element HTML pentru a le reprezenta pe toate. Acest lucru poate suna contraintuitiv; la urma urmei, nu asta facem de ani de zile?

Vă poate plăcea: Facebook JavaScript Engine (Hermes) stimulează React Native pe Android.

Introducere în sintaxa JSX

JSX nu este un limbaj de programare precum JavaScript sau TypeScript, ci o sintaxă care a fost concepută ca o extensie a JavaScript. Din acest motiv, este important ca dezvoltatorii noi să înțeleagă cum funcționează și unde îl puteți folosi. Codul JSX este scris într-un mod care arată foarte asemănător cu HTML, făcând codul JSX un prim pas excelent pentru dezvoltatorii noi care învață ambele limbi simultan. Pentru mai multe informații despre ce face JSX unic și cum îl puteți stăpâni cu ușurință, citiți tutorialul nostru complet ReactJS!

Pentru a începe să construiți primul proiect React, creați un director nou tastând mkdir react_tutorial în terminalul dvs. Odată ce rulează, navigați în directorul nou creat tastând cd react_tutorial. Apoi deschideți terminalul și porniți Node.js tastând node -v.

Ar trebui să vedeți v10.x listat lângă Node dacă ați instalat Node cu succes. Dacă nu, încercați să utilizați nvm install 10 dacă utilizați macOS sau Linux. Dacă nici asta nu funcționează, atunci Google ar trebui să poată ajuta să-și dea seama ce nu merge acolo! Odată ce Node este instalat corect cu versiunea 10+, suntem gata să mergem mai departe cu crearea proiectului nostru de la zero!

Static vs dinamic vs PureComponent

Când construiți aplicații web cu JavaScript modern, aveți trei opțiuni principale pentru crearea componentelor UI. Acestea includ HTML static (react-markup), cereri AJAX dinamice (react-data) și prin reutilizarea elementelor DOM existente (react-pure). Fiecare metodă are propriile sale merite și poate fi aplicată diferit în funcție de cazul dvs. de utilizare specific.

De exemplu, dacă știți că anumite elemente vor fi întotdeauna disponibile, le puteți plasa în etichete HTML statice. Cu toate acestea, dacă trebuie să preluați conținut din baze de date care ar putea să nu existe încă, utilizarea react-data este o alegere mai bună. Când decideți ce metodă de creare a componentelor se potrivește cel mai bine proiectului dvs., este important să vă gândiți cât de stabilă și permanentă va fi fiecare parte a aplicației dvs.

Metode ciclului de viață în componentele ReactJS

Există o serie de metode de ciclu de viață pe care le puteți utiliza în cadrul componentelor dvs. pentru a controla diferite părți ale ciclului de viață al acestora. Metoda componentWillMount() este apelată imediat înainte ca o componentă să fie randată pentru prima dată. În cadrul acestuia, puteți adăuga orice inițializare de care aveți nevoie pentru componenta dvs., cum ar fi salvarea informațiilor folosind localStorage. Metoda componentDidMount() este de asemenea apelată imediat după ce o componentă a fost montată și redată. Aici, puteți adăuga cod care ar trebui să ruleze odată ce o componentă a fost inițializată complet (de exemplu, crearea de noi solicitări de rețea).

Starea de manipulare în componente

Modul în care Reacts abordează managementul de stat este oarecum unic. Pentru a înțelege de ce trebuie mai întâi să luăm în considerare modul în care majoritatea cadrelor gestionează stările.

În mod tradițional, un dezvoltator s-ar gândi la starea unei componente ca fiind stocată în sine. Acest lucru duce la multe probleme. Dacă o componentă dorește să actualizeze starea altei componente, are nevoie de o referință (recuzite) la acea altă componentă pentru a face acest lucru. Și dacă doriți ca obiectele sau matricele dvs. de stare să rămână sincronizate între componente, aveți nevoie de un fel de depozit de date centralizat sau emițător de evenimente pe care să îl poată accesa toate componentele.

Și, deși poate fi suficient de simplu pentru componente dintr-o aplicație mică cu doar două sau trei stări diferite, ce se întâmplă atunci când aplicația dvs. are zeci de stări diferite? Cum le gestionați pe toate?

Trecerea datelor din componenta părinte în componenta secundară

Există două moduri de a trece date de la o componentă părinte într-o componentă copil: prin elemente de recuzită sau prin stare. Transmiterea datelor prin elemente de recuzită poate fi utilă pentru definirea variabilelor pentru componentele dvs., cum ar fi definirea câte elemente există într-o matrice. Pe de altă parte, transmiterea datelor prin stare poate fi utilă dacă doriți să treceți obiecte mari (care ar putea încetini aplicația dvs.) sau să definiți funcții pe care doriți să le apelați din componenta dumneavoastră copil. Să trecem peste ambele abordări și să vedem când este potrivit să le folosim în codul nostru!

S-ar putea să vă placă și: Care sunt îmbunătățirile pe care React JS le oferă în WordPress Headless?

Concluzie

Când angajați un dezvoltator ReactJS, asigurați-vă că alegeți un freelancer care are experiență în lucrul cu JavaScript, CSS, HTML și Node.js de peste 5 ani. Este important ca dezvoltatorul dvs. să-și demonstreze expertiza furnizând exemple de proiecte și proiectând proiecte care sunt relevante pentru cerințele dumneavoastră specifice. Acest lucru îi va ajuta să înțeleagă cu ușurință scopurile și obiectivele dvs. de afaceri.

Orice expert va începe întotdeauna prin a pune întrebări înainte de a începe orice lucru. Prin urmare, angajarea unui expert care pune întrebări la momentele potrivite este o necesitate în timpul construirii unui site web folosind framework-ul react. Un cost mediu de angajare al dezvoltatorilor ReactJS ar fi între 40 și 100 USD pe oră. Dar experții taxează mai mult decât în ​​mod normal. Așadar, țineți cont de asta atunci când faceți un buget pentru crearea unui site web folosind cadrul de dezvoltare ReactJS.

 Acest articol este scris de Rahul Kalsariya de la Tagline Infotech LLP.