Configuring Absolute Paths in React Native [en-US]

#reactnative #react #javascript

One of the things I miss about React / React Native is the absolute path. It is very common to use relative paths to import files.

The problem is when the project grows and the folders are deeply nested, I believe you may have already seen or already done so:

../../../.../../../../Utils/Breadcrumbs.js

../../../../../Components/Form/TextField.js

Now imagine that the Utils folder has changed directory. 😢

To resolve this issue, use a library called Babel Plugin Root Import. With a list that can be used to encode the root of our application, which is a "src" folder. 😍

It is practicing that you learn

☝ Add the library to your project.

    babylu@Project: ~$ yarn add babel-plugin-root-import -D

    ou

    babylu@Project: ~$  npm install babel-plugin-root-import -D

✌ After installation, set up the babel.config.js file that is located in the root directory.

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'babel-plugin-root-import',
      {
        rootPathPrefix: '@',
        rootPathSuffix: 'src'
      }
    ]
  ],
  env: {
    production: {
      plugins: [
        'babel-plugin-root-import',
        {
          rootPathPrefix: '@',
          rootPathSuffix: 'src'
        }
      ]
    }
  }
};

With everything set up, it is now possible to import your files using "@" as a prefix. Here's an example below:

@/Components/Form

@/Pages/Auth/SignIn

A pinch of VueJS please 🍲

I am using the "@" copying the Vuejs. Use the prefix that you find interesting. It can be the '~' or '#' for example.

Excuse me, could you show me the Way? 🚶

Using this technique we will have our first problem, the absence of autocomplete. This is because VSCode still does not understand that the "@" refers to the "src" folder of our project. To solve this we will create in the root directory a configuration file that VSCode understands, called jsconfig.json.

Inside it include the settings below:

{
  "compilerOptions": {
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules"]
}

Learn more about the jsconfig.json file:
https://code.visualstudio.com/docs/languages/jsconfig

Agora sim! 😎

A tool that likes to complain! 😡

If you are using eslint in your project, you will receive many complaints about the imports you make using the prefix '@'.

Luckily, there is a library that lets you tell eslint that everything is okay.

Add:

    babylu@Project: ~$ yarn add eslint-import-resolver-babel-plugin-root-import -D

    ou

    babylu@Project: ~$ npm install eslint-import-resolver-babel-plugin-root-import -D

In the eslint configuration file include the following properties.

  "settings": {
    "import/resolver": {
      "babel-plugin-root-import": {}
    }
  }

Questions that look stupid but are not 🤔

Can I use this for applications going to production?

Answer: Yes, if you have followed the steps correctly you will see that we configured for production in babel.config.js

Can I use React for web?

Answer: To use the babel plugin root import for Web, you need to perform some other settings

But not everything in life is flowers 🔴

You may encounter bugs in the library. If you find it please report it in the official babel plugin root import repository and help the community create a better library.

https://github.com/entwicklerstube/babel-plugin-root-import/issues

Follow me on twitter @heybrunoandrade

Help me translate this article into other languages.
If you have received an error in the translation please make the repository to make a correction. I'll be very grateful.
Access Repository