Exemple de fișe React din aplicația noastră

Descarcă aplicația noastră din App Store sau Google Play pentru a obține mai multe flashcarduri gratuite sau abonează-te pentru acces la toate flashcardurile.

Ce este JSX și de ce îl folosește React?

JSX este o extensie de sintaxă pentru JavaScript care permite scrierea structurilor HTML direct în codul JavaScript. Este unul dintre elementele fundamentale pe care se construiește React.js. De aceea, JSX este atât de crucial în ecosistemul React.

React utilizează JSX din mai multe motive:

1. Curățenie în cod: JSX simplifică procesul de dezvoltare a codului, permițând dezvoltatorilor să plaseze structuri HTML direct în JavaScript. Fără JSX, crearea de interfețe de utilizator în React ar fi semnificativ mai complicată.

2. Ușurință în utilizare: JSX face ca JavaScript să semene cu HTML, ceea ce îl face mai ușor de utilizat pentru dezvoltatori, în special pentru cei deja familiarizați cu HTML.

3. Securitate: JSX securizează automat codul împotriva tuturor tipurilor de atacuri, cum ar fi XSS (Cross-Site Scripting), prin încorporarea unică a elementelor.

4. Performanță: Codul JSX este optimizat pentru performanță. Este tradus în sintaxa JavaScript, care este interpretată mai rapid de către browserele web.

Tehnic, JSX nu este nimic mai mult decât sintaxa pentru funcția `React.createElement(component, props, ...children)`.

Ce este DOM-ul virtual și care sunt avantajele sale?

DOM-ul Virtual, sau modelul virtual al Modelului Obiect Document (DOM), este un concept utilizat în anumite biblioteci JavaScript, cum ar fi React. Este o copie ușoară a DOM-ului real, care este păstrată în memorie și actualizată independent de DOM-ul actual.

Principalele avantaje ale DOM-ului Virtual sunt:

1. Actualizările sunt mai rapide. DOM-ul Virtual este mai ușor și mai puține operațiuni se desfășoară prin el decât în cazul DOM-ului real. Ca rezultat, operațiunile de actualizare sunt efectuate mai rapid.

2. Reduce încărcarea pe DOM-ul actual. Toate schimbările sunt procesate mai întâi în DOM-ul virtual, iar apoi, printr-un proces numit reconciliere, schimbările selectate sunt introduse în DOM-ul real. Acest lucru poate evita actualizări frecvente și grele ale DOM-ului.

3. Optimizează procesul de randare. React, utilizând DOM-ul Virtual, poate calcula cea mai eficientă cale de a efectua actualizări în DOM-ul real. Acest lucru reduce numărul de operațiuni necesare și îmbunătățește performanța de randare.

4. Codarea devine mai simplă. Dezvoltatorii pot codifica ca și cum întreaga pagină ar fi redată din nou după fiecare schimbare. React se ocupă de optimizarea procesului astfel încât să fie efectuată doar minimul de muncă necesar pentru a sincroniza DOM-ul virtual și DOM-ul real.

Ce sunt prop-urile și cum sunt transmise în componentele React?

Props (de la "properties") sunt proprietățile componentelor din biblioteca React. Acestea sunt folosite pentru a transmite date de la un component la altul, acestea fiind datele pe care un component le primește de la componentul părinte și sunt de obicei transmise atunci când componentul este invocat.

Props sunt imutabile, ceea ce înseamnă că un component nu ar trebui să modifice valorile props pe care le primește, ci doar să le citească.

Props sunt transmise într-o manieră unidirecțională (de sus în jos), adică de la componente părinte la componente copil. Acest lucru seamănă cu transmiterea atributele către elementele HTML.

Iată un exemplu de cum se folosesc props:

function Welcome(props) {
  return <h1>Bun venit, {props.name}</h1>;
}

function App() {
  return <Welcome name = "Christopher"/>;
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

În exemplul de mai sus, am creat un component `Welcome` care așteaptă un props `name`. Apoi, în componentul `App`, creăm o instanță a componentului `Welcome` și îi transmitem un props `name` cu valoarea "Christopher". Ca rezultat, acolo unde am folosit componentul Welcome, textul "Bun venit, Christopher" va fi afișat.

Explică ce este hook-ul useEffect și la ce este folosit.

Hook-ul useEffect în React.js este folosit pentru a efectua efecte secundare în componente funcționale. Efectele secundare sunt de obicei acțiuni care nu afectează direct randarea componentei, dar sunt necesare pentru funcționarea sa corectă, cum ar fi extragerea datelor de la un API, gestionarea cronometrelor sau curățarea resurselor.

Funcționează similar cu metodele ciclului de viață al componentei: componentDidMount, componentDidUpdate și componentWillUnmount în componente de clasă.

Putem să-l folosim în trei variante diferite:

1. Fără un al doilea argument: Codul este apelat după fiecare randare.

useEffect(() => {
  console.log('Acesta va rula după fiecare randare');
});

2. Cu un array gol ca al doilea argument: Codul este apelat doar o dată după prima randare, analog cu componentDidMount.

useEffect(() => {
  console.log('Acesta va rula doar o dată, după prima randare');
}, []);

3. Cu un array de dependențe ca al doilea argument: Codul este rulat după prima randare și apoi de fiecare dată când valoarea oricărei dependențe din array se schimbă.

const [count, setCount] = useState(0);

useEffect(() => {
  console.log('Acesta va rula după prima randare, și de fiecare dată când "count" se schimbă');
}, [count]);

În rezumat, hook-ul useEffect permite execuția efectelor secundare după sau în timpul randării componentelor funcționale, ceea ce la rândul său permite un cod curat și înțeles, garantând în același timp funcționalitate completă.

Fișe React

Exemple de fișe React din aplicația noastră

Ce este JSX și de ce îl folosește React?

Ce este DOM-ul virtual și care sunt avantajele sale?

Ce sunt prop-urile și cum sunt transmise în componentele React?

Explică ce este hook-ul useEffect și la ce este folosit.

Descărcați IT Flashcards Acum