Что-то меня очень смущает, когда я работаю в React.
В интернете есть множество примеров использования файлов .js с .jsx но многие другие используют файлы .jsx.
Я читал о файлах .jsx и я понимаю, что они просто позволяют вам писать HTML-теги в вашем javascript. Но то же самое можно записать и в файлы .js.
Так в чем же разница между этими двумя расширениями .js и .jsx?
В расширениях файлов нет. Ваш передатчик/транспилер/независимо от того, как решить, какой тип содержимого файла есть.
Однако существуют некоторые другие соображения при выборе того, что нужно помещать в тип файла .js или .jsx. Поскольку JSX не является стандартным JavaScript, можно утверждать, что все, что не является "простым" JavaScript, должно идти в свои собственные расширения, т.е. .jsx для JSX и .ts для TypeScript например.
В большинстве случаев это всего лишь потребность в транспилере/комплекте, который не может быть настроен для работы с файлами JSX, но с JS! Таким образом, вы вынуждены использовать JS файлы вместо JSX.
И так как реакция - это просто библиотека для javascript, для вас нет никакой разницы между JSX или JS. Theyre полностью взаимозаменяемы!
В некоторых случаях пользователи/разработчики также могут выбирать 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, основанным на руководстве по стилю Airbnb 'eslint' может рассмотреть этот шаблон
// filename: MyComponent.js
function MyComponent() {
return <div />;
}
в качестве предупреждения, если вы назвали свой файл MyComponent.jsx, он пройдет, если только вы не отредактируете правило eslint, вы можете проверить руководство по стилю здесь