В чем разница между JavaScript и JSX?

Ответ 1

JS - это стандартный javascript, JSX - это HTML-подобный синтаксис, который вы можете использовать с React, чтобы (теоретически) сделать создание компонентов React более простым и интуитивно понятным. Как сказано в документации, единственная цель - облегчить создание компонентов React... там не так много другого. Без JSX создание больших вложенных HTML-документов с использованием синтаксиса JS было бы большой проблемой в тылу; JSX просто упрощает этот процесс.

Ответ 2

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

Чтобы дать вам ясный пример, попробуйте посмотреть следующий JSX-код, который он скомпилировал в JS через Babel:

import React from 'react';

var Foo = React.createClass({
  render() {
    return (
      <div>
        <p>
          Ad postea vocent equidem.
        </p>
      </div>
    );
  }
});

Ответ 3

JSX - это расширение синтаксиса, подобное XML, для ECMAScript и необязательно связанное с React вообще. Реакт - это просто транспилер, двигатель, который превращает дерево JSX в действительный JavaScript. Существуют и другие транспилеры типа React, которые также имеют синтаксис JSX, JSXDom и MercuryJSX. JSX не соответствует какой-либо спецификации XML или HTML или вообще не относится к ECMAScript и был изобретен в Facebook.

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

Ответ 4

По умолчанию каждый синтаксис JSX превращается в вызовы функций JS, то есть изменяется на Javascript.

JSX помогает писать гораздо более простой и понятный код.

Пример:

Код JSX:

const App = () => {
    return <div>Hello world!</div>
}

Эквивалентный код JS:

const App = () => {
  return React.createElement("div", null, "Hello world!");
};

Вы можете проверить Babel - компилятор JavaScript. выберите пункт "реагировать" в опции "пресеты", чтобы увидеть, как на самом деле получается каждая строка.