React.js și Vue.js sunt două dintre cele mai populare biblioteci JavaScript de pe planetă. Ambele sunt puternice și relativ ușor de ridicat și de utilizat.

Atât React cât și Vue:

  • utilizați un DOM virtual
  • oferă componente de vizualizare reactivă
  • mențineți un accent pe un aspect al dezvoltării. În acest caz, vederea.

Cu atât de multe asemănări, ați putea presupune că ambele sunt versiuni diferite ale aceluiași lucru.

Ei bine, există o diferență majoră între aceste două biblioteci: modul în care vă împuternicesc dezvoltatorul să vă creeze componentele de vizualizare și, la rândul lor, aplicația dvs.

React folosește JSX, un termen inventat de echipa React, pentru a reda conținut pe DOM. Deci, ce este JSX? Practic, JSX este o funcție de redare JavaScript care vă ajută să inserați codul HTML direct în codul dvs. JavaScript.

Vue adoptă o abordare diferită și folosește șabloane de tip HTML. Utilizarea șabloanelor Vue este ca și utilizarea JSX, deoarece ambele sunt create folosind JavaScript. Principala diferență este că funcțiile JSX nu sunt utilizate niciodată în fișierul HTML real, în timp ce șabloanele Vue sunt.

Reacționează JSX

Să aruncăm o privire mai profundă asupra modului în care funcționează JSX. Să presupunem că aveți o listă de nume pe care doriți să le afișați pe DOM. O listă de noi angajări pe care compania dvs. le-a făcut recent.

Dacă ați utiliza HTML simplu, ar trebui mai întâi să creați un fișier index.html. Apoi ați adăuga următoarele linii de cod.

<ul>
  <li> John </li>
  <li> Sarah </li>
  <li> Kevin </li>
  <li> Alice </li>
<ul>

Nimic spectaculos aici, doar cod HTML simplu.

Deci, cum ați face același lucru folosind JSX? Primul pas ar fi crearea unui alt fișier index.html. Dar, în loc să adăugați HTML-ul complet, așa cum ați făcut înainte, veți adăuga doar un simplu div element. Acest div va fi elementul container în care va fi redat tot codul tău React.

div va trebui să aibă un ID unic, astfel încât React să știe unde îl poate găsi. Facebook tinde să favorizeze cuvântul cheie rădăcină, așa că hai să rămânem cu asta.

<div id=root></div>

Acum, treceți la cel mai important pas. Crearea fișierului JavaScript care va conține tot codul React. Sunați la aceasta app.js.

Deci, acum, că ai toate astea în afara evenimentului principal. Afișarea tuturor noilor angajați către Dom folosind JSX

Mai întâi ar trebui să creați o matrice cu numele noilor angajați.

const names = [‘John’, ‘Sarah’, ‘Kevin’, ‘Alice’];

De acolo ar trebui să creați un element React care va reda dinamic întreaga listă de nume. Acest lucru fără a fi nevoie să le afișați manual pe fiecare.

const displayNewHires = (
  <ul>
    {names.map(name => <li>{name}</li> )}
  </ul>
);

