Что, черт возьми, JSX и почему вы должны использовать его, чтобы построить свои реагистрационные приложения

Автор оригинала: FreeCodeCamp Community Member.

Райан Харрис

Как разработчики, мы используем различные инструменты и пакеты с открытым исходным кодом, чтобы упростить нашу работу. Некоторые из них настолько широко используются во всем сообществе, что они кажутся родными для JavaScript. Но они нет, и они могут Принципиально изменить, как вы пишете код ежедневно.

Одна из этих технологий, которые вы, вероятно, используете уже, это JSX – XML, как расширение синтаксиса для JavaScript Отказ Создано командой в Facebook, она предназначена для упрощения опыта разработчика. Как говорит спецификация, обоснование для создания JSX было:

Теперь вы, вероятно, говорите себе, «Эй, Райан, это звучит великолепно, но добраться до кода уже », так что вот наш первый пример.

const helloWorld = Hello, World!
;

Вот и все!

Вышеупомянутой фрагмент кода выглядит знакомым, но вы когда-нибудь перестали думать о своей власти? JSX делает это, чтобы мы могли Проезжать вокруг конструкций деревьев, состоящие из HTML или React Elements Как будто они были стандартными значениями JavaScript.

Хотя вам не нужно использовать JSX при записи React ( или используйте реагирование, чтобы попробовать JSX ), нет отрицания, это важная часть экосистемы реагирования, поэтому давайте погрузиться и посмотрим, что происходит под капот.

Начало работы с jsx

Первое, что следует обратить внимание при использовании синтаксиса JSX, это реагирование должно быть в объеме. Это связано с тем, как он скомпилирован. Возьмите этот компонент, например:

function Hello() {  return Hello, World!
}

За кулисами каждый элемент, представленный Привет Компонент транспортируется в Rect.Createelement вызов.

В таком случае:

function Hello() {  return React.createElement("h1", {}, "Hello, World!")}

То же самое верно для вложенных элементов. Два примера ниже в конечном итоге сделают ту же разметку.

// Example 1: Using JSX syntaxfunction Nav() {  return (          Home
      About
      Portfolio
      Contact
    
  );}

// Example 2: Not using JSX syntaxfunction Nav() {  return (    React.createElement(      "ul",      {},      React.createElement("li", null, "Home"),      React.createElement("li", null, "About"),      React.createElement("li", null, "Portfolio"),      React.createElement("li", null, "Contact")    )  );}

Отреагировать

При реакции создают элементы, он вызывает этот метод, который занимает три аргумента.

Имя элемента
Объект, представляющий реквизиты элемента
Массив детей элемента

Одно следует отметить, что реакция интерпретация строчных элементов в виде HTML и Pascal Case (Ex. Isispascalcase) элементы как пользовательские компоненты. Из-за этого следующие примеры будут истолкованы по-разному.

// 1. HTML elementReact.createElement("div", null, "Some content text here")

// 2. React elementReact.createElement(Div, null, "Some content text here")

Первый пример будет генерировать IV> с S Tring «Некоторые контент текста здесь» как его ребенок. Тем не менее, вторая версия бросила ошибку (если, конечно, пользовательский комп Oneent & Lt; div/> был в SCO PE) BEC AUSE

не определен.

Реквизит в JSX.

При работе в реакции ваши компоненты часто визуализируют детей и должны передавать их данные, чтобы дети могли правильно рендерировать. Это называются реквизитами.

Мне нравится думать о комментариях реагирования как группу друзей. А что делают друзья? Они Дайте друг другу реквизиты Отказ К счастью, JSX предлагает нам ряд способов сделать это.

// 1. Props defaulted to true

// 2. String literals

// 3. JavaScript expressions

// 4. Spread attributes

Но остерегайтесь! Вы не можете пройти отказаться или за циклами как реквизиты, потому что они заявления, не выражения Отказ

Дети в JSX.

Поскольку вы создаете свое приложение, вы в конечном итоге начну начать компоненты рендеринга детей. И тогда эти компоненты иногда должны оказывать детей. И так далее.

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

Есть четыре способа рендеринга детей с использованием JSX:

Строки

Это самый простой пример JSX детей. В следующем случае React создает < H1> HTML-элемент с одним ребенком. Ребенок, однако, не является еще одним HTML-элементом, просто простая строка.

function AlertBanner() {  return (    Your bill is due in 2 days
  )}

Jsx элементы

Вероятно, это использование случая, когда новые разработчики реагирования будут наиболее знакомыми. В приведенном ниже компоненте мы возвращаем HTML-ребенок ( er>), который имеет двоих детей собственные и LT; NA V/> и & l T; Profilepic/> Оба из которых являются пользовательскими определенными элементами JSX.

function Header(props) {  return (          
          
  )}

Выражения

Выражения позволяют нам легко рендерировать элементы в нашем интерфейсе UI, которые являются результатом вычисления JavaScript. Простой пример этого был бы базовым дополнением.

Скажем, у нас есть компонент под названием /> Это оказывает информацию о счете или квитанции. Давайте предположим, что это требует одного опоры C Считал Всего, что представляет собой стоимость до налогов и другой Подп-т AXRATE, который представляет собой применимую ставку налога.

Использование выражений, мы можем легко выдавать некоторую полезную информацию для наших пользователей!

function BillFooter(props) {  return (          Tax: {props.total * props.taxRate}
      Total: {props.total + props.total * props.taxRate}
    
  );}

Функции

С помощью функций мы можем программно создавать элементы и структуры, которые реагируют, затем будут рендер для нас. Это позволяет легко создавать несколько экземпляров компонента или рендеринга повторяющихся элементов пользовательского интерфейса.

В качестве примера давайте использовать JavaScript’s .map () Функция для создания навигационной панели.

// Array of page informationconst pages = [  {    id: 1,    text: "Home",    link: "/"  },  {    id: 2,    text: "Portfolio",    link: "/portfolio"  },  {    id: 3,    text: "Contact",    link: "/contact"  }];// Renders a  with programmatically created  childrenfunction Nav() {  return (          {pages.map(page => {        return (                      {page.text}          
        );      })}    
  );}

Теперь, если мы хотим добавить новую страницу на наш сайт, все, что нам нужно сделать, это добавить новый объект для Страницы Массив и реагирование позаботится о остальных!

Примите к сведению ключ опора Отказ Наша функция возвращает массив элементов брата, в этом случае < Li> S и React нуждается в способе отслеживания того, какие крепления, размонтируют или обновления. Для этого он зависит от этого уникального идентификатора для каждого элемента.

Используйте инструменты!

Конечно, вы можете написать приложения React без JSX, но я не уверен, что вы хотите.

Способность JSX дает нам проходить вокруг элементов в JavaScript, как будто они были гражданина первого класса хорошо поддаются работе с остальной частью экосистемы реагирования. На самом деле, на самом деле, вы, возможно, писали это каждый день и даже не знают его.

Итог: просто используйте JSX. Вы будете счастливы, что вы сделали.

Hello, World!