jQuery și React sunt ambele biblioteci JavaScript populare pentru dezvoltarea front-end. În timp ce jQuery este o bibliotecă de manipulare DOM, React este o bibliotecă JavaScript pentru construirea de interfețe cu utilizatorul.

Aflați cum să migrați o aplicație existentă de la jQuery la React.

jQuery vs. Reacţiona?

Când vine vorba de alegerea între jQuery și React, depinde de nevoile și preferințele dvs. Dacă sunteți în căutarea unei biblioteci ușor de utilizat și care are o comunitate mare, atunci jQuery este o alegere bună. Dar dacă sunteți în căutarea unei biblioteci care este mai potrivită pentru dezvoltarea la scară largă, React este opțiunea mai bună.

De ce să migrați de la jQuery la React?

Există mai multe motive pentru care ați putea dori să vă migrați aplicația de la jQuery la React.

  • React este mai rapid decât jQuery: Dacă vorbim de performanță brută, React este mai rapid decât jQuery. Acest lucru se datorează faptului că React utilizează un DOM virtual, care este o reprezentare JavaScript a DOM-ului real. Aceasta înseamnă că atunci când un utilizator interacționează cu o aplicație React, numai părțile DOM care se modifică se vor actualiza. Aceasta este mai eficientă decât manipularea DOM completă a jQuery.
    instagram viewer
  • React este mai ușor de întreținut: Un alt motiv pentru a migra la React este că este mai ușor de întreținut decât jQuery. Acest lucru se datorează faptului că componentele React sunt autonome, astfel încât să le puteți reutiliza cu ușurință. Aceasta înseamnă că, dacă trebuie să faceți o modificare la o componentă React, o puteți face fără a afecta restul bazei de cod.
  • React este mai scalabil: În cele din urmă, React este mai scalabil decât jQuery. Utilizează o arhitectură bazată pe componente, care este mai scalabilă decât abordarea monolitică a jQuery. Aceasta înseamnă că puteți extinde și modifica cu ușurință o aplicație React după cum este necesar.
  • React are un suport mai bun pentru testarea unitară: Când vine vorba de testarea unitară, React are un suport mai bun decât jQuery. Deoarece puteți izola cu ușurință componentele React, este mai ușor să scrieți teste unitare pentru ele.

Cum să vă migrați aplicația de la jQuery la React

Dacă intenționați să vă migrați aplicația de la jQuery la React, trebuie să aveți în vedere câteva lucruri. Este important să știți de ce aveți nevoie pentru a începe și să vă faceți o idee bună despre cum puteți migra părți individuale ale aplicației dvs.

Cerințe preliminare

Înainte de a începe procesul de migrare, există câteva lucruri pe care trebuie să le faceți pentru a configura lucrurile. În primul rând, trebuie creați o aplicație React folosind aplicația create-react.

După ce ați instalat aceste dependențe, trebuie să creați un fișier numit index.js în dumneavoastră src director. Acest fișier va fi punctul de intrare pentru aplicația dvs. React.

În cele din urmă, puteți trece la părți individuale ale bazei de cod și le puteți actualiza în consecință.

1. Gestionarea evenimentelor

În jQuery, puteți atașa evenimente elementelor. De exemplu, dacă aveți un buton, puteți atașa acestuia un eveniment de clic. Când cineva face clic pe buton, se va rula gestionarea evenimentelor.

$("buton").click(funcţie() {
// Fă ceva
});

React gestionează evenimentele în mod diferit. În loc să atașați evenimente la elemente, le definiți în componente. De exemplu, dacă aveți un buton, ați defini evenimentul clic în componentă:

clasăButonse extindeReacţiona.Componentă{
 handleClick() {
// Fă ceva
 }
 randa() {
întoarcere (
<button onClick={this.handleClick}>
 Click pe mine!
</button>
 );
 }
}

Aici, componenta Button conține definiția metodei handleClick(). Când cineva face clic pe buton, această metodă va rula.

Fiecare metodă are avantajele și dezavantajele sale. În jQuery, evenimentele sunt ușor de atașat și eliminat. Cu toate acestea, poate fi dificil să le urmăriți dacă aveți o mulțime de evenimente. În React, definiți evenimente în componente, ceea ce le poate face mai ușor de urmărit. Dar nu sunt la fel de ușor de atașat și îndepărtat.

