A React JSX vs Vue sablonjai: bemutatás a kezelőfelületen

A React.js és a Vue.js két legnépszerűbb JavaScript könyvtár a bolygón. Mindkettő hatalmas, és viszonylag könnyen felvehető és használható.

A React és a Vue egyaránt:

  • használjon virtuális DOM-ot
  • biztosítson reaktív nézet komponenseket
  • továbbra is a fejlődés egyik aspektusára összpontosítson. Ebben az esetben a nézet.

Ennyi hasonlóság mellett feltételezheti, hogy mindkettő ugyanazon dolog különböző változata.

Nos, van egy fő különbség e két könyvtár között: hogyan hatalmazzák fel a fejlesztőt a nézet összetevőinek és az alkalmazás létrehozására.

A React a JSX-et használja, amelyet a React csapata hozott létre, hogy tartalmat jelenítsen meg a DOM-on. Mi tehát a JSX? Alapvetően a JSX egy JavaScript renderelő funkció, amely segít beilleszteni a HTML-t közvetlenül a JavaScript-kódba.

A Vue más megközelítést alkalmaz, és HTML-szerű sablonokat használ. A Vue sablonok használata olyan, mint a JSX, mivel mindkettő JavaScript használatával készült. A fő különbség az, hogy a JSX függvényeket soha nem használják a tényleges HTML fájlban, míg a Vue sablonokat.

Reagáljon JSX-re

Vizsgáljuk meg mélyebben a JSX működését. Tegyük fel, hogy rendelkezik egy névvel, amelyet meg akar jeleníteni a DOM-on. Az Ön cége által nemrégiben felvett új alkalmazottak listája.

Ha sima HTML-t használt, akkor először létre kell hoznia egy index.html fájlt. Ezután hozzáadná a következő kódsorokat.

  • John
  • Sarah
  • Kevin
  • Alice

Itt semmi látványos, csak sima HTML kód.

Tehát hogyan tenne ugyanezt a JSX használatával? Az első lépés egy másik index.html fájl létrehozása lenne. De ahelyett, hogy a teljes HTML-t hozzáadná, mint korábban, csak egy egyszerű divelemet ad hozzá . Ez divlesz az a tároló elem, ahol az összes React kódja megjelenik.

Az divkell, hogy van egy egyedi azonosító, hogy reagáljon tudja, hol találja meg. A Facebook hajlamos a root kulcsszóra, ezért maradjunk ennél.

Most pedig a legfontosabb lépésre. Az összes React kódot tartalmazó JavaScript fájl létrehozása. Hívja ezt app.js.

Tehát most, hogy mindez elúszott a fő eseményre. Az összes új alkalmazottak megjelenítése a Dom számára a JSX használatával

Először létre kell hoznia egy tömböt az új alkalmazottak nevével.

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

Innen létre kell hoznia egy React elemet, amely dinamikusan megjeleníti a teljes névlistát. Ez anélkül, hogy manuálisan kellene megjelenítenie mindegyiket.

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

A legfontosabb itt megjegyzendő, hogy nem kell különálló <li> elemeket létrehozni. Csak le kell írnia, hogyan szeretné, hogy egyszer kinézzenek, a React pedig a többit kezeli. Ez elég erős dolog. Noha csak néhány neve van, képzelje el, hogy több százezres listája van! Láthatja, hogy ez sokkal jobb megközelítés lenne. Különösen én f the

  • az elemek összetettebbek, mint az itt használtak.

    A tartalom képernyőn való megjelenítéséhez szükséges utolsó bit kód a ReactDom fő renderelési funkciója.

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

    Itt azt mondják reagálnak, hogy elvegye a tartalmát displayNewHiresbelsejében divegy elemével gyökér.

    Így kell kinéznie a végső React kódnak:

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

    Itt fontos szem előtt tartani, hogy ez az egész React kód. Ez azt jelenti, hogy mindez lefordul a sima régi JavaScript-ig. Így néz ki végül:

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

    Ennyi van benne. Most már rendelkezik egy egyszerű React alkalmazással, amely megjeleníti a nevek listáját. Nincs miről írni otthon, de bepillantást kell engednie a React mire.

    Vue.js sablonok

    Az utolsó példának megfelelően ismét létrehoz egy egyszerű alkalmazást, amely megjeleníti a nevek listáját a böngészőben.

    Az első dolog, amit meg kell tennie, egy másik üres index.html fájl létrehozása. A fájl belsejében ezután létrehoz egy újabb üreset div, amelynek azonosítója root. Ne feledje azonban, hogy ez a gyökér csak személyes preferencia. Bármelyiknek hívhatja az azonosítót. Csak akkor kell megbizonyosodnia arról, hogy később megfelel-e, amikor szinkronizálja a html-t a JavaScript-kóddal.

    Ez a div úgy fog működni, mint a React-ben. Meg fogja mondani a JavaScript könyvtárnak, jelen esetben a Vue-nak, hogy hol keresse meg a DOM-ot, amikor el akarja kezdeni a módosításokat.

    Miután ez megtörtént, létrehoz egy JavaScript fájlt, amely az összes Vue kódot tartalmazza. Hívja app.js néven, hogy következetes maradjon.

    Tehát most, hogy készen állnak a fájlok indulásra, térjünk rá arra, hogy a Vue hogyan jeleníti meg az elemet a böngészőben.

    A Vue sablonszerű megközelítést alkalmaz a DOM manipulálásakor. Ez azt jelenti, hogy a HTML fájljában nem csak üres lesz div, mint a Reactben. Valójában a kód jó részét beírja a HTML fájlba.

    Annak érdekében, hogy jobb ötletet kapjon, gondoljon vissza arra, hogy mi szükséges egy névlista egyszerű HTML használatával történő létrehozásához. Egy <u l> elem some-vel

  • Original text


  • elemek belül. A Vue-ban majdnem pontosan ugyanezt fogja megtenni, csak néhány változtatással.

    Hozzon létre egy <ul> elemet.

      Most adjon hozzá egy üres <li> elemet insid e the

        elem.

        Még semmi új. Ezt úgy módosíthatja, hogy hozzáad egy irányelvet, egy egyedi Vue attribútumot az eleméhez.<li>

        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!