Qual a diferença de .js e .jsx em ReactJS

Neste artigo você vai aprender qual a diferença de .js e .jsx em ReactJS, qual extensão você deve utilizar .js ou .jsx?

Fala programador(a), beleza? Bora aprender mais sobre as extensões de arquivos de ReactJS!

O primeiro ponto que temos que entender, e mais importante, é que a extensão do arquivo não importa neste caso

Utilizando .js ou .jsx atingiremos o mesmo resultado, quando tratamos de funcionalidades do React

Transpilers, como o Babel, ou bundlers, que são os recursos que transformam o código de React para serem utilizados no browser

Vão interpretar os dois tipos de arquivo da mesma forma, então você pode utilizar qualquer um deles

Tenha apenas o cuidado de seguir um padrão em um projeto, e não ficar alternando

Discussões sobre o js x jsx

Há discussões na comunidade que dizem que por o arquivo de React não ser JavaScript puro ele não pode ter a extensão .js

E temos que aplicar o .jsx, pois se trata de algo diferente do que as pessoas esperam ao se deparar com arquivos de JS vanilla

Editores de código

Alguns editores de código, como VS Code, podem vir mais preparado por padrão para uma ou outra extensão

Por exemplo: se você utilizar .jsx, pode ser que tenha vantagens no autocomplete das tags e também no highlight do código

Então por questões estéticas pode também ser vantajoso

Conclusão

Neste artigo você aprendeu a diferença de .js e .jsx

Como vimos, não há mudança alguma nas funcionalidades desempanhadas por ambas extensões

Você pode utilizar qualquer uma nos seus projetos de ReactJS

Porém há algumas abordagens mais teóricas, que sugerem o uso do .jsx

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos!