{"id":2050,"date":"2026-06-22T13:14:59","date_gmt":"2026-06-22T16:14:59","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=2050"},"modified":"2026-06-22T13:15:38","modified_gmt":"2026-06-22T16:15:38","slug":"react-nao-funciona-sem-isso-entenda-import-e-export-de-verdade","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=2050","title":{"rendered":"React N\u00e3o Funciona Sem Isso | Entenda Import e Export de Verdade"},"content":{"rendered":"\n
Se voc\u00ea come\u00e7ou a estudar React, provavelmente j\u00e1 se deparou com algo parecido com isso:<\/p>\n\n\n\n
import Header from \".\/Header\"\n<\/code><\/pre>\n\n\n\n
ou:<\/p>\n\n\n\n
export default App\n<\/code><\/pre>\n\n\n\n
E talvez tenha pensado:<\/p>\n\n\n\n
“O que \u00e9 isso?”<\/strong><\/p>\n\n\n\n
Antes de aprender componentes, props e useState, existe um conceito fundamental do JavaScript moderno que voc\u00ea precisa entender:<\/p>\n\n\n\n
Modula\u00e7\u00e3o.<\/strong><\/p>\n\n\n\n
\u00c9 ela que permite dividir o c\u00f3digo em arquivos menores, reaproveitar fun\u00e7\u00f5es e manter os projetos organizados.<\/p>\n\n\n\n
E \u00e9 justamente por isso que React n\u00e3o funciona sem import e export.<\/p>\n\n\n\n
\n\n\n\n
Precisa aprender JavaScript antes de React?<\/h1>\n\n\n\n
Voc\u00ea n\u00e3o precisa ser especialista em JavaScript para estudar React.<\/p>\n\n\n\n
Mas ter uma boa base vai facilitar muito.<\/p>\n\n\n\n
Afinal, React \u00e9 uma biblioteca JavaScript.<\/p>\n\n\n\n
Os componentes, fun\u00e7\u00f5es, eventos e estados utilizam conceitos do pr\u00f3prio JavaScript.<\/p>\n\n\n\n
Por isso, entender import e export vai economizar muitas horas de confus\u00e3o.<\/p>\n\n\n\n
\n\n\n\n
O que \u00e9 modula\u00e7\u00e3o?<\/h1>\n\n\n\n
Modula\u00e7\u00e3o \u00e9 a capacidade de dividir um sistema em partes menores.<\/p>\n\n\n\n
Em vez de colocar tudo em um \u00fanico arquivo gigante, podemos separar:<\/p>\n\n\n\n
\n
fun\u00e7\u00f5es;<\/li>\n\n\n\n
objetos;<\/li>\n\n\n\n
componentes;<\/li>\n\n\n\n
regras de neg\u00f3cio;<\/li>\n\n\n\n
valida\u00e7\u00f5es.<\/li>\n<\/ul>\n\n\n\n
Depois, reutilizamos essas partes em outros lugares.<\/p>\n\n\n\n
Isso torna o c\u00f3digo:<\/p>\n\n\n\n
\u2705 Mais organizado.<\/p>\n\n\n\n
\u2705 Mais reutiliz\u00e1vel.<\/p>\n\n\n\n
\u2705 Mais f\u00e1cil de manter.<\/p>\n\n\n\n
\n\n\n\n
O que \u00e9 export default?<\/h1>\n\n\n\n
Imagine que temos uma fun\u00e7\u00e3o:<\/p>\n\n\n\n
function mensagem() {\n return \"Ol\u00e1!\"\n}\n<\/code><\/pre>\n\n\n\n
Podemos exportar essa fun\u00e7\u00e3o:<\/p>\n\n\n\n
export default mensagem\n<\/code><\/pre>\n\n\n\n
E depois import\u00e1-la em outro arquivo:<\/p>\n\n\n\n
import mensagem from \".\/mensagem.js\"\n<\/code><\/pre>\n\n\n\n
Uma vantagem do export default \u00e9 que podemos utilizar praticamente qualquer nome na importa\u00e7\u00e3o.<\/p>\n\n\n\n
Por exemplo:<\/p>\n\n\n\n
import saudacao from \".\/mensagem.js\"\n<\/code><\/pre>\n\n\n\n
Mesmo mudando o nome, o c\u00f3digo continuar\u00e1 funcionando.<\/p>\n\n\n\n
Por isso, geralmente utilizamos o export default quando existe apenas um elemento principal no arquivo.<\/p>\n\n\n\n
\n\n\n\n
O que s\u00e3o Named Exports?<\/h1>\n\n\n\n
Quando queremos exportar v\u00e1rias fun\u00e7\u00f5es, utilizamos:<\/p>\n\n\n\n
export function soma() {}\nexport function multiplicar() {}\n<\/code><\/pre>\n\n\n\n
E depois importamos utilizando chaves:<\/p>\n\n\n\n
import { soma, multiplicar } from \".\/matematica.js\"\n<\/code><\/pre>\n\n\n\n
Diferentemente do export default, aqui os nomes precisam ser respeitados.<\/p>\n\n\n\n
\n\n\n\n
Alias: mudando o nome da fun\u00e7\u00e3o<\/h1>\n\n\n\n
Tamb\u00e9m podemos utilizar um apelido (alias):<\/p>\n\n\n\n
import {\n tamanho as strLength,\n maiusculo as strUpper\n}\n<\/code><\/pre>\n\n\n\n
Isso \u00e9 muito parecido com o alias utilizado em SQL.<\/p>\n\n\n\n
Esse recurso \u00e9 \u00fatil quando:<\/p>\n\n\n\n
\n
os nomes s\u00e3o grandes;<\/li>\n\n\n\n
queremos tornar o c\u00f3digo mais leg\u00edvel;<\/li>\n\n\n\n
precisamos evitar conflitos entre nomes.<\/li>\n<\/ul>\n\n\n\n\n\n\n\n
Misturando Export Default e Named Exports<\/h1>\n\n\n\n
Tamb\u00e9m podemos utilizar os dois juntos.<\/p>\n\n\n\n
Por exemplo:<\/p>\n\n\n\n
export default criarUsuario\n\nexport function validarIdade() {}\n\nexport function capitalizar() {}\n<\/code><\/pre>\n\n\n\n
E importar assim:<\/p>\n\n\n\n
import criarUsuario, {\n validarIdade,\n capitalizar\n} from \".\/usuario.js\"\n<\/code><\/pre>\n\n\n\n
Essa combina\u00e7\u00e3o \u00e9 extremamente comum em projetos React.<\/p>\n\n\n\n
\n\n\n\n
Criando objetos com m\u00f3dulos<\/h1>\n\n\n\n
Uma das partes mais interessantes da aula foi a cria\u00e7\u00e3o do objeto usu\u00e1rio.<\/p>\n\n\n\n
Em vez de trabalhar com vari\u00e1veis soltas, agrupamos informa\u00e7\u00f5es relacionadas:<\/p>\n\n\n\n
\n
nome;<\/li>\n\n\n\n
idade.<\/li>\n<\/ul>\n\n\n\n
Isso nos permite trabalhar com objetos e representar melhor as entidades do sistema.<\/p>\n\n\n\n
\u00c9 exatamente assim que sistemas profissionais s\u00e3o constru\u00eddos.<\/p>\n\n\n\n
\n\n\n\n
Corrigindo erros faz parte do desenvolvimento<\/h1>\n\n\n\n
Durante a aula, alguns erros apareceram.<\/p>\n\n\n\n
E isso \u00e9 importante.<\/p>\n\n\n\n
Porque programar n\u00e3o significa escrever tudo perfeitamente.<\/p>\n\n\n\n
Significa:<\/p>\n\n\n\n
\n
testar;<\/li>\n\n\n\n
analisar mensagens de erro;<\/li>\n\n\n\n
corrigir;<\/li>\n\n\n\n
continuar.<\/li>\n<\/ul>\n\n\n\n
Inclusive, muitos problemas acontecem por:<\/p>\n\n\n\n
\n
nome incorreto do arquivo;<\/li>\n\n\n\n
diret\u00f3rio errado;<\/li>\n\n\n\n
esquecer o “.js”;<\/li>\n\n\n\n
confundir slice com splice.<\/li>\n<\/ul>\n\n\n\n
Esses erros fazem parte da rotina de qualquer desenvolvedor.<\/p>\n\n\n\n
\n\n\n\n
React utiliza isso o tempo todo<\/h1>\n\n\n\n
Quando voc\u00ea escreve:<\/p>\n\n\n\n
import Header from \".\/components\/Header\"\n<\/code><\/pre>\n\n\n\n
ou:<\/p>\n\n\n\n
import { useState } from \"react\"\n<\/code><\/pre>\n\n\n\n
est\u00e1 utilizando exatamente os conceitos estudados nesta aula.<\/p>\n\n\n\n
Por isso, entender modula\u00e7\u00e3o antes de React \u00e9 um investimento que vale a pena.<\/p>\n\n\n\n
\n\n\n\n
O que voc\u00ea aprendeu<\/h1>\n\n\n\n
Nesta aula voc\u00ea viu:<\/p>\n\n\n\n
\u2705 O que \u00e9 modula\u00e7\u00e3o.<\/p>\n\n\n\n
\u2705 Export Default.<\/p>\n\n\n\n
\u2705 Named Exports.<\/p>\n\n\n\n
\u2705 Alias.<\/p>\n\n\n\n
\u2705 Reutiliza\u00e7\u00e3o de c\u00f3digo.<\/p>\n\n\n\n
\u2705 Objetos.<\/p>\n\n\n\n
\u2705 Organiza\u00e7\u00e3o de arquivos.<\/p>\n\n\n\n
\u2705 Mistura entre export default e named exports.<\/p>\n\n\n\n
\u2705 Corre\u00e7\u00e3o de erros comuns.<\/p>\n\n\n\n
\u2705 Como tudo isso \u00e9 utilizado no React.<\/p>\n\n\n\n
\n\n\n\n
\ud83c\udfa5 V\u00eddeo editado<\/h1>\n\n\n\n
React N\u00e3o Funciona Sem Isso | Entenda Import e Export de Verdade<\/h2>\n\n\n\n