Reagieren Sie die Vorlagen von JSX gegen Vue: ein Showdown am Frontend

React.js und Vue.js sind zwei der beliebtesten JavaScript-Bibliotheken der Welt. Sie sind beide leistungsstark und relativ einfach zu erlernen und zu verwenden.

Sowohl React als auch Vue:

  • Verwenden Sie ein virtuelles DOM
  • Bereitstellung reaktiver Ansichtskomponenten
  • Konzentrieren Sie sich weiterhin auf einen Aspekt der Entwicklung. In diesem Fall die Ansicht.

Bei so vielen Ähnlichkeiten könnte man annehmen, dass beide verschiedene Versionen derselben Sache sind.

Nun, es gibt einen großen Unterschied zwischen diesen beiden Bibliotheken: Sie ermöglichen es dem Entwickler, Ihre Ansichtskomponenten und damit auch Ihre Anwendung zu erstellen.

React verwendet JSX, einen vom React-Team geprägten Begriff, um Inhalte auf dem DOM zu rendern. Was ist JSX? Grundsätzlich ist JSX eine JavaScript-Renderfunktion, mit der Sie Ihren HTML-Code direkt in Ihren JavaScript-Code einfügen können.

Vue verfolgt einen anderen Ansatz und verwendet HTML-ähnliche Vorlagen. Die Verwendung von Vue-Vorlagen ähnelt der Verwendung von JSX, da beide mit JavaScript erstellt wurden. Der Hauptunterschied besteht darin, dass JSX-Funktionen in der eigentlichen HTML-Datei niemals verwendet werden, während dies bei Vue-Vorlagen der Fall ist.

Reagiere auf JSX

Lassen Sie uns einen genaueren Blick auf die Funktionsweise von JSX werfen. Angenommen, Sie haben eine Liste von Namen, die Sie im DOM anzeigen möchten. Eine Liste der Neueinstellungen, die Ihr Unternehmen kürzlich vorgenommen hat.

Wenn Sie einfaches HTML verwenden, müssen Sie zuerst eine index.html-Datei erstellen. Dann würden Sie die folgenden Codezeilen hinzufügen.

  • John
  • Sarah
  • Kevin
  • Alice

Hier gibt es nichts Spektakuläres, nur einfachen HTML-Code.

Wie würden Sie dasselbe mit JSX tun? Der erste Schritt wäre, eine weitere index.html-Datei zu erstellen. Anstatt wie zuvor den vollständigen HTML-Code hinzuzufügen, fügen Sie nur ein einfaches divElement hinzu. Dies divist das Containerelement, in dem Ihr gesamter Reaktionscode gerendert wird.

Der divmuss eine eindeutige ID haben, damit React weiß, wo er zu finden ist. Facebook tendiert dazu, das Root-Keyword zu bevorzugen. Bleiben wir also dabei.

Nun zum wichtigsten Schritt. Erstellen der JavaScript-Datei, die den gesamten React-Code enthält. Nennen Sie diese eine app.js.

Nun, da Sie all das aus dem Weg haben, auf das Hauptereignis. Anzeigen aller neuen Einstellungen für den Dom mithilfe von JSX

Sie müssten zuerst ein Array mit den Namen der neuen Mitarbeiter erstellen.

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

Von dort aus müssten Sie ein React-Element erstellen, das die gesamte Liste der Namen dynamisch rendert. Dies, ohne dass Sie jedes manuell anzeigen müssen.

const displayNewHires = ( 
    {names.map(name =>
  • {name}
  • )}
);

