Tips To Study Large Frontend Codebases
Tried and tested methods to make sense of frontend codebases. 🧢
Here's are 4 neat tricks to study large frontend codebases with relative ease.
I recently started working on a relatively large React codebase for a company and had to digest a lot of code to understand how things work. Often, I found myself searching through the codebase to find out which sections of code are responsible for specific features.
Searching UI elements by Text: Explore the frontend on your local environment and notice the "text" of various UI components. You can search for the text and find the appropriate component. Sometimes, the text is in a constants file or something else, in that case, you can search for the variable as a next step and find the component where the text is rendered. This is particularly useful during the initial days when you need to navigate the codebase and figure out how a particular functionality works.
Find entry points: In the case of React / Next apps, you could start by looking at the App.jsx/App.tsx file and start navigating from there. You will be able to see the code that runs when the application first startups up, and can use the code in the App.jsx/App.tsx file to understand the entire component tree.
Exploring custom hooks: This is only applicable for React / Next apps. Custom hooks will most likely be used all over the codebase. You can trace the code by finding out what a custom hook does and where it is called. This will help you understand the abstractions that do all the magic in your codebase. There's a lot you might not understand especially if the naming schemes aren't standard, but that's when you ask questions to other engineers on the team.
Explore the Component Tree in React Dev Tools: This is the most standard way to make sense of a React app. The component tree will give you a clear picture of where some functionality resides. Moreover, you can see the rendering patterns and state as well, which improves debugging and building an overall understanding.
I have been using these techniques for years, so decided to write a post on it.
— AdiPat ✨
If you're looking for someone to build your startup MVP, contact me!
I actively work on Open Source Software, check out my GitHub Profile. ✨
Follow me on Instagram (@adityapatange), I talk about tech, meditation, startups and hip hop! ⚡️
I write byte-sized insights on Threads to supercharge your day. 💡