ReactJS - .JS против .JSX

Есть кое-что, что я нахожу очень запутанным при работе React.

Есть много примеров, доступных в Интернете, которые используют .jsфайлы с реакцией, но многие другие используют .jsxфайлы.

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

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

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

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

Здесь есть хорошая дискуссия для чтения

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

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

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

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

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

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

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

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

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

Как уже упоминалось, JSXэто не стандартное расширение Javascript. Лучше назвать вашу точку входа приложения на основе .jsи для остальных компонентов, вы можете использовать.jsx .

У меня есть важная причина, почему я использую .JSXдля всех имен файлов компонентов. На самом деле, в крупномасштабном проекте с огромным количеством кода, если мы установим все компоненты React с .jsxрасширением, это будет проще при переходе к различным файлам javascript по всему проекту (например, помощникам, промежуточному программному обеспечению и т. Д.), И вы знаете, что это компонент React, а не другие типы файлов javascript.

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

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

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