From Chaos to Clarity: Formatting React Code for a Clean and Readable Codebase

When starting a new project, there is an experience that is very common among React developers. You begin feeling good about how clean and readable your code is, only to write a handful of functions or components and slowly watch your codebase descend into chaos. You find yourself scrolling from top to bottom, left to right, rereading lines of code repeatedly, and moving from file to file. Once you finish a functionality, you hope to never have to open that file again because you know how long it will take to find just a single function or variable—let alone edit or change that functionality.

In this article, we’ll examine the role formatting plays in making your codebase clean and readable. We’ll also explore industry standards and best practices for achieving consistent formatting.

Why Format your code?

Formatting is crucial for the readability and maintainability of your code. But how?

Well-formatted code helps visually separate different parts of your code, making it easier to follow the logical flow. Proper indentation highlights the relationship between parent and child components, elements, or selectors. Consistent formatting enhances your ability to quickly debug, fix, and maintain your code. When collaborating with team members who follow the same formatting rules, it becomes easier to understand each other’s code without confusion.

Reduced mental load is another benefit of good formatting. Clean code requires less mental effort to understand, allowing you to focus more on solving new problems instead of deciphering poorly formatted code blocks.

When a team adheres to a consistent style, everyone can contribute without wasting time reformatting codeblocks to suit personal preferences. Good formatting also brings discipline and professionalism to the codebase.

Lastly, tooling compatibility is a significant advantage. Developers use linters, add-ons, and IDEs that rely on consistent formatting. To fully leverage these tools and benefit from features like auto-completion and error highlighting, your codebase needs proper formatting. But how do you achieve that?

What is involved in formatting a codebase?

When speaking of formatting a codebase we are usually refering to several aspects: Indentation, Line Length, Naming conventions, Spacing, Braces and Parenthesis, Consistent use of Quotes, use of Semi colons, File and Folder Structure and the appropriate use of Comments. lets now get into the industry standards of how these are used and implemented.

1. Indentation
   Indentation is the use of white space to visually organize code into a hierarchy.The industry standard here is to use 2 or 4 spaces and avoid using tabs. According to the Airbnb style guide for javascript and react you should use 2 spaces. This is because it maintains consistent nesting levels and improves the overall readabilty of your code.

2. Line Length
   Line length here refers to how far the code you are writing on a single line should extend. The industry standard here is to keep a line between 80 to 100 characters.A lot of guides particulary PEP 8 and prettier recommend 80 characters. This is because it prevents horizontal scrolling and it usually works well on different screen sizes. but does this mean having to count as you code? no, at least not when you use code editors like vscode. The image below shows you how to tell how many characters are on a particular line.The image below shows that you are on line 44 and are on the 93rd character. you can find it at the bottom right on your vsCode editor if you haven't touched the default settings.

1. Naming Conventions
   
   This refers to a set of rules for naming things in a consistent way.Clear, meaningful, and precise naming is essential to writing code that is easy to read, understand, and maintain.The most popular naming convention for variables and functions is to use camelCase(a way to separate the words in a phrase by making the first letter of each word capitalized and not using spaces). As For react components PascalCase should be used especially since the First letter of a component should be capital as stated in the react Docs and For constants upper snake case is recommended.This section has not done naming justice.If i were to get into naming indepth here this article will get too long. If you are interested in learning more please check this article on naming convention.

2. Spacing
   For Spacing is recomended to add spaces around operators for clarity especially since certain operators when used in combination perform a different operation. it is also recomended that blank lines are used to separate logical sections of code. try to group and using blank lines space variable declaration and assignment from function declaration and logic.

3. Braces and Parenthesis
   According to the Airbnb style Guide there should be no dangling braces which means that you should keep all closing braces or parenthesis properly aligned with the corresponding opening braces or parenthesis.

4. Consistent Quotes
   When using quotes it is recomended to use either single quote '' or double quotes "" through out the project while trying to avoid any unecessary use of a combination of both.

5. Semicolons
   Just like with quotes make up your mind either use a semicolon to end your expressions, assignments and lines of code or don't use a semicolon at all but whatever your decision is please stick to it and be consistent. I personally would recomended the use of semicolons to avoid issues that come with Automatic semicolon insertion.

6. File and Folder Structure
   For file and folder structure factors like the size of project and tech stack mostly determines the structure of your files and folder however there are 2 general rules to follow. 1 Group related files together. 2 use meaningfull file names.

7. Comments
   A codebase can easily get clustered with code so don't make it worse by overusing comments. if you have good naming conventions and write clean code void of anti-pattern you should generally be able to avoid using comments. Just like Robert c. Martin says "comments are not inherently bad", but they are often "a sign of failure to express intent in the code itself".Comments do have a place in your code, they show why a code exist not how a block of code works, so comments should be used if your code involves a non-obvious decision or a workaround. so avoid anti-patterns to eliminate the need to explain the how of your code and avoid explaining what the code already expresses.

Below are links to some of the industry setting style guides

Airnbnb Javascript Style Guide.
StandardJs Style Guide
Prettier Defaults
.

So in conclusion Properly Formatting your code is not just for the aesthetic. It drastically improves the readability, maintainability, and scalability of your codebase and by Adopting popular industry standards you can ensure your code is consistent and clean

The above is the detailed content of From Chaos to Clarity: Formatting React Code for a Clean and Readable Codebase. For more information, please follow other related articles on the PHP Chinese website!