ReactJS - .JS vs .JSX

Question

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

Il y a beaucoup d'exemples disponibles sur internet qui utilisent .js avec react mais beaucoup d'autres utilisent .jsx des fichiers.

J'ai lu des articles sur .jsx et si j'ai bien compris, ils vous permettent simplement d'écrire des balises html dans vos fichiers javascript . Mais la même chose peut être écrite en .js également.

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

Answer 1

Il n'y en a pas lorsqu'il s'agit d'extensions de fichiers. Votre bundler/transpiler/quelque chose se charge de déterminer le type de contenu du fichier.

Il y a cependant d'autres éléments à prendre en compte pour décider de ce qu'il convient de mettre dans une .js ou un .jsx type de fichier. Puisque JSX n'est pas du JavaScript standard, on pourrait dire que tout ce qui n'est pas du JavaScript "ordinaire" devrait être placé dans ses propres extensions, c'est-à-dire.., .jsx pour JSX et .ts pour TypeScript par exemple.

Il y a un bonne discussion ici disponible pour la lecture

Answer 2

Dans la plupart des cas, il s'agit seulement d'un besoin pour le transpiler/bundler, qui peut ne pas être configuré pour travailler 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 éditeurs récents affichent également la syntaxe react correctement dans les fichiers JS.

Answer 3

Balises JSX ( <Component/> ) ne sont manifestement pas des éléments standard de javascript et n'ont aucune signification particulière si vous les placez à l'intérieur d'une page nue. <script> par exemple. Par conséquent, tous les fichiers React qui les contiennent sont des JSX et non des JS.

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

Quoi qu'il en soit, la raison de cette ambiguïté est qu'en fin de compte, l'extension n'a pas beaucoup d'importance puisque le transpilateur se contente d'avaler n'importe quel type de fichier tant qu'il s'agit de JSX.

Mon conseil est le suivant : ne vous en faites pas.

Answer 4

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

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

Answer 5

JSX n'est pas du JavaScript standard, d'après le guide de style Airbnb, 'eslint' pourrait prendre en compte ce modèle.

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

à titre d'avertissement, si vous nommez votre fichier MyComponent.jsx, il passera, à moins que vous ne modifiiez la règle eslint. vous pouvez vérifier le guide de style aquí