Oi, Felipe! Tudo bem?

Não é uma obrigatóriedade escrever com extensão JSX, é apenas uma opção mesmo mas que é justificável e vou te explicar brevemente o porquê.

O JSX é uma extensão da linguagem JavaScript que é usada pelo React para criar interfaces de usuário. Com ele, você consegue misturar código JavaScript com sintaxe de HTML, o que permite escrever componentes de interface de usuário em um único arquivo, tornando a experiência de quem escreve muito melhor e mais fácil.

Por exemplo, quando você utiliza a extensão js ao invés de jsx o Visual Studio Code para de te dar sugestões de tags ou completar/fechar automaticamente as tags do seu código HTML nos componentes React. Isso parece bobagem, mas imagine que você precisa escrever componentes de UI que possuem uma estrutura html robusta. Fazer isso digitando tag por tag é bem chato e cansativo. Com jsx automaticamente a sua IDE pode autocompletar, fornecer sugestões e fechar automaticamente essas tags.

Existem outras vantagens de utilizar o jsx e não apenas js, e se quiser conhecer um pouco mais delas eu sugiro que leia a documentação do React sobre o JSX.

Grande abraço!

Neilsonn, que brabo isso mano, realmente eu fiz o teste e funcionou!! Isso era uma das coisas que não estava gostando do react pois me parecia que ele tirava o poder de completar da minha IDE, mas agora tudo voltou a funcionar, isso não pode passar batido, Obrigado irmão!!