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

israeldev_

Israel Moreno 💀

Posted on August 19, 2021

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

💖 💪 🙅 🚩
israeldev_
Israel Moreno 💀

Posted on August 19, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

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

August 19, 2021