How To Get Familiar With An Existing React Codebase
Tags: codebase, chrome, extension, devtools
Published: 2023-02-27 19:50:06

There are a few reasons why you may want to get familiar with an existing codebase:

-   Learning new programming techniques and best practices
    
-   Contributing to an open-source project
    
-   Starting a new job
    

Regardless of which category applies to you, you may need to level up and quickly get comfortable in a large codebase. So these 4 tips I'll be discussing should get you up and running in any new react codebase you'll possibly be working with.

### 1️⃣ Set Up a Development Environment

You're new to the codebase, trying to learn and you're probably going to break things. You don't want that in production. So set up a development environment, preferably with version control, where you can test things without breaking any real thing.

Use features like syntax highlighting, search, and code folding to help you quickly find what you're looking for. Shortcuts like Ctrl + Tab in VS Code can help you switch between files quickly as you navigate the codebase. I covered some VS Code shortcuts that helped my productivity in [this article](https://dev.to/ademoyejohn/5-great-custom-hooks-for-your-react-project-40jm)

### 2️⃣ Read the Documentation

if there is any documentation available, read it through. It could be a simple user guide or API documentation. Figure out what parts may be useful because not all of the documentation is necessarily useful at that moment. So try to understand what parts may be useful to you and understand them as best as you can.

### 3️⃣ Trace Through the Code

Start at a small feature or component (a simple task) that's easy to locate in the application and look for it in the codebase. You could install the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) chrome extension which allows you to inspect the component hierarchies in the Chrome Developer Tools.


![Tabs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2h7e4sw3xoc1bt65a443.PNG)

After installing the extension, you will get two new tabs in your Chrome DevTools: "⚛️ Components" and "⚛️ Profiler".


![Components Tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5l8lnsxw1ziasqkl2j8.PNG)

The Components tab shows you the root component on the page, which can be collapsed to see the child components.


![Arrow Icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o9ud2kr1px24901xq5fj.PNG)

Use the arrow icon for the extension to select the component in the app you want to start from.

![Rendered By](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulsbq21co0bii9424m2q.PNG)

That shows the components (as they are named in the codebase) rendering the part you clicked on in the browser. You can find them under the "rendered by" section in the right panel. Then you could search for the name in the codebase.

### 4️⃣ Talk With Existing Users And Share Your Findings

Whenever you're unsure about something, contact a Senior Developer. Make notes on what they say if needed, so you don't have to return to them on the same topic. Documenting what you learn will definitely increase your ability to use them as a resource efficiently. They would be less likely to get grumpy and gladly help you when next you come around.

## Final Thoughts

There are different realities around different projects: there might be nobody in a previous position you can ask for help; other projects may not have any documentation available. And it's not an uncommon situation. But these tips should in some way get you familiar with the codebase.

But if you're an experienced developer, you probably have a way you approach new codebases. So let me know what you think. Thank you!