[Dúvida] Criação de Componentes

Olá Cristian, tudo bem?

É muito comum termos diferentes formas de criar e arquitetar componentes em React, e isso pode variar de acordo com a preferência de cada desenvolvedor ou equipe.

A primeira forma que você mencionou, com o arquivo "index.tsx", é uma forma de organizar os arquivos de um componente em uma única pasta, onde o arquivo "index.tsx" é o ponto de entrada para o componente. Já a segunda forma, com o arquivo "Input.tsx", é uma forma mais direta de nomear o arquivo principal do componente.

Ambas as formas são válidas e podem ser usadas em diferentes situações. A escolha pode depender de fatores como o tamanho do projeto, a preferência da equipe, a facilidade de manutenção e a clareza do código. Vou te dar um exemplo do porquê eu gosto de usar a forma 1 mais do que a forma 2.

Quando eu importo este componente, eu vou ter um caminho de importação assim, por exemplo:

import Input from './components/Input'

Isso para a primeira forma. Já para a segunda forma é comum que fique dessa maneira:

import Input from './components/Input/Input'

Percebeu? Algumas IDE's omitem o nome do arquivo se ele for index, então fica bem mais legível e fácil de compreender com uma primeira olhada. Eu recomendo você usar a segunda forma, por exemplo, se dentro da pasta components você tiver um arquivo index que exporte todos os componentes que você tiver, algo assim:

// componentes/index.js
import Cabecalho from 'componentes/Input/Input';
import Menu from 'componentes/Label/Label';
import Cartao from 'componentes/Modal/Modal';

export { Label, Input, Modal };

E quando for importar poder importar assim:

import { Label, Input, Modal } from './componentes';

Melhora ainda mais a legibilidade não é? Isso pode ser feito em ambos os casos mas depende muito de preferência, padrão do time, etc.

No mercado, é comum encontrar projetos que utilizam ambas as formas de criação de componentes. O importante é escolher uma forma que seja coerente com a arquitetura do projeto e que facilite a manutenção e a escalabilidade do código.

Espero ter ajudado e bons estudos!

Show de bola, valeu!!