Se você começou a estudar React, provavelmente já se deparou com algo parecido com isso:

import Header from "./Header"

ou:

export default App

E talvez tenha pensado:

“O que é isso?”

Antes de aprender componentes, props e useState, existe um conceito fundamental do JavaScript moderno que você precisa entender:

Modulação.

É ela que permite dividir o código em arquivos menores, reaproveitar funções e manter os projetos organizados.

E é justamente por isso que React não funciona sem import e export.

Precisa aprender JavaScript antes de React?

Você não precisa ser especialista em JavaScript para estudar React.

Mas ter uma boa base vai facilitar muito.

Afinal, React é uma biblioteca JavaScript.

Os componentes, funções, eventos e estados utilizam conceitos do próprio JavaScript.

Por isso, entender import e export vai economizar muitas horas de confusão.

O que é modulação?

Modulação é a capacidade de dividir um sistema em partes menores.

Em vez de colocar tudo em um único arquivo gigante, podemos separar:

funções;
objetos;
componentes;
regras de negócio;
validações.

Depois, reutilizamos essas partes em outros lugares.

Isso torna o código:

✅ Mais organizado.

✅ Mais reutilizável.

✅ Mais fácil de manter.

O que é export default?

Imagine que temos uma função:

function mensagem() {
    return "Olá!"
}

Podemos exportar essa função:

export default mensagem

E depois importá-la em outro arquivo:

import mensagem from "./mensagem.js"

Uma vantagem do export default é que podemos utilizar praticamente qualquer nome na importação.

Por exemplo:

import saudacao from "./mensagem.js"

Mesmo mudando o nome, o código continuará funcionando.

Por isso, geralmente utilizamos o export default quando existe apenas um elemento principal no arquivo.

O que são Named Exports?

Quando queremos exportar várias funções, utilizamos:

export function soma() {}
export function multiplicar() {}

E depois importamos utilizando chaves:

import { soma, multiplicar } from "./matematica.js"

Diferentemente do export default, aqui os nomes precisam ser respeitados.

Alias: mudando o nome da função

Também podemos utilizar um apelido (alias):

import {
    tamanho as strLength,
    maiusculo as strUpper
}

Isso é muito parecido com o alias utilizado em SQL.

Esse recurso é útil quando:

os nomes são grandes;
queremos tornar o código mais legível;
precisamos evitar conflitos entre nomes.

Misturando Export Default e Named Exports

Também podemos utilizar os dois juntos.

Por exemplo:

export default criarUsuario

export function validarIdade() {}

export function capitalizar() {}

E importar assim:

import criarUsuario, {
    validarIdade,
    capitalizar
} from "./usuario.js"

Essa combinação é extremamente comum em projetos React.

Criando objetos com módulos

Uma das partes mais interessantes da aula foi a criação do objeto usuário.

Em vez de trabalhar com variáveis soltas, agrupamos informações relacionadas:

nome;
idade.

Isso nos permite trabalhar com objetos e representar melhor as entidades do sistema.

É exatamente assim que sistemas profissionais são construídos.

Corrigindo erros faz parte do desenvolvimento

Durante a aula, alguns erros apareceram.

E isso é importante.

Porque programar não significa escrever tudo perfeitamente.

Significa:

testar;
analisar mensagens de erro;
corrigir;
continuar.

Inclusive, muitos problemas acontecem por:

nome incorreto do arquivo;
diretório errado;
esquecer o “.js”;
confundir slice com splice.

Esses erros fazem parte da rotina de qualquer desenvolvedor.

React utiliza isso o tempo todo

Quando você escreve:

import Header from "./components/Header"

ou:

import { useState } from "react"

está utilizando exatamente os conceitos estudados nesta aula.

Por isso, entender modulação antes de React é um investimento que vale a pena.

O que você aprendeu

Nesta aula você viu:

✅ O que é modulação.

✅ Export Default.

✅ Named Exports.

✅ Alias.

✅ Reutilização de código.

✅ Objetos.

✅ Organização de arquivos.

✅ Mistura entre export default e named exports.

✅ Correção de erros comuns.

✅ Como tudo isso é utilizado no React.

🎥 Vídeo editado

React Não Funciona Sem Isso | Entenda Import e Export de Verdade

📺 Live completa

Quer acompanhar todos os exemplos e entender passo a passo como funciona a modulação?

Conclusão

Muita gente começa estudando React e acaba ficando confusa com import e export.

Mas a verdade é que React apenas aproveita um recurso do próprio JavaScript.

Por isso, aprender modulação é aprender uma habilidade que você vai utilizar em praticamente qualquer linguagem de programação.

E aqui no Desvendando o Código, acreditamos que aprender programação não é decorar comandos.

É entender como as tecnologias funcionam.

Porque o código é apenas uma consequência.

Eu não ensino programação.

Eu ajudo as pessoas a entenderem como a tecnologia funciona.