React export, import e defaults

Introdução
No processo de desenvolvimento de nossos projetos, frequentemente a partida é dada com uso de um template pronto ou gerando uma estrutura de pastas usando a linha de comando.
Por acaso você já notou a quantidade de trechos de código (snippets) que são incluidos nos scripts de partida e que aceitamos como certos sem sequer saber para que servem ou como funcionam?
Um desses snippets que chamou minha atenção foi aquela linha de código que exporta o componente App
quando você cria um projeto React conforme mostrado a seguir.
class App extends Component {
render() {
return (
<h1>Minha aplicação React.</h1>
)
}
}
export default App
Nessa matéria eu gostaria de examinar o que está por trás desse poderoso trecho de código e entender para que ele serve e o que faz.
Módulos na ES6
A ECMAScript, especificação na qual a JavaScript se baseia, criou o conceito de módulos na ES6.
Módulo é uma unidade independente de código, auto contida. Um módulo destina-se a disponibilizar seus conteúdos para outros módulos usando a diretiva (ou palavra-chave) export
. Pode também consumir conteúdos de outros módulos usando a diretiva import
.
O código mostrado anteriormente exemplifica a maneira como React usa esse conceito para passar conteúdos de um componente para outro.
Um passo de cada vez
Vamos examinar a linha de código mostrada a seguir.
export default App
- Primeiro encontramos a diretiva
export
cuja finalidade é a de expor (ou disponibilizar) os conteúdos deApp
para outros módulos. - A seguir temos a palavra-chave
default
.
Default é um dos tipos de exports previstos nas ES6 (export default). A palavra-chave default informa que se você está importando aquele módulo (no caso App) e não especificou explicitamente qual ou quais conteúdos está importando, todos os conteúdos do módulo serão importados! Cada módulo admite um e somente um export default.
- Por último, na linha de código que estamos examinando encontramos o nome do conteúdo que estamos exportando que no caso é
App
.
Ok, vamos exportar
Uma vez que o módulo App
é exportável podemos usar seus conteúdos em outro módulo desde que o importemos nesse outro módulo usando a diretiva import
como mostrado a seguir.
import App from "./App"
Quando você cria um projeto React a linha de código mostrada acima aparece no arquivo index.js
.
Essa é a sintaxe para importarmos o export default de um módulo. É interessante notar que, nesse exemplo, App
foi a palavra escolhida para nomear os conteúdos do módulo. A linha de código está dizendo o seguinte: você não especificou um conteúdo de .App
então eu vou mandar os conteúdo exportado por default e nomeá-lo com o propósito de criar uma referência para ele.
Na verdade, no import não há necessidade de se nomear como App
. Trata-se APENAS de definir um nome.
import QualquerNome from "./App"
No código mostrado acima QualquerNome
continua sendo uma referência ao componente App! Você pode usar, literalmente, qualquer nome no lugar QualquerNome
(PascalCase).
★Nota do tradutor: Criei uma página no codeSandBox para demosnstrar o uso de QualquerNome
no arquivo de importação. Consulte o exemplo criado pelo Maujor (abre em nova janela)
Quando não há default ou imports nomeados
Que tal exportar separadamente diferentes conteúdos de um módulo, ou seja, conteúdos non-default? Como seria isso?
export class App extends Component {
render() {
return (
<h1>Minha aplicação React.</h1>
)
}
}
O código mostrado acima é idêntico ao mostrado no início dessa matéria, exceto que não usa a diretiva default.
Ele funciona da mesma maneira, contudo não pode ser importado da mesma maneira. Se você tentar importar com o código mostrado a seguir.
import App from "./App"
Vai receber de volta um erro como mostrado na imagem a seguir.

A declaração import não consegue reconhecer o nome App
!
Sem um export default no módulo é necessário nomear explicitamente o que pretendemos importar. Na ES6 isso é previsto como importação nomeada (named import).
import {App} from "./App"
Na sintaxe acima usou-se a funcionalidade ES6 destructuring — { } — para dizermos que queremos importar todos os conteúdos de App
que se encontram dentro daquele módulo.
Importando tudo!
Uma vez que é possível exportar múltiplos conteúdos de um módulo é necessário também um meio de se importar mais de um conteúdo. Isso é possível desde que se conheça os nomes dos conteúdos.
import {App, Dev, Post} from "./App"
Assim, podemos ter um default e vários named exports em um único módulo e sermos capaz de importá-los separadamente ou juntos. Suponha que App
é o default export.
import App, {Dev, Post} from "./App"
Feito!
★Nota do tradutor: Criei uma página no codeSandBox para demonstrar o uso de import default e import named. Consulte o exemplo criado pelo Maujor (abre em nova janela)
Conclusão
Quando você examina as partes que compõem o código fica mais fácil entendê-lo. É muito comum e quase que regra geral aceitarmos passivamente trechos de código padrão em frameworks sem sequer tentarmos entendê-los. Ao escrever essa matéria também tive a inteção de despertar sua curiosidade e motivá-lo a explorar e entender tudo o que você encontra em códigos prontos! Certamente esse hábito fará de você um programador muito melhor.
(1) — A presente tradução foi adaptada, ou seja, antes de ser uma tradução rígida ela expressa a interpretação que eu dei aos textos originais criados pela autora.
Conheça os livros do Maujor®
Ir para a página de entrada nos sites dos livros.