React create constants file

How to create constants file like: key - value in ReactJs,

ACTION_INVALID = "This action is invalid!"

and to use that in other components

errorMsg = myConstClass.ACTION_INVALID;

I'm not entirely sure I got your question but if I did it should be quite simple:

From my understanding you just want to create a file with constants and use it in another file.

fileWithConstants.js:

export const ACTION_INVALID = "This action is invalid!"
export const CONSTANT_NUMBER_1 = 'hello I am a constant';
export const CONSTANT_NUMBER_2 = 'hello I am also a constant';

fileThatUsesConstants.js:

import * as myConstClass from 'path/to/fileWithConstants';

const errorMsg = myConstClass.ACTION_INVALID;

If you are using react you should have either webpack or packager (for react-native) so you should have babel which can translate your use of export and import to older js.

You can simply create an object for your constants:

const myConstClass = {
    ACTION_INVALID: "This action is invalid!"
}

And then use it.

If you are bundling, you can export this object and then import for each component file.

Expanding on Monad's answer, for situations where you don't want to type myConstClass all the time:

fileWithConstants.js:

export const ACTION_INVALID = "This action is invalid!"
export const CONSTANT_NUMBER_1 = 'hello I am a constant';
export const CONSTANT_NUMBER_2 = 'hello I am also a constant';

fileThatUsesConstants.js:

import { ACTION_INVALID } from 'path/to/fileWithConstants';

const errorMsg = ACTION_INVALID;

(Also, if Monad's way works better for you, I believe the convention is for 'MyConstClass' to start with a capital letter, since it's acting like a class in code.)

One way to do that (not so different from other answers though) is to create a bare constants.js file and add your constants there.

module.exports = Object.freeze({
  ACTION_INVALID: 'This action is invalid',
  ACTION_VALID: 'Some other action',
});

Then you can import it

import ConstantsList from './constants';

and use

console.log(ConstantsList.ACTION_INVALID)

As the name suggests, Object.freeze() freezes objects and stops anyone from changing the values. Please note: if the values are objects themselves they are changeable (unless they are also frozen)

In nodejs enviroment, when using absolute path, there already is deprecated "constants" and it may conflict with yours, so it's better to create either a folder and put your constants there or create a file with name consts.

Your constants should look like that, use Object.freeze so that constants are never changed by a side effect. You should use Object.freeze for every object.

export const ACTION_INVALID = "This action is invalid!"
export const FILE_TYPES = Object.freeze({
  IMAGE: Object.freeze(["JPEG", "PNG"]),
  VIDEO: Object.freeze(["MP4", "M4V", "MOV", "3GP", "3G2", "WMV", "ASF", "AVI", "FLV", "MKV", "WEBM"])
})