React's JSX vs Vue's skabeloner: et showdown på frontenden

React.js og Vue.js er to af de mest populære JavaScript-biblioteker på planeten. De er begge kraftfulde og relativt lette at afhente og bruge.

Både React og Vue:

  • brug en virtuel DOM
  • tilvejebringe reaktive visningskomponenter
  • bevare fokus på et aspekt af udviklingen I dette tilfælde synspunktet.

Med så mange ligheder antager du måske, at de begge er forskellige versioner af den samme ting.

Der er en stor forskel mellem disse to biblioteker: hvordan de giver dig udvikleren mulighed for at oprette dine visningskomponenter og til gengæld din applikation.

React bruger JSX, et udtryk, der er opfundet af React-teamet, til at gengive indhold til DOM. Så hvad er JSX? Grundlæggende er JSX en JavaScript-gengivelsesfunktion, der hjælper dig med at indsætte din HTML lige ind i din JavaScript-kode.

Vue tager en anden tilgang og bruger HTML-lignende skabeloner. Brug af Vue-skabeloner er som at bruge JSX, idet de begge er oprettet ved hjælp af JavaScript. Den største forskel er, at JSX-funktioner aldrig bruges i den aktuelle HTML-fil, mens Vue-skabeloner er.

Reager JSX

Lad os se nærmere på, hvordan JSX fungerer. Antag, at du har en liste med navne, som du vil have vist på DOM. En liste over nye ansættelser, som din virksomhed for nylig har foretaget.

Hvis du brugte almindelig HTML, skal du først oprette en index.html-fil. Derefter tilføjede du følgende kodelinjer.


   
  • John
  • Sarah
  • Kevin
  • Alice

    Intet spektakulært her, bare almindelig HTML-kode.

    Så hvordan ville du gøre det samme ved hjælp af JSX? Det første trin ville være at oprette en anden index.html-fil. Men i stedet for at tilføje den fulde HTML som du gjorde før, tilføjer du kun et simpelt divelement. Dette divvil være containerelementet, hvor al din React-kode gengives.

    Den divskal have et unikt id, så reagere ved hvor man kan finde det. Facebook har tendens til at favorisere rodnøgleordet, så lad os holde fast ved det.

    Nu på det vigtigste trin. Oprettelse af JavaScript-filen, der indeholder al React-koden. Ring til denne app.js.

    Så nu hvor du har alt det ude af vejen, på hovedbegivenheden. Viser alle de nye ansættelser til Dom ved hjælp af JSX

    Du skal først oprette en matrix med navnene på de nye ansættelser.

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

    Derfra skal du oprette et React-element, der dynamisk gengiver hele listen over navne. Dette uden at du behøver at manuelt vise hver enkelt.

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

    Den vigtigste ting at bemærke her er, at du ikke behøver at oprette individuelle <li> -elementer. Du behøver kun beskrive, hvordan du vil have dem til at se en gang ud, og React håndterer resten. Det er en ganske stærk ting. Mens du kun har et par navne, så forestil dig at have en liste med hundreder af tusinder! Du kan se, hvordan dette ville være en meget bedre tilgang. Især jeg f the

  • elementer er mere komplekse end dem, der bruges her.

    Den sidste kode kode, der er nødvendig for at gengive indholdet til skærmen, er den primære ReactDom-gengivelsesfunktion.

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

    Her fortæller du React at gengive indholdet af displayNewHiresinde divmed et element af rod.

    Sådan skal din endelige React-kode se ud:

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

    En vigtig ting at huske på her er, at det hele er React-kode. Dette betyder, at det hele kompileres ned til almindeligt gammelt JavaScript. Her er hvordan det i sidste ende ville se ud:

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

    Det er alt der er ved det. Du har nu et simpelt React-program, der viser en liste med navne. Intet at skrive hjem om, men det skal give dig et glimt af, hvad React er i stand til.

    Vue.js-skabeloner

    I overensstemmelse med det sidste eksempel opretter du igen en simpel applikation, der viser en liste med navne i browseren.

    The first thing that you need to do is create another empty index.html file. Inside that file, you will then create another empty div with an id of root. Keep in mind though, that root is only a personal preference. You can call the id whatever you like. You only need to make sure that it matches up later on when you sync the html to your JavaScript code.

    This div will function like it does in React. It will tell the JavaScript library, in this case Vue, where to look in the DOM when it wants to start making changes.

    Once that’s done, you’re going to create a JavaScript file that will house all the Vue code. Call it app.js, to stay consistent.

    So now that you have your files ready to go, let’s get into how Vue displays element onto the browser.

    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

  • 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!