Hey everyone, Today we’re going to see how we can write React code very efficiently by seeing those 10 coding style tips. When we’re doing code reviews, developers rarely get so enough time to understand each line of code at a time. So each time I review the code, I look for certain points like to help myself quickly understand that code. In this article we’re going to see how you can write better code, so that the other developers, managers, etc. will understand your code properly. This article will help you with a quick techniques that I use while developing my project, and I’ll show you how you can do the same with the help of these techniques. So, Let’s Start!

Tip #1: Always use Prop-Types to define all the props in your components

Prop-types is a runtime type checking for React props and similar objects for it. Prop-types will help you to check if the condition of prop is getting passed or failed into your component. If the proper type of a prop is not passed into your component, then the package might through a warning into a console of your browser. Let’s see the warning that it gives to us: “Warning: Failed prop-type: Invalid prop message of type string supplied to Helo, expected array. In Hello” From the above warning message, it is clear that we’re passing a string into an Hello Component but component is expecting the prop message to be a type of an array.

Tip #2: Use displayName to define a particular name to your component

The displayName string is used in an debugging message. If you don’t have an displayName in your component then you should use it from right now. Well, if you debug your component properly using React Developer Tools, you’ll be able to see the component coz it’s debugged from the name of your function or your class is defining a component. However, if you’d have a situation, where you’d have two components with the same name like (button, navbar, etc.), Then you might need to rename your component. Orelse you won’t be able to distinguish between them. You can solve this same problem using displayName. You can simply rename your component’s using displayName. Let’s say you’ve a component called “Hello” and you’d have it’s class also named as Hello so in your react developer tools you might see the name in the developer tool coz your displayName is “Hello” here.

Tip #3: Use a linter to make your code more easier to review

If you care about your code, then you should use a linter on your code.

Linters is going to help you to make your code similar to other developers like clean and elegant code. You can force other developer to use semicolons at the end of your code. The linter which you can follow is using ESLint it is extension for VS code and you can install that it suits to your need.

Tip #4: Review your own code before creating a pull request

If you are fixing a bug then developing a new feature, chances are that you’re going to pull your change and create a pull request quickly when you’ll be in hurry. The problem is that you don’t review your code changes that you’ve done, As a result, you might miss some places where it’s not perfectly refactored or something. Practicing it day by day makes it better to review the code perfectly, you should make an habit of reviewing it and then creating a pull request and merging it.

Tip #5: Your first file is not always the best

Many of you might already know this but the first thing is not always the best thing. You should always look at your first big thing or file like think about the featres that you might have missed or check if something is remaining to be add in codebase or some warning/errors.

One way to fix this should be doing a Driven Development, which is a great practice but it isn’t followed. If you’d follow this approach, then you might get the better approach. Always, take your time to think about this how you want to proceed further even if you’re better at writing the code, a single line code can through a bug, so looking at the ode making it more better make you run the code smoothly.

Tip #6: Add Comments

Yes, You heard it right adding comments to your code makes it even more better to understand it very easily and to make it even more readable and elegant. Adding comment in react is looks something like this 1) / Here your commented text / So this makes more readable and look great right? So that is why you should add comments in your codebase so if you’re giving it to any other developer then he might understand the code in a better way, like how the function is working , how it’s forming the code properly, how the design of this component is working. This method makes the developer feel understand your codebase and code also looks like in a better flow.

Tip #7: Creating multiple files instead of creating a big file

So here the thing is that sometimes we create a long big file, but instead of creating this much long file and writing a big lines of code we could simply make another files/components and over there we can write the specific code. As it becomes easy for the reviewer to review the code or the specific file properly.

Tip #8: Check the naming conventions of your file properly

Another thing that you should remember is about that if you’d have name your file as according to your components or pages that your creating. Then it’ll also help you in the future if the file is actually understandable.

Let’s say you’ve an file created that is header.js that’s a good name but if you use it at multiple places in the same directory then you might have name it like topHeader.js or bottomHeader.js and that’s actually bad.

Tip #9: Always write test for your code After developing a feature you might fell like it is working properly now we should commit the changes. But there can be edge cases where it might not work properly. Tests will help you to identify those cases.

You should take your time to write test and if you care about your work application/ web app then you should have to write tests for your code.

Tip#10: Using Proper camelCase for Props

Always use camelCase for props as it always help your react component to render. Avoid using an array index as key props, prefer a stable props. Like with a proper value and with a proper camelCase your props works fine with react component and it’ll render the component properly and it’ll not through an error to you’re code. That is why this last style guide for react code is usually helpful.

Conclusion

I hope this style guide for react will help you to write better ReactJS code and better JavaScript code. Let me know if you found this article helpful. Follow me for more such content.

Thanks, Darshan