ReactJS - .JS vs .JSX

211

У роботі я щось дуже заплутано React.

В Інтернеті є багато прикладів, які використовують .jsфайли з реагуванням, але багато інших використовують .jsxфайли.

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

Тож яка фактична різниця між цими двома розширеннями .jsта .jsx?

reactjs jsx

— заплутаний розробник
джерело

172

Коли мова йде про розширення файлів, його немає. Ваш постачальник / транспілер / що завгодно дбає про вирішення того, який тип файлу є.

Однак є деякі інші міркування при вирішенні питання, що потрібно вводити у тип .jsабо .jsxтип файлу. Оскільки JSX не є стандартним JavaScript, можна стверджувати, що все, що не є "звичайним" JavaScript, повинно входити у власні розширення, наприклад, .jsxдля JSX та .tsTypeScript.

Тут хороша дискусія доступна для читання

— Генрік Андерссон
джерело

6

Приємне посилання! Для мене ця дискусія - це теж щось цікаве!

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

1

Добре сказано. JSX не є ні JS, ні HTML, тому надання йому власного розширення допомагає вказати, що це таке - навіть якщо використання .jsxне є вимогою

— STW

35

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

А оскільки react - це лише бібліотека для javascript, то для вас не має ніякої різниці вибирати між JSX або JS. Вони повністю взаємозамінні!

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

— marpme
джерело

27

Теги 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 в тому, що з ним Emmet все ще працює в редакторі - ви знаєте, корисний плагін, який розширює 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 у межах проекту (наприклад, помічників, середнього програмного забезпечення тощо), і ви знаєте, що це Реактивний компонент, а не інші типи файлу javascript.

— Сіаваш
джерело

4

JSX не є стандартним JavaScript, на основі посібника зі стилю Airbnb 'eslint' може розглянути цей шаблон

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

як попередження, якщо ви назвали свій файл MyComponent.jsx, він пройде, якщо ви не редагуєте правило eslint, ви можете перевірити керівництво по стилю тут

— Маджид Елтаєб
джерело