Naming Conventions in React JS

Writing high-quality code is the most important thing we coders are trying to master. However, more skills make a great developer. One of them is the way you name your files.

Naming files and folders are one of the simplest things we do as developers. But it is also one of the most important. A well-named file or folder can help you and other developers find and understand your code more quickly.

In this article, you'll learn what exactly is the naming convention, what types of naming conventions can you choose from. And lastly, you'll learn what are the most common naming conventions used in React projects.

All that being said, let's dive straight into the article.

What Is Naming Convention

Before we go over the different types of naming conventions, we need to do one thing. It's important to understand what the naming convention is, and why it's important to follow it when working on a project.

In computer programming, a naming convention is a set of rules for choosing the character sequence to be used for identifiers that denote variables, types, functions, and other entities in source code and documentation. (source: Wikipedia)

Naming Convention Explained

In a way, the naming convention is how you name every single thing in your project.

When we're choosing a proper naming convention for our project, we're mostly concerned about the name of files and directories. And that's because other entities are usually covered by the naming conventions of a programming language we're using.

Now that we know what naming convention is, let's talk about its importance.

Importance of Naming Convention

Naming conventions are important because they make code more readable and organized. That's the simplest answer I could provide. However, the importance of proper naming doesn't end here.

Naming conventions make a codebase more understandable for other programmers. By adhering to a set of naming conventions, all programmers will be using the same terminology for the same concepts. This will make it easier for them to communicate with each other.

By following name conventions you are creating a consistent programming language, that can be easily understood by other programmers.

Common Naming Conventions for React JS

React is an unopinionated framework, and the same applies to the naming. It doesn't have any specific guidelines or statements about naming conventions. You're free to use whatever naming conventions you feel comfortable with. The documentation doesn't offer any specific recommendations either.

Some people believe that React components should be named in a way that mirrors the HTML element they are representing. E.g, a component that renders a div might be named Div.

Others believe that the name of the component should be based on the functionality it provides, not the HTML element it represents. E.g, A component that logs messages to the console might be named ConsoleLogger, and not Console.

Ultimately, it's up to you to decide what naming conventions you want to use. However, there are a few different approaches that gained popularity among React developers.

In React applications, there are 3 most common naming conventions:

• Camel case for file names, and pascal case for component names
• Kebab case for file names, and pascal case for component names
• Pascal case for both file names, and component names

As you can see, there is one thing that's pretty much set in stone. And that's the convention for component names. A component in React should always use a pascal case. E.g, App, AppContainer or AwesomeAppContainer.

Example of component instance naming

const appContainer = <AppContainer />

Where things differ is the file naming. Some people like to use camel case while others prefer to use pascal case.

Let's compare the difference on real-life examples. Let's consider a component called AppContainer.

Using Camel Case for File Names

Camel case is the practice of writing phrases without spaces or punctuation, indicating the separation of words with a single capitalized letter. (source: Wikipedia)

Using camel case, the file name will be appContainer.jsx.

appContainer.jsx

const AppContainer = () => {
  return (
    <div className="App">
      <h1>I Have Camel Case Naming</h1>
      <p>And I'm proud of it!</p>
    </div>
  );
}

export default App

Using Kebab Case for File Names

Kebab case is a programming variable naming convention where a developer replaces the spaces between words with a dash. (source: Server Side)

Using kebab case, the file name will be app-container.jsx.

app-container.jsx

const AppContainer = () => {
  return (
    <div className="App">
      <h1>I Have Kebab Case Naming</h1>
      <p>And I'm also proud of it!</p>
    </div>
  );
}

export default App

Using Pascal Case for Both File and Component Name

Pascal case is following the same format as the camel case. In addition, it requires the first letter to be uppercase as well, while the camel case does not.

Using the pascal case, the file name will be AppContainer.jsx.

AppContainer.jsx

const AppContainer = () => {
  return (
    <div className="App">
      <h1>I Pascal Case Naming</h1>
      <p>And I'm also proud of it!</p>
    </div>
  );
}

export default App

Concluding Thoughts

Choosing a correct naming convention and following it properly can make your life, and the life of your coworkers much easier.

In this article, we’ve talked about the importance of naming conventions, different types of naming conventions to follow. And lastly, we talked about the most popular conventions being used in React projects.

You learned what conventions can be used for your React project, and you learned that the convention you use is entirely up to you. However, it’s important to be consistent across the project. So everyone on your team knows which convention you’re using.

Now it's time, to pick the naming convention you like, and use it consistently in your projects.