Vamos aqui ver o seu... Não clica em port... E set state o painel... Está usando export default. Aqui no app, quando você setar o painel, tem que falar painel.default. Está? Esqueci disso, que foi exportado como default. Salvar... Tentar novamente... painel.default no set state. Está bom? Então ele apareceu o painel. Vamos ver aqui o que aconteceu. Está? Então a gente dá o render, aparece o app, mas tem um botão, mas não tem o painel, porque o painel não está aberto, o painel é aberto e tem valor falso. Quando você clica no botão, eu chamo onclick. O onclick vai dar um import dinâmico. Agora, quem é responsável para saber que você está querendo fazer code splitter? É o app pack. O app pack vai automaticamente saber, ó, tem um import dinâmico, então eu vou fazer code splitter aqui. Então quando ele você dá onclick, e parecia esse import, ele vai fazer o pídeo HTTP, pegar o pedaço do código que contém o painel, e esse cara retorna uma promessa. Lida com a promessa com o outro dentro. E ele retorna o próprio componente aqui. Aí eu dou o set state armazendo o componente no estado, com o mesmo nome, não se esqueça do default que eu exportei com default. Panel, painel, ponto default. E set painel aberto para toggle, né? Para set true. E funcionou. Olha aqui no Firefox, quando eu cliquei, apareceu o painel, e note que ele baixou esse 0.tunc.js, 1.22. Ilobytes, com o código do painel já aqui. Aí você pode ver o código do painel está aqui mesmo. Cadê ele me deixa? Então painel var painel, não sei o quê. Está aqui. Então o código foi extraído do bundle.js, só está no chunk 0.tunc.js, se você quiser conferir aqui com curl. Vou pegar aqui o bundle, se eu baixar de novo para ver se realmente saiu, foi extraído de lá. Dá o curl de novo. curl traço, ó. Deixa eu ir para o pasta temporária. Dá o curl, traço, ó, assim. Baixou o novo bundle. Deixa o atum do bundle para abrir. No novo bundle. Deixa eu procurar para o painel. Você nota que tem o import, aquele comentário que a gente tinha feito, que está dentro do app.js? Painel aberto painel no, mas não tem o código do painel próprio, né? Não tem. Então aquele code foi extraído para o 0.tunc.js. Então a gente fez o nosso primeiro code splitter usando o import dinâmico, tá? Isso é muito legal. Tá? Agora, isso é legal, mas o que acontece se der problema, se der erro de conexão? Aí você tem que lidar com o que acontece, ele não consegue baixar aquele pedaço. Tá? E o que acontece enquanto estiver carregando? Quer que você mostra um spinner? Certo? Então tem que levar em consideração essas coisas. Obviamente, você tem que ficar fazendo essas coisas e armazenar o componente no estado, não sei o quê, não sei o quê. Mas seria legal se a gente tivesse uma maneira mais talvez eficiente de fazer isso. Tenha uma maneira de usar o React Lazy, tá? E a gente vai falar do React Lazy. Tem aqui na página do code splitter, se quiser dar uma olhada. Explicação deles, se a gente falar do React Lazy na próxima aula, tá certo? Então até lá.