Crear alias de ruta en React js

(13 de septiembre de 2020)

Este tutorial lo guiará para crear alias de ruta para su proyecto react. La creación de alias de ruta para activos o componentes hace que el código se vea más limpio y bonito. Por ejemplo, mire la siguiente imagen antes y después.

Antes
Después

¿No se ve más limpio? Esto encaja muy bien si su proyecto es grande y necesita importar muchos archivos y componentes a su archivo. Así que comencemos a cómo crear alias de ruta en react js.

Requisitos

  1. Abra el terminal en el directorio raíz de tu proyecto e instala react-app-rewired y react-app-rewire-alias como una dependencia de desarrollo.
npm install react-app-rewired react-app-rewire-alias --save-dev

2. Ahora, dentro del directorio raíz, cree un archivo con el nombre config-overrides.js y pegue el siguiente código.

Aquí primero estamos importando {alias} de react-app-rewire-alias. Después de eso, agregaremos un objeto con pares clave-valor dentro de alias donde la clave es la definición de su ruta y el valor es la ruta. Puede agregar varios pares clave-valor para diferentes definiciones y rutas.

3. Ahora abra su archivo package.json y Voltee las llamadas existentes desde react-scripts a react-app-rewired

4. Ahora puedes usar tus nuevos alias dentro de tu proyecto React js.

5. Inicie su proyecto npm start para comprobar si funciona o no.

A continuación se muestra el repositorio de Github como referencia.

Mediumtutorial/path-aliases-react-medium

Este proyecto se inició con la aplicación Create React. En el directorio del proyecto, puede ejecutar: Ejecuta la aplicación en…

github.com