React: lidando com colisão de nomes de componentes

Já passou por uma situação em que teve de lidar com componentes diferentes, mas com o mesmo nome? Ou já teve de importar mais de um módulo (ES6) com o mesmo nome? Isso aconteceu durante o curso React: integrando seu projeto React com APIs.

A situação é a seguinte, segue o fio:

O Material UI possui um componente chamado Link:

import Link from '@mui/material/Link';

// o uso é assim:

<Link href="/ninjas">Ninjas</Link>

E o React Router possui um componente diferente, mas de mesmo nome:

import { Link } from "react-router-dom";

// o uso é assim:

<Link to="/samurais">Samurais</Link>

E agora, o que fazer?

Bom, a gente pode resolver isso utilizando alias (apelido, em tradução livre do inglês), dessa forma:

import { Link } from "@mui/material"

import { Link as RouterLink } from 'react-router-dom'

E o uso ficou assim:

<Link component={RouterLink} to="/admin/restaurantes">
  {/* demais componentes aqui */}
</Link>

Agora que você já entendeu o que aconteceu, vamos mergulhar mais fundo!

Nós, pessoas desenvolvedoras que lidam com front-end, lidamos diariamente com imports e exports no universo do JavaScript, mas nem sempre paramos para entender o que são e como funcionam os módulos. Vamos então mergulhar mais fundo nesse tema?

Um módulo ES6(eles passaram a existir desde esta versão do JS) é um arquivo que contém código JS. Não há uma palavra reservada ou qualquer outro tratamento especial; um módulo normalmente se comporta como se fosse um script. Existem dois pontos que já quero trazer:

• Os módulos usam modo estrito, mesmo que você não declare o "use strict" neles.
• Você pode usar, importar e exportar módulos.

Por padrão, tudo que é declarado dentro de um módulo só existe localmente. Se você quiser disponibilizar alguma coisa que foi criada ali basta utilizar a palavra reservada export.

Exportando uma classe:

export class Calculadora {
  //... vários métodos e propriedades vão aqui, como numa classe normal ...
}

Ou uma função:

export function calcularMedia(listadeNotas) {
    //… calcula e retorna a média.
}

E podemos ter um export default (exportação padrão):

export default function somar(numero1, numero2) {
    //… calcula e retorna a soma.
}

E, do outro lado, podemos importar o que precisamos:

import { Calculadora } from "./matematica";

new Calculadora()

Ou mesmo, múltiplos imports:

import { Calculadora, calcularMedia } from "./matematica";

new Calculadora()

calcularMedia([10, 8, 9, 7])

Podemos também importar somente o default, assim a sintaxe fica ligeiramente diferente:

import somar from "./matematica";

somar(1, 1)

Outra coisa comum é combinar as importações, pegando o default junto com algum outro export:

import somar, { Calculadora } from "./matematica";

new Calculadora()

somar(1 + 1)

E podemos trabalhar com module objects, importando simplesmente tudo o que foi exportado, assim:

import * as matematica from "./matematica";

matematica.calcularMedia(1 + 1)

new matematica.Calculadora()

// o default é a função somar, lembra?
matematica.default(1 + 1)

E com isso fechamos um bom apanhado sobre o que podemos fazer ao importar e exportar módulos, inclusive a solução pro nosso problema inicial. A importação com alias:

import { calcularMedia as calcularMediaAritimetica } from "./matematica";

calcularMediaAritimetica([9, 8, 10])

Que consiste em renomear algo que foi importado.

Podemos fazer muitas coisas com JavaScript, não é? E falando nisso, se você quiser se aprofundar mais no universo do front-end, que tal conhecer as formações da Alura?

• React com JavaScript
• React com TypeScript
• React: consumindo APIs

Bons estudos!! :)