Preface
Have you ever been in a situation whereby your code submission gets rejected or received negative feedbacks from your project lead? Instead of letting all these negative emotions get overwhelmed and demotivate you, let’s take a step out and create something better!
As an engineer, we’re not just writing code that only computer could understand. Instead, we’re writing “human-understandable” codes. Clean code practiced will help you to maintain and structure a better react project. I understand it will be challenging at first, but trust me, in the end you’re helping yourself to survive during the project development road.
Here are some suggestions and tips on improving and maintaining a react project. So let’s get fired up!
1. The imports statements
This shall be the first part to organize in your react code.
We can import the files and modules by using relative imports and absolute imports. In most cases, especially when you’re working with a large scale project, it’s highly recommended to setup and use absolute imports for better readability and refactoring. Say goodbye to the ../../../xxxx nested folder path hell.
In this case, I came out with a set of “React Import Structure (RIS)” in order to organize the dependencies in a neater and maintainable way as below:
Below is a not-so-good example of a bunch of import statements because they are unorganized with poor readability.
Now you can see the differences after reorganizing the import statements by following the structure mentioned above. It’s a lot cleaner now, isn’t it?
2. Separation of the Styles
The more UI components you create, the more lengthy stylesheet you will get. Try to avoid inline styling because it has limitations when comes to CSS features supporting. It’s not really a good practice to have the styling and component codes together in the same file, because it will make things messier and less maintainable.
Therefore, it’s better to separate the styling codes into another file, then import it only when necessary, which is also a way to help reducing the file size. Below is the sample of splitting the styling codes into different files:
3. Separation & Reuse of the Functions
This is same like the concept above. Having too many functions within a component file is a disaster too. Imagine you’re creating a large component, you add spice, sugar and everything “nice” in, sooner you file will easily grow more than 1,000+ lines of codes, but ends up the Powerpuff girls might not come out or it comes out with a less satisfied performance result.
Thus, splitting out the business logics and functions is a better choice because it can be reused globally in the project. In another way, it does provide a cleaner and maintainable code based. Usually, I will keep those separated logics into an utils folder under the src directory for better management. This is my approach, you may consider your own way to organize it.
4. Remove the unused 3C’s
You must be wondering what are the 3Cs here.
It’s not the typical Car, Cash, Credit Card
Instead they are:
Consoles, Comments, Codes
Removes the unnecessary and redundancy codes will significantly improve the code quality and also slim down the bundle size. Adding comments is an awesome habit, but only add it when necessary.
Moreover, You may integrate ESLint and Prettier to help keep track and utilize the coding standard in your project. From here, you can notice if there’s any unused libraries. If you’re pretty sure you will not be using those dependencies sooner or later, and it will not impact your project, advices is to offload them to reduce the project size.
Read here for the Configuration of ESLint and prettier in React project.
5. Standard naming conventions
When comes to coding, there are different types of naming conventions such as PascalCase, camelCase, kebab-case, snack_case etc.
Ideally, it’s to set a primary naming convention in order to achieve a neat and readable code based on you project. For example, you may choose camelCase for your business logics and functions, PascalCase for your component name and an uppercase SNACK_CASE for your global variables.
// PascalCase
const NewComponent = () => (<div>Loading...</div>);// camelCase
const getResponses = () => console.log(responses);// SNACK_CASE
const PRIMARY_COLOR = 'blue';
Conclusions
The code restructuring progress is kinda painful at first, but better worse now than worse later. When time passes, you will definitely becomes more beneficial from it:
- Well-organized code with good readability and maintainability.
- Improves your app’s performance in another way.
- Loves and respect from your teammates and other future-joining developers.
- Discover more yourself…. ☺
Thanks for reading, cheers!
