React este una dintre cele mai populare biblioteci JavaScript pentru construirea interfețelor utilizator.
Dacă doriți să deveniți un dezvoltator front-end sau să găsiți un loc de muncă de dezvoltare web, probabil că veți beneficia de învățarea React în profunzime.
În acest post, veți învăța câteva dintre elementele de bază ale React, cum ar fi crearea unei componente, sintaxa JSX și Accesorii. Dacă nu ai nici o experiență sau puțină experiență cu React, această postare este pentru tine.
Pentru început, iată cum puteți instala React.
Ce este JSX?
Primul lucru pe care îl veți realiza după instalarea primului dvs. proiect React este că o funcție JavaScript returnează un anumit 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 de sintaxă specială și validă 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. Cu toate acestea, puteți să vă separați CSS î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.
JSX este foarte practic, deoarece putem executa, de asemenea, orice cod JavaScript (logică, funcții, variabile și așa mai departe) din HTML direct folosind acolade {}, astfel:
function App() {
const text="Hello World";
return (
<div className="App">
<p> {text} </p>
</div>
);
}De asemenea, puteți atribui etichete HTML variabilelor JavaScript:
const message = <h1>React is cool!</h1>;Sau puteți returna HTML în logica JavaScript (cum ar fi cazurile if-else):
render() {
if(true) {
return <p>YES</p>;
} else {
return <p>NO</p>;
}
}Nu voi intra în detalii suplimentare despre JSX, dar asigurați-vă că luați în considerare următoarele reguli în timp ce scrieți JSX:
- Etichetele HTML și componentele trebuie întotdeauna închise >
- Unele atribute precum “clasă” deveni “numele clasei” (deoarece clasa se referă la clase JavaScript), „Tabindex” devine „TabIndex” și ar trebui să fie scris camelCase
- Nu putem returna mai multe elemente HTML simultan, deci asigurați-vă că le înfășurați într-o etichetă părinte:
return (
<div>
<p>Hello</p>
<p>World</p>
</div>
);- sau ca alternativă, le puteți înfășura cu etichete goale:
return (
<>
<p>Hello</p>
<p>World</p>
</>
);De asemenea, puteți viziona tutorialul meu React for Beginners pentru mai multe informații:
Ce sunt componentele funcționale și de clasă?
După ce ne-am obișnuit cu sintaxa JSX, următorul lucru de înțeles este structura bazată pe componente a React.
Dacă revizuiți exemplul de cod 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 de utilizare în bucăți mai mici. De exemplu, dacă am construi interfața de utilizare a Twitter cu React:
În loc să construim întreaga UI 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țional și clasă. Să ne uităm la fiecare acum în detaliu.
Componente funcționale
Primul și recomandat tip de componentă din React sunt componentele funcționale. O componentă funcțională este practic o funcție JavaScript / ES6 care returnează un element React (JSX). Conform documentelor oficiale ale 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 și 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 „props” (care reprezintă proprietăți) cu date și returnează un element React. – reactjs.org
Pentru a putea utiliza mai târziu o componentă, trebuie mai întâi să o exportați, astfel încât să o puteți importa în altă parte:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
export default Welcome;După importare, 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)
- începe întotdeauna cu o literă mare (convenție de numire)
- ia recuzita ca parametru dacă este necesar
Ce sunt componentele clasei?
Al doilea tip de componentă este componenta clasei. Componentele clasei sunt clase ES6 care returnează JSX. Mai jos, vedeți aceeași funcție de bun venit, 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 clasei trebuie să aibă o metodă de redare () suplimentară pentru returnarea JSX.
De ce să folosiți componentele clasei?
Foloseam componente de clasă din cauza „stării”. În versiunile mai vechi ale React (versiunea
Prin urmare, aveam nevoie de componente funcționale numai pentru redarea interfeței de utilizare, în timp ce am folosi componente de clasă pentru gestionarea datelor și unele operații suplimentare (cum ar fi metodele ciclului de viață).
Acest lucru s-a schimbat odată cu introducerea React Hooks, iar acum putem folosi și stări și în componentele funcționale. (Voi acoperi starea și cârligele în următoarele postări, așa că nu vă deranjați pentru moment).
O componentă a clasei:
- este o clasă ES6, va fi o componentă odată ce „extinde” o componentă React.
- ia Props (în constructor) dacă este necesar
- trebuie să aibă un render () metoda de returnare a JSX
Ce sunt accesorii în React?
Un alt concept important al componentelor este modul în care acestea comunică. React are un obiect special numit prop (care înseamnă proprietate) pe care îl folosim pentru a transporta date de la o componentă la alta.
Dar atenție – recuzita transportă doar datele într-un flux unidirecțional (numai de la componentele părinte la copil). Nu este posibil cu accesorii să treacă date de la copil la părinte sau la componente de la același nivel.
Să revedem funcția App () de mai sus pentru a vedea cum să transmiteți datele cu recuzită.
Mai întâi, trebuie să definim un element de sprijin pe Componenta de întâmpinare ș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>
);
}Accesoriile sunt valori personalizate și, de asemenea, fac componentele mai dinamice. Întrucât componenta Welcome este copilul de aici, trebuie să definim recuzita părintelui său (App), astfel încât să putem transmite valorile și să obținem rezultatul accesând pur și simplu „numele” prop:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
Accesoriile React sunt cu adevărat utile
Așadar, dezvoltatorii React folosesc elemente de recuzită pentru a transmite date și sunt utili pentru această activitate. Dar cum rămâne cu gestionarea datelor? Accesoriile sunt folosite pentru transmiterea datelor, nu pentru manipularea acestora. Voi acoperi gestionarea datelor cu React în postările mele viitoare aici pe Routech.
Între timp, dacă doriți să aflați mai multe despre React și dezvoltarea web, nu ezitați abonați-vă la canalul meu YouTube.
Mulțumesc că ai citit!
