DEV Community

Cover image for Adios ../../../.. relative imports JS
Israel Moreno 💀
Israel Moreno 💀

Posted on

Adios ../../../.. relative imports JS

Cada vez que creamos componentes, funciones, constantes o cualquier otra cosa en nuestro proyecto en React o cualquier otro framework, solemos hacerlo en la carpeta src , y cuando importamos estos archivos solemos hacerlo con las rutas relativas.

Suponiendo que tenemos nuestro proyecto de la siguiente manera:

 - src /
   - components /
      - Avatar /
         index.js
      - RoundedButton /
         index.js
Enter fullscreen mode Exit fullscreen mode

Al importar nuestros componentes y/o funciones o cualquier archivo dentro de nuestra carpeta src, solemos hacerlos de la siguiente manera:

import RoundedButton from '../../components/RoundedButton'
import Avatar from '../../components/Avatar' 
Enter fullscreen mode Exit fullscreen mode

Hacerlo de esta manera no implica una mala practica o que estes haciendo mal, el detalle es que entre mas crecen nuestros imports se ve mas sucio nuestro codigo en la parte superior. Que tal se verian nuestros imports de esta manera ? :

import RoundedButton from 'components/RoundedButton' 
import Avatar from 'components/Avatar' 
Enter fullscreen mode Exit fullscreen mode

Se veria mas limpio no ?

Hacer estas importaciones es demasiado sencillo. En tu proyecto crea o edita el archivo jsconfig.json si usas Javascript o tsconfig.json si usas Typescript, y agrega las siguientes lineas:

{
   "compileOptions": {
      "baseUrl": "src"
   },
   "include": ["src"]
}
Enter fullscreen mode Exit fullscreen mode

You are Ready ! Ahora puedes dejar de usar las rutas relativas y hacer las importaciones de tus archivos mas facil

import React from 'react'

import Avatar from 'components/Avatar'
import RoundedButton from 'components/RoundedButton'

const Panel = () => {
  return (
    <>
       <RoundedButton />
       <Avatar />
    <>
  )
}
Enter fullscreen mode Exit fullscreen mode

Asi de sencillo es olvidarnos de las rutas relativas...

Nota: Esto funciona perfectamente sin hacer mas modificaciones en VSCode, para WebStorm e IntelliJ existe una configuracion para que funcione. Espero pronto actualizar este articulo y compartir como seria la configuracion en los IDE's de JetBrains

Este tip lo aprendi de Nilanth... Puedes ver su articulo original en el siguiente enlace:
https://dev.to/nilanth/no-more-import-in-react-2mbo

Discussion (3)

Collapse
junihh profile image
Junior Hernandez • Edited on

Vue CLI tiene "@". Es un shorthand que hace referencia al root del "src", de manera que si escribes "@/components/mycomponent.js", estás escribiendo "src/components/mycomponent.js".

Hace dos años salió público Vite.js, un loader package creado por Evan You (creador de Vue). Lo desarollo con el fin de reemplazar a WebPack en Vue CLI por un compilador más rápido. Vite usa "esbuild", que está programado en Go.

Vite no tiene el "@", pero puedes escribir esto:
"/src/components/mycomponent.js"

Es mejor que el imposible:
"../components/mycomponent.js"

Y sus derivados.

Para quienes piensen que es solo para Vue, puede usarse para programar Vue, React, Svelte, javascript vanilla y TypeScript.

Definitivamente el mejor reemplazo a "create-react-app". Lo he usado en dos proyectos en React y no pretendo volver atrás con ningún otro.

Collapse
behagoras profile image
David Behar Lombrozo

No funciona para create react app, Facebook deshabilitó el override de esta propiedad, hay workarounds, pero es una lastima que no lo tengan por defecto

Collapse
rasby profile image
Luis Bonilla

Gran articulo @israeldev_