Publicado em: 2020-04-16

<aside> 💡 Crédito 1: Essa matéria é a tradução adaptada¹ de um artigo escrito por Laurie Barth. E pode ser acessada neste link.

</aside>

<aside> 💡 Crédito 2: Essa tradução foi realizada pelo grande mestre Maujor. E pode ser acessada através deste link.

</aside>

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.

React

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.

React

export default App