JSX в React и шаблоны 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. Затем вы должны добавить следующие строки кода.

<ul>
  <li> John </li>
  <li> Sarah </li>
  <li> Kevin </li>
  <li> Alice </li>
<ul>

Ничего особенного, просто HTML-код.

Итак, как бы вы сделали то же самое, используя JSX? Первым шагом будет создание еще одного файла index.html. Но вместо того, чтобы добавлять полный HTML-код, как раньше, вы добавите только простой элемент div. Этот div будет элементом контейнера, в котором будет отображаться весь ваш код React.

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

<div id=root></div>

Теперь о самом важном. Создание файла JavaScript, который будет содержать весь код React. Назовите это app.js.

Итак, теперь, когда у вас есть все это, перейдем к главному событию. Отображение всех новых сотрудников в Dom с помощью JSX

Сначала вам нужно создать массив с именами новых сотрудников.

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

Оттуда вам нужно будет создать элемент React, который будет динамически отображать весь список имен. Это без необходимости вручную отображать каждый из них.

const displayNewHires = (
  <ul>
    {names.map(name => <li>{name}</li> )}
  </ul>
);

Здесь важно отметить, что вам не нужно создавать отдельные <li> элементы. Вам нужно только один раз описать, как вы хотите, чтобы они выглядели, а React позаботится обо всем остальном. Это довольно мощная вещь. Хотя у вас всего несколько имен, представьте, что у вас есть список из сотен тысяч! Вы можете видеть, что это было бы намного лучше. Особенно, если <li> элементы более сложные, чем используемые здесь.

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

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

Здесь вы указываете React визуализировать содержимое displayNewHires внутри div с элементом root.

Вот как должен выглядеть ваш окончательный код React:

const names = [‘John’, ‘Sarah’, ‘Kevin’, ‘Alice’];
const displayNewHires = (
  <ul>
    {names.map(name => <li>{name}</li> )}
  </ul>
);
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 отображает элемент в браузере.

Когда дело доходит до манипулирования DOM, Vue использует шаблонный подход. Это означает, что в вашем HTML-файле будет не только пустой div, как в React. На самом деле вы собираетесь написать значительную часть своего кода в HTML-файле.

Чтобы получить лучшее представление, подумайте, что нужно для создания списка имен с использованием простого HTML. Элемент <ul> с некоторыми <li> элементами внутри. В Vue вы собираетесь делать почти то же самое, с добавлением всего нескольких изменений.

Создайте элемент <ul>.

<ul>
</ul>

Теперь добавьте один пустой элемент <li> внутрь элемента <ul>.

<ul>
  <li>
  </li>
</ul>

Пока ничего нового. Измените это, добавив директиву, настраиваемый атрибут Vue, в свой <li> элемент.

<ul>
  <li v-for=’name in listOfNames’>
  </li>
</ul>

Директива - это способ Vue добавлять функции JavaScript прямо в HTML. Все они начинаются с v- и сопровождаются описательными именами, которые дают вам представление о том, что они делают. В данном случае это цикл for. Для каждого имени в вашем списке имен, listOfNames, вы хотите скопировать этот <li> элемент и заменить его новым элементом <li> с именем из вашего списка.

Теперь к коду требуется только один последний штрих. В настоящее время он будет отображать элемент <li> для каждого имени в вашем списке, но вы фактически не указали ему отображать фактическое имя в браузере. Чтобы исправить это, вы собираетесь вставить синтаксис типа усов внутрь элемента <li> . То, что вы, возможно, видели в других библиотеках JavaScript.

<ul>
  <li v-for=’name in listOfNames’>
    {{name}}
  </li>
</ul>

Теперь элемент <li> готов. Теперь он будет отображать каждый элемент в списке с именем listOfNames. Имейте в виду, что слово имя произвольно. Вы могли бы назвать его предметом, и он послужил бы той же цели. Все ключевое слово служит заполнителем, который будет использоваться для перебора списка.

Последнее, что вам нужно сделать, это создать набор данных и фактически инициализировать Vue в вашем приложении.

Для этого вам нужно будет создать новый экземпляр Vue. Создайте его экземпляр, назначив его переменной с именем app.

let app = new Vue({
});

Теперь объект получит несколько параметров. Первый из них самый важный, параметр el (element), который сообщает Vue, где начать добавлять элементы в DOM. Точно так же, как вы сделали с вашим примером React.

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

Последний шаг - добавить данные в приложение Vue. В Vue все данные, передаваемые в приложение, будут передаваться в качестве параметра экземпляра Vue. Кроме того, каждый экземпляр Vue может иметь только по одному параметру каждого типа. Хотя их довольно много, в этом примере вам нужно сосредоточиться только на двух: el и data.

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

Объект данных примет массив с именем listOfNames. Теперь, когда вы хотите использовать этот набор данных в своем приложении, вам нужно только вызвать его с помощью директивы. Все просто, правда?

Вот последняя заявка:

HTML

<div id=”root”>
  <ul>
    <li v-for=’name in listOfNames’>
      {{name}}
    </li>
  </ul>
</div>

JavaScript

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

Заключение

Теперь вы знаете, как создать два простых приложения, используя как React, так и Vue. Оба они предлагают большое количество функций, хотя Vue, как правило, проще в использовании. Также имейте в виду, что Vue позволяет использовать JSX, хотя это не предпочтительный метод реализации.

В любом случае, это две мощные библиотеки, и вы не ошибетесь, используя любую из них.

Если вы нашли эту статью полезной, дайте мне несколько аплодисментов 👏.

И вы можете подписаться на меня в Твиттере здесь!