de Rajat Saxena

Fundațiile Rock Solid React.js: un ghid pentru începători

Fundatiile Rock Solid Reactjs un ghid pentru incepatori
React.js crash course

Lucrez cu React și React-Native în ultimele două luni. Am lansat deja două aplicații în producție, Kiven Aa (Reacționează) și Polen Chat (Reactive native). Când am început să învăț React, căutam ceva (un blog, un videoclip, un curs, orice altceva) care nu mă învăța doar să scriu aplicații în React. De asemenea, am vrut să mă pregătească pentru interviuri.

Majoritatea materialului pe care l-am găsit, s-a concentrat pe unul sau pe altul. Deci, această postare se adresează publicului care caută un amestec perfect de teorie și practică. Vă voi oferi un pic de teorie, astfel încât să înțelegeți ce se întâmplă sub capotă și apoi vă voi arăta cum să scrieți un cod React.js.

Dacă preferați videoclipul, am tot acest curs și pe YouTube. Vă rugăm să verificați asta.

Să ne scufundăm în …

React.js este o bibliotecă JavaScript pentru construirea interfețelor utilizator

Puteți crea tot felul de aplicații cu o singură pagină. De exemplu, mesageri de chat și portaluri de comerț electronic în care doriți să afișați modificări pe interfața cu utilizatorul în timp real.

Totul este o componentă

O aplicație React este alcătuită din componente, o mulțime, cuibărite una în alta. „Dar ce sunt componentele?”, Vă puteți întreba.

O componentă este o bucată de cod reutilizabilă, care definește modul în care anumite caracteristici ar trebui să arate și să se comporte în interfața de utilizare. De exemplu, un buton este o componentă.

Să ne uităm la următorul calculator, pe care îl vedeți pe Google când încercați să calculați ceva de genul 2 + 2 = 4 –1 = 3 (matematică rapidă!)

1611997748 541 Fundatiile Rock Solid Reactjs un ghid pentru incepatori
Markerele roșii denotă componente

După cum puteți vedea în imaginea de mai sus, calculatorul are multe zone – cum ar fi fereastra de afișare a rezultatelor si numpad. Toate acestea pot fi componente separate sau o componentă gigantică. Depinde de cât de confortabil este să spargi și să abstragi lucrurile din React

Scrieți cod pentru toate aceste componente separat. Apoi combinați-le sub un singur container, care la rândul său este o componentă React în sine. În acest fel puteți crea componente reutilizabile, iar aplicația dvs. finală va fi o colecție de componente separate care lucrează împreună.

Următorul este un astfel de mod în care puteți scrie calculatorul, prezentat mai sus, în React:

Da! Arată ca un cod HTML, dar nu este. Vom explora mai multe despre aceasta în secțiunile ulterioare.

Configurarea locului nostru de joacă

Acest tutorial se concentrează pe fundamentele React. Nu este orientat în primul rând către React for Web sau Reactive native (pentru construirea de aplicații mobile). Deci, vom folosi un editor online, astfel încât să evităm configurații specifice web sau native înainte de a afla chiar ce poate face React.

Am creat deja un mediu pentru tine codepen.io. Doar urmați linkul și citiți toate comentariile din filele HTML și JavaScript (JS).

Componente de control

Am aflat că o aplicație React este o colecție de diverse componente, structurate ca un copac imbricat. Astfel, avem nevoie de un fel de mecanism pentru a transmite date de la o componentă la alta.

Introduceți „recuzită”

Putem transmite date arbitrare componentei noastre folosind un props obiect. Fiecare componentă din React primește acest lucru props obiect.

Înainte de a învăța cum să folosiți acest lucru props obiect, să învățăm despre componentele funcționale.

a) Componenta funcțională

O componentă funcțională din React consumă date arbitrare pe care le transmiteți folosind props obiect. Returnează un obiect care descrie ce ar trebui să redea UI React. Componentele funcționale sunt, de asemenea, cunoscute sub numele de Componente fără stat.

Să scriem prima noastră componentă funcțională:

Este atat de simplu. Tocmai am trecut props ca argument pentru o funcție JavaScript simplă și returnat, umm, ei bine, ce a fost asta? Acea <div>{props.name}euv> lucru! Este JSX (JavaScript Extins). Vom afla mai multe despre aceasta într-o secțiune ulterioară.

Această funcție de mai sus va reda următorul HTML în browser:

Citiți secțiunea de mai jos despre JSX, unde am explicat cum obținem acest cod HTML din codul nostru JSX.

Cum puteți utiliza această componentă funcțională în aplicația dvs. React? Mă bucur că ai întrebat! Este la fel de simplu ca următoarele:

Atributul name în codul de mai sus devine props.name în interiorul nostru Hello componentă. Atributul age devine props.age și așa mai departe.

Tine minte! Puteți cuibări o componentă React în alte componente React.

Să folosim acest lucru Hello componentă în locul nostru de joacă codepen. Inlocuieste divinterior ReactDOM.render() cu a noastră Hello componentă, după cum urmează, și vedeți modificările în fereastra de jos.

Dar dacă componenta dvs. are o stare internă? De exemplu, ca următoarea componentă a contorului, care are o variabilă de numărare internă, care se schimbă la apăsarea tastelor + și -.

b) Componenta bazată pe clasă

Componenta bazată pe clase are o proprietate suplimentară state , pe care îl puteți utiliza pentru a păstra datele private ale unei componente. Putem rescrie documentele noastre Hello component utilizând notația de clasă după cum urmează. Deoarece aceste componente au o stare, acestea sunt cunoscute și sub numele de Componente de stare.

Ne extindem React.Component clasă a bibliotecii React pentru a crea componente bazate pe clase în React. Aflați mai multe despre cursurile JavaScript Aici.

render() metodă trebuie sa fii prezent în clasa ta, deoarece React caută această metodă pentru a ști ce interfață ar trebui să redea pe ecran.

Pentru a utiliza acest tip de stare internă, trebuie mai întâi să inițializăm state obiect în constructorul clasei componente, în modul următor.

În mod similar, props pot fi accesate în interiorul componentei noastre bazate pe clase folosind this.props obiect.

Pentru a seta starea, utilizați React.Component‘s setState(). Vom vedea un exemplu în acest sens, în ultima parte a acestui tutorial.

Bacsis: Nu suna niciodată setState() interior render() funcție, ca setState() face ca componenta să fie redată și acest lucru va avea ca rezultat o buclă nesfârșită.

1611997748 830 Fundatiile Rock Solid Reactjs un ghid pentru incepatori
O componentă bazată pe clase are o proprietate opțională „stare”.

Inafara de state, o componentă bazată pe clase are câteva metode ale ciclului de viață, cum ar fi componentWillMount(). Acestea le puteți folosi pentru a face lucruri, cum ar fi inițializarea state și toate, în afară de asta, nu intră în sfera acestui post.

JSX

JSX este o formă scurtă de JavaScript extins și este o modalitate de a scrie React componente. Folosind JSX, veți obține puterea maximă a JavaScript-ului în XML, cum ar fi etichetele.

Puneți expresii JavaScript în interior {}. Următoarele sunt câteva exemple valabile de JSX.

Modul în care funcționează este să scrieți JSX pentru a descrie cum ar trebui să arate interfața dvs. A transpilator ca Babel convertește acel cod într-o grămadă de React.createElement() apeluri. Biblioteca React le folosește apoi pe acestea React.createElement() apelează pentru a construi o structură în formă de copac a elementelor DOM (în cazul React for Web) sau a vizualizărilor native (în cazul React Native) și o păstrează în memorie.

React calculează apoi modul în care poate imita în mod eficient acest arbore în memoria interfeței interioare afișate utilizatorului. Acest proces este cunoscut sub numele de reconciliere. După ce calculul este făcut, React face modificările la interfața reală de pe ecran.

1611997749 154 Fundatiile Rock Solid Reactjs un ghid pentru incepatori
Cum React vă convertește JSX într-un arbore care descrie interfața de utilizare a aplicației dvs.

Poți să folosești REPL online al lui Babel pentru a vedea ce scoate de fapt React când scrieți niște JSX.

1611997749 0 Fundatiile Rock Solid Reactjs un ghid pentru incepatori
Utilizați Babel REPL pentru a transforma JSX în JavaScript simplu

Întrucât JSX este doar un zahăr sintactic, pur și simplu React.createElement() apeluri, React poate fi utilizat fără JSX

Acum avem toate conceptele în loc, așa că suntem bine poziționați pentru a scrie un counter componentă pe care am văzut-o mai devreme ca un GIF.

Codul este după cum urmează și sper că știți deja cum să redați acest lucru în locul nostru de joacă.

Următoarele sunt câteva puncte importante despre codul de mai sus.

  1. Utilizează JSX camelCasing de aici buttonAtributul este onClick, nu onclick, așa cum îl folosim în HTML.
  2. Legarea este necesară pentru this pentru a lucra la apeluri de apel. Vedeți rândurile # 8 și 9 din codul de mai sus.

Codul interactiv final este localizat Aici.

Cu aceasta, am ajuns la concluzia cursului nostru React crash. Sper că am aruncat o lumină despre modul în care funcționează React și despre modul în care puteți folosi React pentru a construi aplicații mai mari, folosind componente mai mici și reutilizabile.

Dacă aveți întrebări sau îndoieli, contactați-mă pe Twitter @ rajat1saxena sau scrie-mi la rajat@raynstudios.com.

Vă rugăm să recomandați această postare, dacă v-a plăcut și partajați-o cu rețeaua dvs. Urmăriți-mă pentru mai multe postări legate de tehnologie și luați în considerare abonarea la canalul meu Studiourile Rayn pe Youtube. Mulțumesc mult.