В чем разница файлов js и jsx если синтаксис jsx работает в JavaScript?

Question

Недавно начал изучать React. Расскажите в чем разница файлов js и jsx если синтаксис jsx работает в JavaScript?

Простой пример, и что меня смущает, что я пишу код в JavaScript:

const message = "Hello, World!";
console.log(message);

и

const element = <h1>Hello, World!</h1>;

А оно все работает без проблем в файле js, зачем тогда jsx ?

Вот ещё код, он отлично работает в файле js, поэтому не понимаю, нужно ли вообще использовать jsx?

import React from 'react';
import '../fetch/fetch.css';

const CurrencyBlock = ({ currency }) => {
  console.log ("re-render CurrencyBlock");
  return (
    <div className='block'>
      <h1>{currency.CharCode}</h1>
      <p>{currency.Name}</p>
      <p>Курс: {currency.Value} RUB</p>
    </div>
  );
};

export default CurrencyBlock;

Answer 1

jsx назвали, по аналогии с jspx. Так как фрагменты jspx кода принято задавать с помощью этого расширения. Jsx можно также считать как фрагменты js кода, и отдеяют чистый js от react.

Почему JSX?

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

Вместо того, чтобы искусственно разделять технологии, помещая разметку и логику в отдельные файлы, React разделяет проблемы с помощью слабосвязанных единиц, называемых «компонентами», которые содержат и то, и другое. Мы вернемся к компонентам в следующем разделе, но если вы пока не чувствуете себя комфортно, размещая разметку в JS, этот доклад может убедить вас в обратном.

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

БЛОГ НА HUSL

В чем разница файлов js и jsx если синтаксис jsx работает в JavaScript?

Ответы (1 шт):

Почему JSX?