React eliminate dots from import

Question

I am kinda new in the web and would like to ask a simple question. Basically I just want to eliminate dots from my import. I mean thing like:

import Component from '../../container/etc'

How could I just start my import from the root? So its would become smth like:

import Component from 'container/etc'

I used create-react-app for set up

Answer 1

You can add the resolve config in webpack like

module.exports = {
    //things here
    resolve: {
        extensions: ['.jsx', '.scss', '.js', '.json'],
        modules: [
            path.resolve(__dirname, 'app'),
            'node_modules'
        ]
    }
    // other things here
}

where you directory structure would be like

-- app
   -- container
      -- etc.js
   -- api.json

so you can import like

import ETC from 'container/etc';
import json from 'api.json'

In case you are using create-react-app, you can create a .env file on the root of your project and make the NODE_PATH point to the src folder (or wherever you have your code) all you'll have to do is write:

NODE_PATH=src

Create-react-app will read your .env file without ejecting.