React e Vue.js sono entrambi Javascript frameworks di front-end per la costruzione di interfacce utente veloci e flessibili ma, quando si tratta di scegliere quale imparare prima, è meglio essere preparati a cosa aspettarsi, le principali differenze e tutte le loro caratteristiche.
TABELLA DI COMPARAZIONE
Come puoi vedere nella tabella di comparazione, React e Vue condividono molte somiglianze.
Entrambi:
- Usano un DOM virtuale
- Usano componenti di visualizzazione reattivi e dinamici
- Utilizzano al struttura di una libreria principale, con il routing e la gestione dello state globale gestita dalle librerie companion.
Runtime Performance
Sia React che Vue.js sono altrettanto veloci, quindi è improbabile che la velocità sia un fattore decisivo nella scelta tra di essi. Tuttavia, per le metriche specifiche, controlla questo benchmark di terze parti , che si concentra sulle prestazioni raw di rendering / aggiornamento con alberi di componenti molto semplici.
La struttura delle cartelle
JSX o HTML?
Tieni presente che entrambi questi due framework sono basati su componenti. È possibile riutilizzare i componenti nel progetto. Se parliamo di JSX, esso sembra HTML ma non lo è, né una stringa secondo la documentazione ufficiale. Permette agli sviluppatori di creare elementi in React ed è un’estensione di sintassi di JavaScript.
C’è un vantaggio nell’utilizzarlo perché JavaScript è potente rispetto all’HTML ed è abbastanza mantenuto, è un linguaggio maturo per lo sviluppo front-end.
Vue differisce da entrambi i quadri. Permette la separazione del codice nello stesso documento e consente agli sviluppatori di scrivere stili, script e altre cose in modo ordinato. Questo può essere un pregio per tutti i principianti, designer e sviluppatori esperti che hanno familiarità con HTML nei progetti precedenti.
Nota : puoi usare JSX in Vue con l’aiuto di Babel.
Impostazione di un componente con Vue e React
- React utilizza JSX e i componenti possono essere statefull (in grado di gestire lo state direttamente) o statless (possono ricevere solo variabili “props”).
- Vue.Js utilizza Twig per la gestione di modelli HTML con javascript.
Ecco un esempio di un componente tra i due framework:
Direttive sui modelli
Aggiornamento dello state locale
Per aggiornare lo state del componente locale in React, si utilizza il metodo setState . Per aggiornarlo in Vue, devi semplicemente assegnare alla proprietà il nuovo valore.
In React:
In Vue.Js:
Rendering condizionale
In React, di solito si utilizza un inline if statement (()?:) per il rendering condizionale del contenuto. Vue introduce la parola chiave v-if che si comporta allo stesso modo.
Iterare sugli elementi
Per iterare su una serie di elementi in React, di solito si usa lo Javascript helper map sopra i valori e restituisci una stringa di ciò che vorresti fosse ciascun ‘elemento’. In Vue, dovresti usare v-for .
Conclusioni
Questi due framework sono abbastanza simili ma è devi utilizzare tu quello che si adatta di più alle tue esigenze per il tuo progetto e il tuo attuale skillset.
Se ami javascript e hai familiarità nell’utilizzarlo, finirai sicuramente per scegliere React per la sua flessibilità visto che avrai a che fare solo con codice javascript.
Se preferisci lavorare con i modelli HTML mantenendo javascript e css in una struttura più chiara, tutto in un unico file e ti piace il fatto che Vue sia leggero e veloce, finirai sicuramente per utilizzare Vue.Js.
Puoi trovare risorse importanti qui: