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

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

474 aulas
20 projetos
39h 27min

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!

Um bloco curto com subtítulo em pergunta, tipo ‘O que é a extensão .jsx?’, explicando de forma qualitativa o que o nome representa: JSX é aquela sintaxe que mistura marcação parecida com HTML dentro do JavaScript no React, e o .jsx só sinaliza pro dev (e pra alguns editores) que aquele arquivo carrega esse tipo de código. Sem citar número, só o conceito.

Um bloco prático com subtítulo tipo ‘Quando faz sentido usar .jsx?’, em linhas curtas, recapitulando de forma qualitativa: use .jsx quando quiser deixar explícito que o arquivo tem JSX e aproveitar melhor autocomplete/highlight em alguns editores; fique no .js quando o time já padronizou assim ou quando o arquivo é lógica pura sem marcação. Reforçar a regra de ouro: escolher um padrão e não ficar alternando no projeto.

Um pequeno FAQ com 2 a 3 perguntas curtas e respostas qualitativas, cada uma respondendo sozinha: ‘Preciso renomear meus .js para .jsx?’ (não, o resultado é o mesmo, é opção de padrão), ‘Usar .jsx muda o desempenho do app?’ (não muda funcionalidade nem comportamento, transpilers tratam igual), ‘Componente React precisa terminar em .jsx?’ (não precisa, pode ser .js). Sem nenhum dado numérico.