Introducere în React, partea 1

Am vorbit deja în acest blog despre noua stivă de dezvoltare a WordPress și revoluția care vine odată cu aceasta, atât pentru platformă în sine, cât și pentru dezvoltatorii care acum sunt nevoiți să învețe lucruri noi. Nu cu mult timp în urmă, de exemplu, am publicat o postare în care se explică cum să folosești pachetul @wordpress/scripts pentru a extinde Gutenberg și a adăuga un buton la interfața sa. Ca autor, îmi place să scriu tutoriale pentru că pot împărtăși ceva ce știu bine și simt că putem învăța toți împreună.

Din păcate, cred că tutorialele ascund o mare problemă: mulți dintre voi le urmați orbește fără să înțelegeți cu adevărat ce se întâmplă, chiar dacă obțineți rezultatul corect în final. Dar celor mai multe tutoriale le lipsește „momentul aha”, momentul de perspectivă și înțelegere în care totul face clic în capul tău și înțelegi de ce lucrurile sunt așa cum sunt.

Așa că astăzi aș dori să încep o serie de postări cu o introducere în React pentru a arunca puțină lumină. Vreau să demistific React și să vă ajut să vă îmbunătățiți rapid. Vreau să înțelegeți de ce React este așa cum este și de ce lucrurile sunt așa cum sunt. Vreau să înțelegeți principiile din spatele React. Vreau să scrii un cod mai bun.

Programare functionala

Înainte de a vorbi despre React, cred că merită să petrecem câteva minute vorbind despre programarea funcțională , deoarece multe dintre cadrele pe care le-am folosit astăzi se bazează pe principiile sale. Și React (împreună cu Redux) nu face excepție.

Programarea funcțională este o paradigmă de programare în care programele sunt construite prin aplicarea și compunerea funcțiilor. Ați putea crede că, ei bine, „programarea” a fost întotdeauna despre construirea și rularea funcțiilor, nu? Nu chiar. Suportă cu mine.

Luați în considerare, de exemplu, programarea orientată pe obiecte. În POO, programele sunt construite prin crearea și compunerea obiectelor, care pot conține date, sub formă de atribute sau câmpuri, și cod, sub formă de metode sau proceduri. Vedea? Nu funcții, ci obiecte.

Deci, ce face programarea funcțională specială? Ei bine, sunt câteva aspecte care caracterizează programarea funcțională: funcții pure, transparență referențială, imuabilitate, funcții ca cetățeni de ordinul întâi, funcții de ordin superior etc, și vă recomand să le studiați pe cont propriu (sau, dacă vreți pe mine). la, putem vorbi despre ele în postările viitoare). Dar, pentru a menține această postare scurtă, astăzi ne vom concentra pur și simplu pe o caracteristică...

Funcții pure

Unul dintre lucrurile care face programarea funcțională diferită de alte paradigme de programare este modul în care definește și funcționează cu funcțiile. În FP, funcțiile sunt pure, ceea ce înseamnă că îndeplinesc următoarele două condiții:

1. Produce întotdeauna același rezultat atunci când i se oferă aceleași argumente
2. Nu are efecte secundare

De exemplu, aceasta nu este o funcție pură:

 let previousName = 'David'; function greet( name ) { if ( previousName !== name ) { console.log( `Hello, ${ name }!` ); } else { console.log( `Welcome back, ${ name }!` ); } previousName = name; }

deoarece are mai multe efecte secundare. Și anume, modifică o variabilă globală (efectul secundar 1) și trimite ceva text în consolă (efectul secundar 2).

O altă funcție impură este următoarea:

 function createElement( name ) { const id = Math.random(); return { id, name }; }

pentru că, după cum puteți vedea, nu produce întotdeauna același rezultat. De fiecare dată când se apelează createElement cu un anumit nume, rezultatul pe care îl obține este diferit. La urma urmei, atributul id este generat prin Math.random ...

