What is difference between constants and configs file in structure of project JavaScript?

I’m new to React.js so I’m a bit confused about the difference between constants and configs file in structure of project. As far as I know, constants contain values ​​that cannot be changed and reused in the project, example:

// constants.js

const APPLE = 'APPLE'; 
const BANANA = 'BANANA';

But configs file also do the same thing with constants, example:

// configs.js 

export const appRoute = { 
   home: '/', 
   login: '/login', 
   terms: '/terms', 
   about: '/about' 
};

export const apiProduct = { 
   products: '/products', 
   productId: (id) => /products/${id}, 
};

what is the correct naming between constants and configs? And what is the difference here?

>Solution :

React in general is not very opiniated regarding project structure or file structure. Mostly any custom config files you create neither have to follow any naming conventions nor need to be placed in some particular folder unless you want to manipulate the behavior of some specific framework that builts on top of React.

Personally, I never use classic string constants spelled all uppercase like you demonstrated since for most use cases config objects are more handy if you need to share fixed values across your whole project.

Technally speaking there is very little difference between your constants.js and configs.js. Your const variables in constants.js cannot be reassigned in the future however an object’s property in configs can.