How I made a quick contribution to React as a noob !

#opensource #react #javascript #challenge

Hello everyone !

I've received many messages asking how to start with contributing open source. In this post I'm going to answer the same question, via an example, in which I made a small contribution to the react project a long time ago. Hopefully this proves the statements

You don't need to be expert coder to contribute to big projects.
You need to learn a significant part of codebase, to contribute.

Background Story:

So, it starts with me nothing to do on a weekend, so I thought let's contribute to some big project and sharpen my "code diving" skills. I chose react because I was learning js and thought reading some react code would supplement that.

Finding something to work on

This starts with skimming through react issues. I started with issues tagged with good first issue , but didn't found those doable. Then started skimming through random issues, unfortunately didn't find anything doable.

This happens with me everytime I've tried to contribute to any project. The key is to persist and get your hands dirty with the code.

So here's what I did then

From my experience with open source projects, whenever the author notices some issue with their code themselves, but can't fix it due to some external issue, they comment it in the word. Usually this comment begins with the words TODO or FIXME.

So I searched the searched the react source code for the word TODO. There were/are many files containing that word. That's obvious for a project of size of React. So after skimming through each of the file, I found ReactDOMComponent.js which had bunch of TODOs. After skimming through the file I found an interesting comment.

Take a break, try to figure out how this is an issue and worthy of a PR. It's subtle !

Here's my thought process after reading the comment.

There's some code to suppress errors when using chrome 2017 version.
2017 is a long time ago.
Maybe chrome started supporting that tag. A quick look at w3schools confirms that. Yess !
Let's remove that code, since it won't be used.

Working on the patch

I had already cloned the project. It's way better to navigate code on local machine, than using GitHub. Not to mention you can use grep .
Created a branch, with a name related to contents of patch. enable-time-tag seemed most obvious.
Deleted the unused code.
Time to run tests ! Need to make sure whether my changes are breaking something else unintentionally. Found how to run tests in react docs

Had to learn how jest works at a very basic level.

Tests were breaking, after triaging the failing test. I found that this test was essentially testing the behaviour of the unused code. There's no point in testing useless code, so removed the test.

Submitting the patch

The easiest part.

Opened a PR with nice description of what the changes are and why they are done. Signed the Facebook CLA.

3 days later the PR was merged !

Mission Successful !

You can also try challenging yourself to contribute to some large project in short amount of time, it's fun and improves the underrated skill of "code diving".