React JSX срещу шаблоните на Vue: разбор на предния край

React.js и Vue.js са две от най-популярните JavaScript библиотеки на планетата. Те са едновременно мощни и относително лесни за взимане и използване.

Както React, така и Vue:

  • използвайте виртуален DOM
  • осигуряват компоненти с реактивен изглед
  • поддържайте фокус върху един аспект от развитието. В този случай гледката.

С толкова много прилики може да предположите, че и двете са различни версии на едно и също нещо.

Е, има една основна разлика между тези две библиотеки: как те дават възможност на разработчика да създаде компонентите на вашия изглед и от своя страна вашето приложение.

React използва JSX, термин, създаден от екипа на React, за да изобразява съдържание в DOM. И така, какво е JSX? По принцип JSX е функция за визуализиране на JavaScript, която ви помага да вмъкнете своя HTML директно в кода на JavaScript.

Vue използва различен подход и използва HTML-подобни шаблони. Използването на Vue шаблони е като използването на JSX, тъй като и двамата са създадени с помощта на JavaScript. Основната разлика е, че JSX функциите никога не се използват в действителния HTML файл, докато Vue шаблоните са.

React JSX

Нека разгледаме по-задълбочено как работи JSX. Да приемем, че имате списък с имена, които искате да се показват в DOM. Списък с нови наеми, които наскоро е направила вашата компания.

Ако използвате обикновен HTML, първо ще трябва да създадете файл index.html. След това ще добавите следните редове код.

  • John
  • Sarah
  • Kevin
  • Alice

Тук няма нищо грандиозно, просто обикновен HTML код.

И така, как бихте направили същото с JSX? Първата стъпка би била да се създаде друг файл index.html. Но вместо да добавяте пълния HTML, както преди, ще добавите само прост divелемент. Това divще бъде елементът на контейнера, където ще бъде изобразен целият ви код на React.

В divще трябва да има уникален идентификатор, така че реагират знае къде да го намери. Facebook има тенденция да благоприятства основната ключова дума, така че нека се придържаме към това.

Сега към най-важната стъпка. Създаване на JavaScript файл, който ще съдържа целия код на React. Обадете се на този app.js.

Така че сега, след като сте отстранили всичко това, към основното събитие. Показване на всички нови наети в Dom с помощта на JSX

Първо ще трябва да създадете масив с имената на новите наети.

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

Оттам ще трябва да създадете React елемент, който динамично ще изобразява целия списък с имена. Това без да се налага да показвате ръчно всеки един.

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

Ключовото нещо, което трябва да се отбележи тук, е, че не е необходимо да създавате отделни <li> елементи. Трябва само да опишете как искате да изглеждат веднъж и React ще се справи с останалото. Това е доста мощно нещо. Докато имате само няколко имена, представете си, че имате списък със стотици хиляди! Можете да видите как това би било много по-добър подход. Особено аз f thд

  • елементите са по-сложни от използваните тук.

    Последният бит код, който е необходим за изобразяване на съдържанието на екрана, е основната функция за рендиране на ReactDom.

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

    Тук казвате на React да изобрази съдържанието displayNewHiresотвътре divс елемент на root.

    Ето как трябва да изглежда окончателният ви React код:

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

    Едно ключово нещо, което трябва да имате предвид тук, е, че всичко това е кодът на React. Това означава, че всичко ще се компилира до обикновен стар JavaScript. Ето как в крайна сметка ще изглежда:

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

    Това е всичко. Вече имате просто приложение React, което ще покаже списък с имена. Няма за какво да пишете вкъщи, но трябва да ви даде поглед върху това, на което React е способен.

    Шаблони на Vue.js

    В съответствие с последния пример, вие отново ще създадете просто приложение, което ще покаже списък с имена в браузъра.

    Първото нещо, което трябва да направите, е да създадете друг празен файл index.html. Вътре в този файл ще създадете друг празен divс идентификатор на root. Имайте предвид обаче, че коренът е само лично предпочитание. Можете да извикате идентификатора, както искате. Трябва само да се уверите, че той съвпада по-късно, когато синхронизирате html с вашия JavaScript код.

    Този div ще функционира както в React. Той ще каже на JavaScript библиотеката, в този случай Vue, къде да търси в DOM, когато иска да започне да прави промени.

    След като приключите, ще създадете JavaScript файл, който ще съхранява целия код на Vue. Наречете го app.js, за да останете последователни.

    Така че, след като вече имате готови файлове, нека да разберем как Vue показва елемента в браузъра.

    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!