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?
Respostas:
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.
.jsxnão seja um requisito
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.
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.
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.
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>"emmet.includeLanguages": { "javascript": "javascriptreact" }:, mas sim, concordo que o código JSX deve usar a extensão .jsx, se possível.
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.
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