Dacă utilizați React, va trebui să vă actualizați codul pentru a utiliza noua metodă de gestionare a evenimentelor. Pentru fiecare eveniment pe care doriți să îl gestionați, va trebui să definiți o metodă în componentă. Această metodă va rula la declanșarea evenimentului.

2. Efecte

În jQuery, puteți utiliza metodele .show() sau .hide() pentru a afișa sau a ascunde un element. De exemplu:

$("#element").spectacol();

În React, puteți utiliza cârligul useState() pentru a gestiona starea. De exemplu, dacă doriți să afișați sau să ascundeți un element, ați defini starea din componentă:

import { useState } din "reacţiona";
funcţieComponentă() {
const [isShown, setIsShown] = useState(fals);
întoarcere (
<div>
 {este arătat &&<div>Buna ziua!</div>}
<butonul onClick={() => setIsShown(!isHown)}>
 Comutare
</button>
</div>
 );
}

Acest cod definește variabila de stare isShown și funcția setIsShown(). React are diferite tipuri de cârlige pe care îl puteți utiliza în aplicația dvs., dintre care useState este unul. Când un utilizator face clic pe buton, variabila de stare isShown se actualizează și elementul se afișează numai atunci când este cazul.

În jQuery, efectele sunt ușor de utilizat și funcționează bine. Cu toate acestea, pot fi dificil de gestionat dacă aveți o mulțime de ele. În React, efectele trăiesc în interiorul componentelor, ceea ce le poate face mai ușor de gestionat, dacă nu la fel de ușor de utilizat.

3. Preluarea datelor

În jQuery, puteți folosi metoda $.ajax() pentru a prelua date. De exemplu, dacă doriți să preluați niște date JSON, puteți face acest lucru astfel:

$.ajax({
 url: "https://example.com/data.json",
 dataType: "json",
 succes: funcţie(date) {
 // do ceva cu cel date
 }
});

În React, puteți utiliza metoda fetch() pentru a prelua date. Iată cum puteți prelua date JSON folosind această metodă:

aduce("https://example.com/data.json")
 .apoi (răspuns => response.json())
 .apoi (date => {
 // do ceva cu cel date
 });

În jQuery, metoda $.ajax() este ușor de utilizat. Cu toate acestea, poate fi dificil să gestionați erorile. În React, metoda fetch() este mai detaliată, dar este mai ușor de gestionat erorile.

4. CSS

În jQuery, puteți specifica CSS după pagină. De exemplu, dacă doriți să stilați toate butoanele dintr-o pagină, puteți face acest lucru țintind elementul buton:

butonul {
 culoare de fundal: roșu;
 culoare albă;
}

În React, puteți utiliza CSS în moduri diferite. O modalitate este de a folosi stiluri inline. De exemplu, dacă doriți să stilați un buton, puteți face acest lucru adăugând atributul stil la element:

<stilul butonului={{backgroundColor: 'roșu', culoare: 'alb'}}>
 Click pe mine!
</button>

O altă modalitate de a stila componentele React este utilizarea stilurilor globale. Stilurile globale sunt reguli CSS pe care le definiți în afara unei componente și le aplicați tuturor componentelor din aplicație. Pentru a face acest lucru, puteți utiliza o bibliotecă CSS-in-JS, cum ar fi componentele cu stil:

import stilizat din „componente stilate”;
const Button = stilat.button`
 culoare de fundal: roșu;
 culoare albă;
`;

Nu există o alegere corectă sau greșită între stilurile inline și stilurile globale. Chiar depinde de cerințele tale. În general, stilurile inline sunt mai ușor de utilizat pentru proiecte mici. Pentru proiecte mai mari, stilurile globale sunt o opțiune mai bună.

Implementați cu ușurință aplicația dvs. React

Unul dintre cele mai semnificative avantaje ale React este că este foarte ușor să implementați aplicația React. Puteți implementa React pe orice server web static. Trebuie doar să compilați codul folosind un instrument precum Webpack și apoi să puneți fișierul bundle.js rezultat pe serverul dvs. web.

De asemenea, vă puteți găzdui gratuit aplicația React pe paginile GitHub.