Index.html e Index.js

Fala aí Thales, tudo bem? Vamos lá:

A lógica é que ao ser carregado, o arquivo index.js irá começar a renderização da árvore de componentes no HTML do index.html.

Mais especificamente ele vai chamar a função render do ReactDOM:

ReactDOM.render(<App />, document.getElementById('root'))

Repare que estamos pedindo para o ReactDOM renderizar o componente App em um elemento que tenha o id igual à root.

Se você for no index.html pode notar que:

<div id="root"></div>

Temos uma div com id igual à root.

Dessa maneira ele vai renderizar o App que por sua vez pode renderizar mais N componentes que podem renderizar mais N e por ai vai.

Espero ter ajudado.

Sim, eu entendi isso. Mas como o ReactDOM sabe que deve procurar o "root" no index.html? E se eu tivesse outro arquivo html?

Fala mbthales!

Isso é um dos benefícios de se utilizar o create-react-app.

Quem dita o arquivo html é o webpack, um bundler que é configurado pelo create-react-app sem que precisemos definir qualquer configuração.

Se fizermos uma tour partindo do nosso package.json onde temos algo assim:

“start”:”react-scripts start”

E formos seguindo as pistas (procurar um react-scripts em node_modules), daremos de cara com um arquivo chamado paths.js.

Nesse arquivo é feito o link entre esse o index.js e o index .html

O conteúdo é :

appHtml: resolveApp('public/index.html'),
  appIndexJs: resolveApp('src/index.js'),

É por esse motivo que o nosso JS atua em cima desse HTML, repare também que o create-react-app define essas configurações todas para nós, uma mão na roda!

Se algo não ficou claro, basta perguntar novamente.

Espero que tenha ajudado!

Abraços!

Muito obrigado pela ajuda, entendi perfeitamente!

Que bom mbthales!

Como já disse, precisando é só me chamar aqui! Hahahaha.

Estou fechando seu tópico agora, qualquer nova dúvida basta criar um novo!

Abraços e sucesso!