Approaching a new React codebase at work can be both exciting and challenging. It requires patience and a willingness to learn. You won't learn it all right away. It will be a step-by-step learning process. By following the tips below, you'll have a smoother onboarding experience with the new codebase and you'll even start making impactful contributions to it.
Ask questions
Don't be afraid to ask questions about why something was done a particular way. You are expected to have plenty of questions. Your team will be very surprised if you don't ask questions.
Be sure to get an introduction to the codebase by someone on the team who is more experienced. They'll be able to give you a high-level overview of the product as well as explain the general structure of the codebase.
Read the documentation
Find out if the product has official documentation. If not, take a look at the README files in the codebase. Read over the docs with the goal of learning as much as you can from them.
Understand the product before the code
The first instinct most developers have when joining a new team is to dive right into the code. However, the best way to start is to use the product that you'll be working on. Learn how to actually use the application just as its customers and end users do. Try out common workflows. This will help you learn a lot about the product and why things might have been done a certain way.
Make sure that you understand what the product does first. Then, you can dig deeper into how it does those things.
Use diagrams
Consult any architectural designs that the team has of the app that you'll be working on.
Look over the folder structure of the app. The goal is to learn how the app is organized and separated into layers. You'll find out what sort of design patterns and design systems the app is using.
If your team does not already have one, draw a diagram of the React component structure of the app. This diagram will be a great personal reference for you going forward. You can also share it with the team since it can help other onboarding members in the future.
Run the app locally
Learn how to run the app locally. This will allow you to tinker with the codebase in an effort to learn more about it. Look into the package.json scripts and dependencies to see what tools the app is using.
Pair programming
One of the fastest ways to get up to speed with a new codebase is to do some pair programming with other members of the team. Reach out to more experienced team members and ask them if you can pair with them on something they are working on. Or, take on a simple task and ask a more experienced developer to help you solve it by pairing with you.
Look over pull requests
Reading through the most recent pull requests (PRs) is an excellent way to gain insights into how the team codes and what the team has been working on lately. When something looks unfamiliar in a pull request, ask questions. If you notice room for improvement in a pull request, don't hesitate to share it in a helpful comment.
Read and write tests
Read over the app's unit and end-to-end tests to better understand what individual files and components do, how they handle edge cases, and what sort of conditions can lead to errors.
If you find that the application lacks any tests, whether they are unit tests or end-to-end tests, you can offer to write them. Writing tests not only improves the stability of the codebase, but it also provides you with a deeper understanding of the features you're testing. It forces you to dive into the code, understand its functionality, and identify potential issues or edge cases.
Fix small bugs
Work on small bug fixes. These relatively easy fixes will boost your confidence in your ability to contribute to the codebase and the team. By taking on your first bug fix tickets, you'll end up learning a bunch of other things relevant to the codebase. Things such as what Git branching model the team uses, their pull request process, their continuous integration (CI) checks that run on every pull request, and their release process.
Conclusion
Jumping into a new codebase can be overwhelming. Pace yourself and don't feel that you need to know everything right away. Try to learn simply what you need for the task at hand and leave the rest for later.
If you're going to start working on implementing a new feature, be sure to get familiar with the app's existing components first, so that you don't end up adding duplicate components to the codebase.
Let's recap the tips for working with a new React codebase at work:
- Ask questions
- Read the documentation
- Understand the product before the code
- Use diagrams
- Run the app locally
- Pair programming
- Look over pull requests
- Read and write tests
- Fix small bugs