Duvida exportBom dia, Eu gostaria de entender o porque de criar um arquivo index ele fala no video que nesse formato não precisamos fazer oexport porém no aquivo fazemos o exprt, outra coisa tabém é esse export no final da linha o que ele significa.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Duvida exportBom dia, Eu gostaria de entender o porque de criar um arquivo index ele fala no video que nesse formato não precisamos fazer oexport porém no aquivo fazemos o exprt, outra coisa tabém é esse export no final da linha o que ele significa.
Olá bom diaa :) Sempre que criarmos um componente, para podermos utilizá-lo iremos precisar exportá-lo e fazer o import onde vamos precisar usar.
Podemos exportar um componente de duas formas: como export default ou export comum.
Vou mostrar dois exemplos:
const Titulo = () => {
return (
<h1>Olá!</h1>
)
}
export default Titulo;
Estamos exportando esse componente como padrão, default. Para importar num outro local, fazemos:
import Titulo from ".. caminho do arquivo aqui ";
Ao importar um export default, não precisa de chaves. Cada arquivo só pode ter um único export default.
Outra forma de fazer isso é:
export const Titulo = () => {
return (
<h1>Olá!</h1>
)
}
Estamos criando o componente e já adicionando o export. Podem ter vários desses num mesmo arquivo.
Ao importar você deve fazer: import { Titulo } from ".. caminho do arquivo aqui"
Precisa usar as chaves ao importar esse tipo de export.
Agora a questão do index é o seguinte: Se você criar uma pasta Header, por exemplo, e dentro um arquivo Header.jsx que é o componente em si, ao importar você vai precisar passar todo o caminho incluindo o Header.jsx do final. Algo assim:
"../componentes/Header/Header.jsx";
Ao invés disso, é um padrão criar uma pasta Header e o componente em si ser chamado index.jsx. Ao fazer isso, podemos reduzir o caminho da importação, mantendo apenas: "../componentes/Header"
Pois ele já compreende que o que estamos buscando é o index.jsx.
Agora, independente de você criar este componente chamando ele de Header.jsx ou index.jsx você precisará exportar (seja default ou padrão) e importar onde você for utilizar.
Espero que tenha dado para compreender!