React este una dintre cele mai populare biblioteci JavaScript pentru construirea de interfețe utilizator.
Dacă doriți să deveniți un dezvoltator front-end sau să găsiți un loc de muncă în domeniul dezvoltării web, probabil că ați beneficia de învățarea în profunzime a React.
În această postare, veți învăța câteva dintre elementele de bază ale React, cum ar fi crearea unei componente, sintaxa JSX și Props. Dacă nu aveți nici o experiență sau puțină experiență cu React, această postare este pentru dumneavoastră.
Pentru început, iată cum puteți instala React.
Ce este JSX?
Primul lucru pe care îl veți realiza după instalarea primului proiect React este că o funcție JavaScript returnează niște cod HTML:
function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> </header> </div> );}Aceasta este o extensie specială și valabilă a sintaxei pentru React care se numește JSX (JavaScript XML). În mod normal, în proiectele legate de frontend, păstrăm codul HTML, CSS și JavaScript în fișiere separate. Cu toate acestea, în React, acest lucru funcționează puțin diferit.
În proiectele React, nu creăm fișiere HTML separate, deoarece JSX ne permite să scriem HTML și JavaScript combinate împreună în același fișier, ca în exemplul de mai sus. Puteți, totuși, să vă separați CSS-ul într-un alt fișier.
La început, JSX ar putea părea puțin ciudat. Dar nu vă faceți griji, vă veți obișnui cu el.
JSX este foarte practic, deoarece putem, de asemenea, să executăm orice cod JavaScript (logică, funcții, variabile și așa mai departe) în interiorul HTML direct, folosind acoladele { }, astfel:
function App() { const text = 'Hello World'; return ( <div className="App"> <p> {text} </p> </div> );}De asemenea, puteți să atribuiți etichete HTML variabilelor JavaScript:
const message = <h1>React is cool!</h1>;Sau puteți returna HTML în interiorul logicii JavaScript (cum ar fi cazurile if-else):
render() { if(true) { return <p>YES</p>; } else { return <p>NO</p>; }}Nu voi intra în alte detalii despre JSX, dar asigurați-vă că luați în considerare următoarele reguli atunci când scrieți JSX:
- Balierele HTML și componentele trebuie să fie întotdeauna închise < />
- Câteva atribute, cum ar fi „class” devin „className” (deoarece class se referă la clasele JavaScript), „tabindex” devine „tabIndex” și ar trebui să fie scrise camelCase
- Nu putem returna mai mult de un element HTML deodată, așa că asigurați-vă că le înfășurați în interiorul unei etichete părinte:
return ( <div> <p>Hello</p> <p>World</p> </div>);- sau, ca alternativă, le puteți înfășura cu tag-uri goale:
return ( <> <p>Hello</p> <p>World</p> </>);Puteți viziona, de asemenea, tutorialul meu React pentru începători pentru mai multe informații:
Ce sunt componentele funcționale de clasă &?
După ce ne-am obișnuit cu sintaxa JSX, următorul lucru pe care trebuie să-l înțelegem este structura bazată pe componente a React.
Dacă revedeți codul de exemplu din partea de sus a acestei postări, veți vedea că codul JSX este returnat de o funcție. Dar funcția App( ) nu este o funcție obișnuită – este de fapt o componentă. Deci, ce este o componentă?
Ce este o componentă?
O componentă este un bloc de cod independent, reutilizabil, care împarte interfața utilizator în bucăți mai mici. De exemplu, dacă am construi interfața de utilizator a Twitter cu React:
În loc să construim întreaga interfață de utilizator sub un singur fișier, putem și ar trebui să împărțim toate secțiunile (marcate cu roșu) în bucăți independente mai mici. Cu alte cuvinte, acestea sunt componente.
React are două tipuri de componente: funcționale și de clasă. Să analizăm acum mai în detaliu fiecare dintre ele.
Componente funcționale
Primul tip de componente și cel recomandat în React sunt componentele funcționale. O componentă funcțională este practic o funcție JavaScript/ES6 care returnează un element React (JSX). Conform documentației oficiale React, funcția de mai jos este o componentă funcțională validă:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}Alternativ, puteți crea, de asemenea, o componentă funcțională cu definiția funcției săgeată:
const Welcome = (props) => { return <h1>Hello, {props.name}</h1>; }Această funcție este o componentă React validă deoarece acceptă un singur argument obiect „props” (care înseamnă proprietăți) cu date și returnează un element React. – reactjs.org
Pentru a putea folosi o componentă mai târziu, trebuie mai întâi să o exportați pentru a o putea importa în altă parte:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}export default Welcome;După ce o importați, puteți apela componenta ca în acest exemplu:
import Welcome from './Welcome';function App() { return ( <div className="App"> <Welcome /> </div> );}Deci o componentă funcțională în React:
- este o funcție JavaScript/ES6
- trebuie să returneze un element React (JSX)
- întotdeauna începe cu majusculă (convenție de denumire)
- preia props ca parametru dacă este necesar
Ce sunt Componentele de clasă?
Cel de-al doilea tip de componentă este componenta de clasă. Componentele de clasă sunt clase ES6 care returnează JSX. Mai jos, vedeți aceeași funcție Welcome, de data aceasta ca o componentă de clasă:
class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}Diferit de componentele funcționale, componentele de clasă trebuie să aibă o metodă suplimentară render( ) pentru a returna JSX.
De ce să folosim componente de clasă?
Am folosit componente de clasă din cauza „statului”. În versiunile mai vechi ale React (versiunea < 16.8), nu era posibil să folosim starea în interiorul componentelor funcționale.
Din acest motiv, aveam nevoie de componente funcționale doar pentru redarea UI, în timp ce foloseam componente de clasă pentru gestionarea datelor și unele operațiuni suplimentare (cum ar fi metodele de ciclu de viață).
Acest lucru s-a schimbat odată cu introducerea React Hooks, iar acum putem folosi stări și în componentele funcționale. (Voi aborda starea și cârligele în următoarele postări, așa că nu le băgați în seamă deocamdată).
O componentă de clasă:
- este o clasă ES6, va fi o componentă odată ce „extinde” o componentă React.
- preia Props (în constructor) dacă este necesar
- trebuie să aibă o metodă render( ) pentru a returna JSX
Ce sunt Props în React?
Un alt concept important al componentelor este modul în care acestea comunică. React are un obiect special numit prop (de la property) pe care îl folosim pentru a transporta date de la o componentă la alta.
Dar fiți atenți – props transportă date doar într-un flux unidirecțional (doar de la componente părinte la componente copil). Nu este posibil cu props să transmiteți date de la copil la părinte, sau la componente de la același nivel.
Să revizuim funcția App( ) de mai sus pentru a vedea cum să transmitem date cu props.
În primul rând, trebuie să definim un prop pe componenta Welcome și să îi atribuim o valoare:
import Welcome from './Welcome';function App() { return ( <div className="App"> <Welcome name="John"/> <Welcome name="Mary"/> <Welcome name="Alex"/> </div> );}Props sunt valori personalizate și, de asemenea, fac componentele mai dinamice. Din moment ce componenta Welcome este copilul aici, trebuie să definim props pe părintele său (App), astfel încât să putem trece valorile și să obținem rezultatul prin simpla accesare a prop-ului „name”:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}
React Props sunt foarte utile
Așa că dezvoltatorii React folosesc props pentru a trece date și sunt utile pentru această sarcină. Dar cum rămâne cu gestionarea datelor? Props sunt folosite pentru a transmite date, nu pentru a le manipula. Voi aborda gestionarea datelor cu React în postările mele viitoare aici pe freeCodeCamp.
Între timp, dacă doriți să aflați mai multe despre React & Web development, nu ezitați să vă abonați la canalul meu de YouTube.
Mulțumesc că ați citit!