ReactJS - .JS vs .JSX

211

Il y a quelque chose que je trouve très déroutant lorsque je travaille React.

Il existe de nombreux exemples disponibles sur Internet qui utilisent des .jsfichiers avec react mais de nombreux autres utilisent des .jsxfichiers.

J'ai lu des .jsxfichiers et je crois comprendre qu'ils vous permettent juste d'écrire des balises html dans votre fichier javascript. Mais la même chose peut également être écrite dans des .jsfichiers.

Quelle est donc la différence réelle entre ces deux extensions .jset .jsx?

reactjs jsx confusedDeveloper
la source

Réponses:

172

Il n'y en a pas quand il s'agit d'extensions de fichiers. Votre bundler / transpiler / n'importe quoi s'occupe de résoudre le type de contenu du fichier.

Il y a cependant quelques autres considérations pour décider quoi mettre dans un .jsou un .jsxtype de fichier. Étant donné que JSX n'est pas du JavaScript standard, on pourrait faire valoir que tout ce qui n'est pas "simple" JavaScript devrait aller dans ses propres extensions, c'est-à-dire .jsxpour JSX et .tspour TypeScript par exemple.

Il y a une bonne discussion ici disponible pour lecture

Henrik Andersson
la source
6
Joli lien! Pour moi, cette discussion est également intéressante!
Felipe Augusto
1
Bien dit. JSX n'est ni JS ni HTML, donc lui donner sa propre extension aide à indiquer ce que c'est - même si l'utilisation .jsxn'est pas une exigence
STW
35

Dans la plupart des cas, ce n'est qu'un besoin du transpilateur / bundler, qui peut ne pas être configuré pour fonctionner avec des fichiers JSX, mais avec JS! Vous êtes donc obligé d'utiliser des fichiers JS au lieu de JSX.

Et comme react n'est qu'une bibliothèque pour javascript, cela ne fait aucune différence pour vous de choisir entre JSX ou JS. Ils sont complètement interchangeables!

Dans certains cas, les utilisateurs / développeurs peuvent également choisir JSX plutôt que JS, en raison de la mise en évidence du code, mais la plupart des nouveaux éditeurs affichent également correctement la syntaxe de réaction dans les fichiers JS.

marpme
la source
27

Les balises JSX ( <Component/>) ne sont clairement pas du javascript standard et n'ont aucune signification particulière si vous les mettez dans une <script>balise nue par exemple. Par conséquent, tous les fichiers React qui les contiennent sont JSX et non JS.

Par convention, le point d'entrée d'une application React est généralement .js au lieu de .jsx même s'il contient des composants React. Cela pourrait aussi bien être .jsx. Tous les autres fichiers JSX ont généralement l'extension .jsx.

Dans tous les cas, la raison de cette ambiguïté est que, finalement, l'extension n'a pas beaucoup d'importance car le transpilateur heurte volontiers tous les types de fichiers tant qu'ils sont en réalité JSX.

Mon conseil serait: ne vous en faites pas.

jlaitio
la source
Même var elem = <div>Text</div>;n'est pas un élément html standard; il ne prend pas en charge appendChild, classListet probablement d'autres fonctionnalités html. Si vous voulez des balises html directement en javascript, il est préférable d'utiliser le modèle littéral (le backtick `) avec innerHtmlou outerHtml.
Penseur stratégique
7

Outre le fait que les balises JSX ne sont pas du javascript standard, la raison pour laquelle j'utilise l'extension .jsx est qu'Emmet fonctionne toujours dans l'éditeur - vous savez, ce plugin utile qui étend le code html, par exemple ul> li en

<ul>
  <li></li>
</ul>
Gabriel Vasile
la source
Il est possible d'utiliser Emmet pour les fichiers .js dans Visual Studio Code en ajoutant ce qui suit à votre settings.json "emmet.includeLanguages": { "javascript": "javascriptreact" }:, mais oui, je suis d'accord que le code JSX devrait utiliser l'extension .jsx si possible.
Thomas Higginbotham
6

Comme d'autres mentionnés, ce JSXn'est pas une extension Javascript standard. Il est préférable de nommer votre point d'entrée d'application en fonction .jset pour les autres composants que vous pouvez utiliser .jsx.

J'ai une raison importante pour laquelle j'utilise .JSXpour tous les noms de fichiers des composants. En fait, dans un projet à grande échelle avec un énorme tas de code, si nous définissons tous les composants de React avec une .jsxextension, il sera plus facile de naviguer vers différents fichiers javascript à travers le projet (comme les assistants, les middleware, etc.) et vous savez que c'est un composant React et pas d'autres types de fichier javascript.

Siavash
la source
4

JSX n'est pas du JavaScript standard, basé sur le guide de style Airbnb 'eslint' pourrait considérer ce modèle 

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

comme avertissement, si vous avez nommé votre fichier MyComponent.jsx, il passera, sauf si vous modifiez la règle eslint, vous pouvez consulter le guide de style ici

Majid Eltayeb
la source