Das Wichtigste dabei ist, dass Sie keine einzelnen <Elemente erstellen müssen . Sie müssen nur einmal beschreiben, wie sie aussehen sollen, und React erledigt den Rest. Das ist eine ziemlich mächtige Sache. Während Sie nur wenige Namen haben, stellen Sie sich eine Liste mit Hunderttausenden vor! Sie können sehen, wie dies ein viel besserer Ansatz wäre. Besonders ich f the

  • Elemente sind komplexer als die hier verwendeten.

    Das letzte Codebit, das zum Rendern des Inhalts auf dem Bildschirm benötigt wird, ist die Haupt-Renderfunktion von ReactDom.

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

    Hier weisen Sie React an, den Inhalt von displayNewHiresinside divmit einem Element von root zu rendern .

    So sollte Ihr endgültiger Reaktionscode aussehen:

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

    Eine wichtige Sache, die Sie hier beachten sollten, ist, dass dies alles React-Code ist. Dies bedeutet, dass alles zu einfachem altem JavaScript kompiliert wird. So würde es letztendlich aussehen:

    ‘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’));

    Das ist alles dazu. Sie haben jetzt eine einfache React-Anwendung, die eine Liste mit Namen anzeigt. Nichts, worüber man nach Hause schreiben könnte, aber es sollte Ihnen einen Einblick geben, wozu React fähig ist.

    Vue.js Vorlagen

    In Übereinstimmung mit dem letzten Beispiel erstellen Sie erneut eine einfache Anwendung, die eine Liste mit Namen im Browser anzeigt.

    Als erstes müssen Sie eine weitere leere index.html-Datei erstellen. In dieser Datei erstellen Sie dann ein weiteres Leerzeichen divmit der ID root. Beachten Sie jedoch, dass diese Wurzel nur eine persönliche Präferenz ist. Sie können die ID anrufen, wie Sie möchten. Sie müssen nur sicherstellen, dass es später übereinstimmt, wenn Sie den HTML-Code mit Ihrem JavaScript-Code synchronisieren.

    Dieses Div funktioniert wie in React. Es teilt der JavaScript-Bibliothek, in diesem Fall Vue, mit, wo im DOM gesucht werden soll, wenn Änderungen vorgenommen werden sollen.

    Sobald dies erledigt ist, erstellen Sie eine JavaScript-Datei, die den gesamten Vue-Code enthält. Nennen Sie es app.js, um konsistent zu bleiben.

    Nachdem Sie Ihre Dateien bereit haben, wollen wir uns damit befassen, wie Vue Elemente im Browser anzeigt.

    Vue uses a template-like approach when it comes to manipulating the DOM. This means that your HTML file will not only have an empty div, like in React. You’re actually going to write a good part of your code in your HTML file.

    To give you a better idea, think back on what it takes to create a list of name using plain HTML. A <ul> element with some

  • Original text


  • elements inside. In Vue, you are going to do almost the exact same thing, with only a few changes added in.

    Create a <ul> element.

      Now add one empty <li> element inside the

        element.

        Nothing new yet. Change that by adding a directive, a custom Vue attribute, to your <li> element.

        A directive is Vue’s way of adding JavaScript functionality straight into the HTML. They all start with v- and are followed by descriptive names that give you an idea of what they are doing. In this case, it’s a for loop. For every name in your list of names, listOfNames, you want to copy this <li> element and replace it with a new

      • element with a name from your list.

        Now, the code only needs one final touch. Currently, it will display an <li> element for every name in your list, but you have not actually told it to display the actual name onto the browser. To fix that, you are going to insert some mustache like syntax inside your

      • element. Something you might have seen in some other JavaScript libraries.

        • {{name}}

        Now the <li> element is complete. It will now display each item inside a list called listOfNames. Keep in mind that the word name is arbitrary. You could have called it item and it would have served the same purpose. All the keyword does is serve as a placeholder that will be used to iterate over the list.

        The last thing that you need to do is create the data set and actually initialize Vue in your application.

        To do so, you will need to create a new Vue instance. Instantiate it by assigning it to a variable called app.

        let app = new Vue({ });

        Now, the object is going to take in a few parameters. The first one being the most important, the el (element) parameter that tells Vue where to start adding things to the DOM. Just like you did with your React example.

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

        The final step is to add the data to the Vue application. In Vue, all the data passed into the application will be done so as a parameter to the Vue instance. Also, each Vue instance can only have one parameter of each kind. While there are quite a few, you only need to focus on two for this example, el and data.

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

        The data object will accept an array called listOfNames. Now whenever you want to use that dataset in your application, you only need to call it using a directive. Simple, right?

        Here’s the final application:

        HTML

        • {{name}}

        JavaScript

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

        Conclusion

        You know now how to create two simple applications using both React and Vue. They both offer a robust amount of features, though Vue tends to be the easier to use. Also, keep in mind that Vue allows the use of JSX, though it is not the preferred method of implementation.

        Either way, these are two powerful libraries and you can’t go wrong using either one.

        If you want to learn more about web development check out my website at juanmvega.com for videos and articles on the latest JavaScript standards and frameworks!