ReactJS - .JS vs .JSX

211

Há algo que acho muito confuso ao trabalhar React.

Existem muitos exemplos disponíveis na internet que usam .jsarquivos com react, mas muitos outros usam .jsxarquivos.

Eu li sobre .jsxarquivos e meu entendimento é que eles permitem que você escreva tags html dentro do seu javascript. Mas a mesma coisa pode ser escrita em .jsarquivos também.

Então, qual é a diferença real entre essas duas extensões .jse .jsx?

confusedDeveloper
fonte

Respostas:

172

Não há nenhum quando se trata de extensões de arquivo. Seu empacotador / transpiler / o que quer que seja resolve a resolução de que tipo de conteúdo de arquivo existe.

No entanto, existem outras considerações ao decidir o que colocar em um .jsou em um .jsxtipo de arquivo. Como o JSX não é o JavaScript padrão, pode-se argumentar que qualquer coisa que não seja JavaScript "simples" deve ter suas próprias extensões, .jsxpor exemplo , para JSX e .tsTypeScript, por exemplo.

Há uma boa discussão aqui disponível para leitura

Henrik Andersson
fonte
6
Belo link! Para mim, essa discussão também é interessante!
Felipe Augusto
1
Bem dito. O JSX não é JS ou HTML, portanto, fornecer sua própria extensão ajuda a indicar o que é - mesmo que o uso .jsxnão seja um requisito
STW
35

Na maioria dos casos, é apenas necessário o transpiler / bundler, que pode não estar configurado para funcionar com arquivos JSX, mas com JS! Então você é forçado a usar arquivos JS em vez de JSX.

E como o react é apenas uma biblioteca para javascript, não faz diferença para você escolher entre JSX ou JS. Eles são completamente intercambiáveis!

Em alguns casos, os usuários / desenvolvedores também podem escolher JSX em vez de JS, devido ao realce do código, mas a maioria dos editores mais novos também está visualizando a sintaxe de reação corretamente nos arquivos JS.

marpme
fonte
27

As tags JSX ( <Component/>) claramente não são javascript padrão e não têm significado especial se você as colocar dentro de uma <script>tag nua, por exemplo. Portanto, todos os arquivos React que os contêm são JSX e não JS.

Por convenção, o ponto de entrada de um aplicativo React geralmente é .js em vez de .jsx, embora contenha componentes do React. Também poderia ser .jsx. Qualquer outro arquivo JSX geralmente possui a extensão .jsx.

De qualquer forma, a razão pela qual há ambiguidade é que, em última análise, a extensão não importa muito, já que o transpiler felizmente mastiga qualquer tipo de arquivo, desde que na verdade seja JSX.

Meu conselho seria: não se preocupe.

jlaitio
fonte
Even var elem = <div>Text</div>;não é um elemento html padrão; não suporta appendChild, classListe provavelmente outros recursos html. Se você quiser tags html diretamente em javascript, é melhor usar o literal do modelo (o backtick `) junto com innerHtmlou outerHtml.
Strategy Thinker
7

Além do fato mencionado de que as tags JSX não são javascript padrão, a razão pela qual eu uso a extensão .jsx é porque, com ela, o Emmet ainda funciona no editor - você sabe, aquele plugin útil que expande o código html, por exemplo, ul> li para

<ul>
  <li></li>
</ul>
Gabriel Vasile
fonte
É possível usar o Emmet para arquivos .js no Visual Studio Code adicionando o seguinte ao seu settings.json "emmet.includeLanguages": { "javascript": "javascriptreact" }:, mas sim, concordo que o código JSX deve usar a extensão .jsx, se possível.
Thomas Higginbotham
6

Como mencionado anteriormente, JSXnão é uma extensão Javascript padrão. É melhor nomear seu ponto de entrada do Aplicativo com base nos .jscomponentes restantes, e você pode usá-lo .jsx.

Eu tenho um motivo importante para o uso .JSXde todos os nomes de arquivo do componente. Na verdade, em um projeto de larga escala com um monte de códigos, se definirmos todo o componente React com .jsxextensão, será mais fácil navegar para arquivos javascript diferentes no projeto (como auxiliares, middleware etc.) e você saberá que é um componente React e não outros tipos do arquivo javascript.

Siavash
fonte
4

JSX não é JavaScript padrão, com base no guia de estilo do Airbnb 'eslint' poderia considerar esse padrão

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

como aviso, se você nomear seu arquivo como MyComponent.jsx, ele passará, a menos que, se você editar a regra eslint, verifique o guia de estilo aqui

Majid Eltayeb
fonte