Absolute Imports with Create React.js Apps | Jellyfish Technologies

Hi, today I want to share about the absolute import for React and React-Native App Development Company, projects.

When you create a project using create-react-app, it uses relative paths, which is fine for cases where the files you’re importing are relatively close within the file tree.

we import the file into react project, something like this:

1 2 3 4 5

import {SignUp} from '../../components/signup/SignUp' ;   import { Login } from '../../components/signin/SignIn' ;   import App from './App' ;

It’s very difficult to count how many dots you required to import that file in our component.

But if there was a way to import the file the same way every time regardless of where the file in relation to another. This is where absolute import comes in handy. If you import above file something like this:    

1 2 3 4 5

import {SignUp} from 'components/signup/SignUp' ;   import { Login } from 'components/signin/SignIn' ;    import App from 'App' ;

No matter where you import those files from the path will be the same. No more counting dots.

React.js App Development Company

Implementing Absolute Imports in Create-React-App:

Steps required to implement absolute imports when creating a react project using the create-react-app command:

1 2 3

1. Create a ‘.env’ file at the root level (same level as package.json)    2. Set an environment variable, ‘NODE_PATH’ to ‘src/’.

create-react-app is configured in such a way that its web pack configuration will automatically pick up ‘.env’ files and read the ‘NODE_PATH’ environment variable, which can then be used for absolute imports for React.js Development Services.

 

Hope this blog is useful for React and React-native developers.