JSX: В двух словах

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

Мы можем поставить синтаксис JavaScript между компонентом React или HTML-тегом в фигурных скобках. Реагирование не требует использования JSX, но большинство людей считают его полезными в качестве визуальной помощи при работе с UI внутри кода JavaScript. Это также позволяет показывать более полезные ошибки и предупреждающие сообщения.

Например

Поместите переменную в тег HTML в фигурных скобках.

function greeting (props) {
  const text = 'JSX is cool'

  return (
    
 {text} 
 // will show JSX is cool
  );
}

Выражения встраивания в JSX

Вы можете поставить любое действительное выражение JavaScript внутри фигурных скобок в JSX.

function greeting (props) {
  const formatName = (user) => {
    return user.firstName + '' + user.lastName;
  }

  const user = {
    firstName: 'John',
    lastName: 'Doe'
  };

  return (
    
Hello, { formatName(user) }! 
 // will show Hello, John Doe
  );
}

JSX тоже выражение

После компиляции выражения JSX становятся регулярными вызовами функции JavaScript и оценивают на объекты JavaScript. Вы можете использовать JSX внутри, если выступления и для циклов.

function getGreeting(user) {
  if (user) {
    return 
Hello, {formatName(user)}!
;
  }
  return 
Hello, World!
;
}

Указание атрибутов с JSX

Вы можете использовать цитаты для указания строковых литералов в качестве атрибутов или использования фигурных скобок для встраивания экспрессии JavaScript в атрибуте.

const element = 
;

const element = 

Указание детей с JSX

Если тег пуста, вы можете закрыть его сразу с помощью/>, как XML.

const element = ;

Метки JSX могут содержать детей

const element = {
  

    
Hey,
    
JSX is super cool.
  
};

JSX представляет объекты

Babel компилирует JSX вниз, чтобы отреагировать .Createelement () вызовы

const element (
  

    Hello, World!
  
);

const element = Create.reactElement(
  'h3'
  {className: 'greeting'},
  'Hello, World!'
);

Два примера выше являются идентичными.

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

Rect.Createelement () выполняет несколько проверок, которые помогут вам написать код без ошибок, но по существу он создает объект, называемый элементами React. Вы можете думать о них как о описаниях того, что вы хотите увидеть на экране.

Это все на сегодня люди. Счастливый день кодирования!

Оригинал: “https://dev.to/naveens16/jsx-in-a-nutshell-3flg”