Lucrul cheie de remarcat aici este că nu trebuie să creați individ <li> elemente. Trebuie doar să descrieți cum doriți să arate o dată, iar React se va ocupa de restul. Acesta este un lucru destul de puternic. În timp ce aveți doar câteva nume, imaginați-vă că aveți o listă de sute de mii! Puteți vedea cum ar fi o abordare mult mai bună. Mai ales euf the

  • elementele sunt mai complexe decât cele utilizate aici.

    Ultimul bit de cod necesar pentru redarea conținutului pe ecran este funcția principală de redare ReactDom.

    ReactDOM.render(
      displayNewHires,
      document.getElementById(‘root’)
    );

    Aici îi spuneți React să redea conținutul displayNewHires în interiorul div cu un element de rădăcină.

    Așa ar trebui să arate codul tău final React:

    const names = [‘John’, ‘Sarah’, ‘Kevin’, ‘Alice’];
    const displayNewHires = (
      <ul>
        {names.map(name => <li>{name}</li> )}
      </ul>
    );
    ReactDOM.render(
      displayNewHires,
      document.getElementById(‘root’)
    );

    Un lucru cheie de reținut aici este că acesta este tot codul React. Aceasta înseamnă că toate se vor compila până la JavaScript vechi simplu. Iată cum ar arăta în cele din urmă:

    ‘use strict’;
    var names = [‘John’, ‘Sarah’, ‘Kevin’, ‘Alice’];
    var displayNewHires = React.createElement(
      ‘ul’,
      null,
      names.map(function (name) {
        return React.createElement(
          ‘li’,
          null,
          name
        );
      })
    );
    ReactDOM.render(displayNewHires, document.getElementById(‘root’));

    Cam despre asta e. Aveți acum o aplicație simplă React care va afișa o listă de nume. Nimic despre care să scrii acasă, dar ar trebui să îți dea o privire asupra a ceea ce este capabil React.

    Șabloane Vue.js

    În conformitate cu ultimul exemplu, veți crea din nou o aplicație simplă care va afișa o listă de nume în browser.

    Primul lucru pe care trebuie să-l faceți este să creați un alt fișier index.html gol. În interiorul acelui fișier, veți crea apoi un alt gol div cu un id de rădăcină. Rețineți însă că rădăcina este doar o preferință personală. Puteți apela identitatea oricum doriți. Trebuie să vă asigurați că se potrivește mai târziu atunci când sincronizați html cu codul dvs. JavaScript.

    Acest div va funcționa așa cum se întâmplă în React. Acesta va spune bibliotecii JavaScript, în acest caz Vue, unde să caute în DOM când vrea să înceapă să facă modificări.

    Odată ce ați terminat, veți crea un fișier JavaScript care va găzdui tot codul Vue. Sunați-l app.js, pentru a rămâne consecvent.

    Așadar, acum că aveți fișierele gata de pornire, să trecem la modul în care Vue afișează elementul în browser.

    Vue utilizează o abordare de tip șablon atunci când vine vorba de manipularea DOM. Aceasta înseamnă că fișierul dvs. HTML nu va avea doar un gol div, ca în React. De fapt, veți scrie o bună parte din codul dvs. în fișierul HTML.

    Pentru a vă face o idee mai bună, gândiți-vă din nou la ce este nevoie pentru a crea o listă de nume folosind HTML simplu. A <tul> element cu some

  • elemente din interior. În Vue, veți face aproape același lucru, cu doar câteva modificări adăugate.

    Creeaza o <ul> element.

    <ul>
    </ul>

    Acum adăugați unul gol <li> element inside the

      element.

      <ul>
        <li>
        </li>
      </ul>

      Nimic nou încă. Schimbați acest lucru adăugând o directivă, un atribut Vue personalizat, la <li> element.

      <ul>
        <li v-for=’name in listOfNames’>
        </li>
      </ul>

      O directivă este modul Vue de a adăuga funcționalitatea JavaScript direct în HTML. Toate încep cu v- și sunt urmate de nume descriptive care vă oferă o idee despre ceea ce fac. În acest caz, este o buclă for. Pentru fiecare nume din lista de nume, listOfNames, doriți să copiați acest lucru <li> element și înlocuiți-l cu a new

    • element cu un nume din lista dvs.

      Acum, codul are nevoie doar de o singură atingere finală. În prezent, va afișa un <li> element pentru fiecare nume din lista dvs., dar nu i-ați spus de fapt să afișeze numele real pe browser. Pentru a remedia acest lucru, veți introduce o mustață ca sintaxă înăuntru your

    • element. Ceva pe care s-ar putea să-l fi văzut în alte biblioteci JavaScript.

      <ul>
        <li v-for=’name in listOfNames’>
          {{name}}
        </li>
      </ul>

      Acum <li> elementul este complet. Acum va afișa fiecare element într-o listă numită listOfNames. Rețineți că cuvânt numele este arbitrar. Ai putea sunaEditați | × articol și ar fi servit același scop. Tot ceea ce face cuvântul cheie este să servească drept substituent care va fi folosit pentru a itera peste listă.

      Ultimul lucru pe care trebuie să-l faceți este să creați setul de date și să inițializați Vue în aplicația dvs.

      Pentru a face acest lucru, va trebui să creați o nouă instanță Vue. Instanțați-l atribuindu-l unei variabile numite aplicație.

      let app = new Vue({
      });

      Acum, obiectul va lua câțiva parametri. Primul fiind cel mai important, el (element) parametru care indică Vue de unde să înceapă adăugarea de lucruri în DOM. La fel cum ați făcut cu exemplul dvs. React.

      let app = new Vue({
        el:’#root’,
      });

      Ultimul pas este să adăugați datele la aplicația Vue. În Vue, toate datele transmise în aplicație se vor face astfel ca parametru pentru instanța Vue. De asemenea, fiecare instanță Vue poate avea doar un parametru de fiecare tip. Deși sunt destul de puține, trebuie doar să vă concentrați asupra a două pentru acest exemplu, el și data.

      let app = new Vue({
        el:’#root’,
        data: {
          listOfNames: [‘Kevin’, ‘John’, ‘Sarah’, ‘Alice’]
        }
      });

      Obiectul de date va accepta o matrice numită listOfNames. Acum, ori de câte ori doriți să utilizați acel set de date în aplicația dvs., trebuie să îl apelați doar folosind o directivă. Simplu, nu?

      Iată aplicația finală:

      HTML

      <div id=”root”>
        <ul>
          <li v-for=’name in listOfNames’>
            {{name}}
          </li>
        </ul>
      </div>

      JavaScript

      new Vue({
        el:”#root”,
        data: {
          listOfNames: [‘Kevin’, ‘John’, ‘Sarah’, ‘Alice’]
        }
      });

      Concluzie

      Acum știți cum să creați două aplicații simple folosind atât React, cât și Vue. Ambele oferă o cantitate robustă de caracteristici, deși Vue tinde să fie mai ușor de utilizat. De asemenea, rețineți că Vue permite utilizarea JSX, deși nu este metoda preferată de implementare.

      Oricum ar fi, acestea sunt două biblioteci puternice și nu puteți greși folosind nici una.

      Dacă doriți să aflați mai multe despre dezvoltarea web, consultați site-ul meu la juanmvega.com pentru videoclipuri și articole despre cele mai recente standarde și cadre JavaScript!