Naming Conventions Best Practices in React

React doesn’t have specific guidelines for naming conventions. It’s completely up to you to decide naming conventions that you want to use. If you follow good naming conventions that help to maintain consistency throughout the project and make code more readable and organized.

First, let’s see what common naming conventions are available in React.

• Pascal Case
  PascalCase is naming conventions where the first letter of each word is capitalized and rest is in lowercase.
  Ex :- LogingForm, AuthContext
• Camel Case
  camelCase is naming convention where the first word is always in lowercase and every other word starts with capital letter.
  Ex :- firstName, lastName
• Snake Case
  snake_case is naming convention where each word is in lowercase and separated by underscores.
  Ex :- first_name, last_name
• Screaming Snake Case
  SCREAMING_SNAKE_CASE is naming convention where each word is in uppercase and separated by underscores.
  Ex :- FIRST_NAME, LAST_NAME
• Kebab Case
  kebab-case is naming convention where each word is in lowercase and separated by hyphen.
  Ex :- first-name, last-name

So, I’m going to give some suggestions for naming conventions for folders, files, components, functions, variables, constants, interfaces, type aliases and enum according to my experiences. It’s important to keep in mind that these are just guidelines you should choose a naming conventions that best fits your project. But most important thing is to choose a consistent naming conventions and stick to it.

Folders and Files
Use camelCase for folders and non-component file name and PascalCase for component file and interface file.

Here, LoginForm file is only one component file. So I have used PascalCase for naming it. PascalCase is more commonly used for naming component. So using it for file names can maintain consistency in project.

Components
As I have mentioned before, Use PascalCase for component name.

const LoginForm = () => {
  return <div>LoginForm</div>;
};

export default LoginForm;

Functions
Use camelCase for function name.

const getUsers = () => {
  console.log("getUsers function");
};

Variables

• A variable name should have a clear, obvious meaning (describes data that it stores).
• When you use abbreviations, it can be difficult to understand what is describes in code.
  Ex :- imgBtn
  This isn’t clear at a glance, which is stands for Image Button. By using the full word in compound names, you make it easier to quickly identify what it’s doing in code. So instead of imgBtn you would use imageButton, then it makes sense.
• use common and well-known acronyms as it is.
  Ex :- baseURL, userAPI, setHTTPHeader()
• Make name descriptive and concise as much as can. Examples of bad names are data and value, this kind of names say nothing.
  It’s only okay to use, If context of the code makes it obvious which data or value the variable is referencing.
• As you might have already known, we declare variable using let and const keyword.
  If you declare variable using let keyword, then camelCase is used for naming it. When it comes to const keyword story is slightly different.

Constants
Constants are declared using ‘‘const’’ keyword. Being a constant means that variable’s value never change.

There are two types of constants,

• Constants that are known prior to execution. Use SCREAMING_SNAKE_CASE for naming that. In other-hand capital-named constants are only used as aliases for “hard-coded” value.

const DATE_FORMAT = "YYYY-MM-DD";

• Constants that are initialized in run-time, during the execution. Use camelCase for naming this type of constants.

const userList = [] // Value of this variable initialize in run time.

Interfaces and Type aliases
use PascalCase for interfaces and type aliases.

type RoleType = "admin" | "visitor";

interface user{
   name : string
   role : RoleType
}

Enum

• Use PascalCase for enum name.

enum  Direction {}

• Use SCREAMING_SNAKE_CASE for enum values.

enum  Direction {
  TOP_RIGHT,
  TOP_LEFT,
  BOTTOM_RIGHT,
  BOTTOM_LEFT,
  CENTERED
}

• use camelCase for meaningful names that describe the value.

enum  Direction {
  TOP_RIGHT    = "topRight",
  TOP_LEFT     = "topLeft",
  BOTTOM_RIGHT = "bottomRight",
  BOTTOM_LEFT  = "bottomLeft",
  CENTERED     = "centered"
}

Conclusion

Ultimately, the choice of file naming convention is up to the preferences of the development team and the specific requirements of the project. The most important thing is to be consistent with whichever convention is chosen to ensure that the codebase is easy to read and maintain.