Há algo que acho muito confuso ao trabalhar React
.
Existem muitos exemplos disponíveis na internet que usam .js
arquivos com react, mas muitos outros usam .jsx
arquivos.
Eu li sobre .jsx
arquivos e meu entendimento é que eles permitem que você escreva tags html dentro do seu javascript
. Mas a mesma coisa pode ser escrita em .js
arquivos também.
Então, qual é a diferença real entre essas duas extensões .js
e .jsx
?
.jsx
não seja um requisitoNa 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.
fonte
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.
fonte
var elem = <div>Text</div>;
não é um elemento html padrão; não suportaappendChild
,classList
e provavelmente outros recursos html. Se você quiser tags html diretamente em javascript, é melhor usar o literal do modelo (o backtick`
) junto cominnerHtml
ououterHtml
.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
fonte
"emmet.includeLanguages": { "javascript": "javascriptreact" }
:, mas sim, concordo que o código JSX deve usar a extensão .jsx, se possível.Como mencionado anteriormente,
JSX
não é uma extensão Javascript padrão. É melhor nomear seu ponto de entrada do Aplicativo com base nos.js
componentes restantes, e você pode usá-lo.jsx
.Eu tenho um motivo importante para o uso
.JSX
de 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.jsx
extensã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.fonte
JSX não é JavaScript padrão, com base no guia de estilo do Airbnb 'eslint' poderia considerar esse padrão
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
fonte