Funcțiile pure sunt grozave din mai multe motive: sunt simplu de înțeles și nu conțin surprize. Le oferiți niște intrări, vă vor returna o ieșire specifică. Și acest lucru este grozav, deoarece acest mod de a defini funcțiile le aduce mai aproape de înțelegerea noastră matematică a ceea ce este o funcție: mapează fiecare intrare la o ieșire bine definită.

Componente în React

Ce trebuie să facă funcțiile pure și programarea funcțională? Ei bine, să vedem dacă putem deduce relația lor...

După cum puteți citi în documentația sa, React este o bibliotecă JavaScript pentru crearea de interfețe cu utilizatorul prin bucăți mici de cod numite „Componente”. Aceasta este prima componentă pe care o veți vedea în tutorialul lor:

 class ShoppingList extends React.Component { render() { return ( <div className="shopping-list"> <h1>Shopping List for { this.props.name }</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li> </ul> </div> ); } }

Destul de simplu și chiar de la sine explicat, nu-i așa?

Dar așteptați o secundă! Aceasta nu arată deloc ca o „funcție pură”. De fapt, aceasta este o clasă implementată folosind programarea orientată pe obiecte.

Da, ai perfecta dreptate. Nu arată bine... ne-am pierdut timpul vorbind despre programare funcțională?

Aruncă o privire din nou la componenta anterioară. Cu ce ​​seamănă? Ce face? Ei bine, este o clasă cu o singură metodă ( render ) care generează ceva HTML pentru a reda o listă de cumpărături. Această listă de cumpărături este întotdeauna aceeași (dah, este un exemplu simplu), dar are o parte variabilă: titlul său, unde clasa pare să folosească o proprietate internă this.props.name .

Deci, dacă încă nu știm nimic despre React și ne uităm doar la cod și încercăm să deducem ce face, vedem următoarele:

1. Componenta poate primi un „nume”. Nu știm exact cum primește acest nume, dar știm că o face. La urma urmei, this.props.name este un indiciu destul de bun.
2. Metoda de render produce HTML pentru a reda o listă (statică) de „elementele de cumpărături”: Instagram , WhatsApp și Oculus .
3. HTML rezultat nu este 100% static; folosește un „nume” care poate varia în funcție de valoarea unei proprietăți.

Vezi unde merg?

Componente Funcții în React

Tocmai am descris o funcție pură! Avem o componentă care ia o valoare ( name ) și produce o ieșire bine definită (HTML). Înseamnă asta că ne putem îndepărta de OOP și putem implementa componenta anterioară ca funcție?

Sigur! Clasa prea complicată pe care tocmai am văzut-o poate fi rescrisă ca o funcție pură mai simplă și mai ușor de înțeles, care primește elemente de props și returnează HTML:

 const ShoppingList = ( props ) => ( <div className="shopping-list"> <h1>Shopping List for { props.name }</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li> </ul> </div> );

Acesta este exact același lucru pe care l-am avut, dar mult, mult mai simplu. Aș îndrăzni chiar să spun că este cel mai simplu lucru pe care îl pot implementa ca programator: o componentă React nu este altceva decât o funcție care preia unele elemente de recuzită și produce un HTML .

Și aceasta este tocmai prima lecție pe care trebuie să o înveți: componenta ta React este o funcție pură : elemente de recuzită, HTML out. O componentă nu trebuie să execute funcții asincrone pentru a prelua date (care sunt efecte secundare). Nici o componentă nu poate modifica proprietățile pe care le primește (imuabilitate).

Deci, încă o dată: o componentă pur și simplu preia niște elemente de recuzită și produce rezultatul HTML. Perioadă.

Dar stai, dacă o componentă este atât de simplă, cum putem face ceva util cu ea? Ei bine, stați pe fază, pentru că despre asta vom vorbi în următoarea postare!

Imagine prezentată de Josiah Weiss pe Unsplash.