ReactJS -.JS vs .JSX

Что-то меня очень смущает, когда я работаю в React.

В интернете есть множество примеров использования файлов .js с .jsx но многие другие используют файлы .jsx.

Я читал о файлах .jsx и я понимаю, что они просто позволяют вам писать HTML-теги в вашем javascript. Но то же самое можно записать и в файлы .js.

Так в чем же разница между этими двумя расширениями .js и .jsx?

Ответ 1

В расширениях файлов нет. Ваш передатчик/транспилер/независимо от того, как решить, какой тип содержимого файла есть.

Однако существуют некоторые другие соображения при выборе того, что нужно помещать в тип файла .js или .jsx. Поскольку JSX не является стандартным JavaScript, можно утверждать, что все, что не является "простым" JavaScript, должно идти в свои собственные расширения, т.е. .jsx для JSX и .ts для TypeScript например.

Там хорошее обсуждение здесь доступно для чтения

Ответ 2

В большинстве случаев это всего лишь потребность в транспилере/комплекте, который не может быть настроен для работы с файлами JSX, но с JS! Таким образом, вы вынуждены использовать JS файлы вместо JSX.

И так как реакция - это просто библиотека для javascript, для вас нет никакой разницы между JSX или JS. Theyre полностью взаимозаменяемы!

В некоторых случаях пользователи/разработчики также могут выбирать JSX поверх JS из-за выделения кода, но большинство новых редакторов также правильно просматривают синтаксис ответов в JS файлах.

Ответ 3

JSX-теги (<Component/>) явно не являются стандартными javascript и не имеют особого значения, если вы помещаете их в открытый тег <script>, например. Следовательно, все файлы React, содержащие их, это JSX, а не JS.

По соглашению, точкой входа приложения React обычно является .js вместо .jsx, хотя он содержит компоненты React. Это также может быть .jsx. Любые другие файлы JSX обычно имеют расширение .jsx.

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

Мой совет: не беспокойтесь об этом.

Ответ 4

Помимо упомянутого факта, что теги JSX не являются стандартным javascript, я использую расширение .jsx, потому что с ним Эммет все еще работает в редакторе - вы знаете, этот полезный плагин, который расширяет HTML-код, например, ul> li в

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

Ответ 5

JSX не является стандартным JavaScript, основанным на руководстве по стилю Airbnb 'eslint' может рассмотреть этот шаблон

    // filename: MyComponent.js
function MyComponent() {
  return <div />;
}

в качестве предупреждения, если вы назвали свой файл MyComponent.jsx, он пройдет, если только вы не отредактируете правило eslint, вы можете проверить руководство по стилю здесь