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

212

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

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

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

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

reactjs jsx

— confusedDeveloper
источник

173

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

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

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

— Хенрик Андерссон
источник

6

Хорошая ссылка! Для меня это обсуждение тоже кое-что интересное!

— Фелипе Аугусто

1

Хорошо сказано. JSX не является ни JS, ни HTML, поэтому его собственное расширение помогает определить, что это такое - даже если его использование .jsxне является обязательным

— STW

36

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

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

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

— marpme
источник

28

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

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

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

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

— jlaitio
источник

Даже var elem = <div>Text</div>;не является стандартным элементом HTML; он не поддерживает appendChild, classListи, вероятно, другие функции HTML. Если вы хотите использовать html-теги непосредственно в javascript, лучше использовать литерал шаблона (backtick `) вместе с innerHtmlили outerHtml.

— Стратегический мыслитель

7

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

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

— Габриэль Василе
источник

Можно использовать Emmet для файлов .js в коде Visual Studio, добавив в файл settings.json следующее:, "emmet.includeLanguages": { "javascript": "javascriptreact" }но да, я согласен, что в коде JSX должно использоваться расширение .jsx, если это возможно.

— Томас Хиггинботам

6

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

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

— Siavash
источник

4

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

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

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

— Маджид Эльтаиб
источник