How to Contribute to Open Source Projects

Recently, I have made a contribution to material-ui, a very popular React UI component library.

I picked up the task from this issue, this is my merged pull request.

In this article, I would like to share the basic steps about contributing to open source projects for beginners.

Fork the repository, you should fork all branches.

Clone the fork to your local machine and add the upstream remote

git clone https://github.com/<your username>/material-ui.git
cd material-ui
git remote add upstream https://github.com/mui/material-ui.git

Synchronize your local next branch with the upstream one:

git checkout next
git pull upstream next

Install the dependencies with pnpm (yarn or npm aren't supported):

pnpm install

You can run the project on your local machine

npm run start

Now you can get familiar with the project structure, it use monorepo to manage many projects in a single code repository. You can check out my series, Building a Vue 3 Component Library from Scratch, if you are getting fear about this big project.

The next step is to pick up a task that you can handle, https://github.com/mui/material-ui/issues

Before you pick up your first issue, You should read this https://github.com/mui/material-ui/blob/next/CONTRIBUTING.md#your-first-pull-request

For me, I picked a task from this issue.

Before you change the code, Create a new topic branch with meaningful name.

git checkout -b react-complier-mui-utils

Make changes, commit, and push to your fork:

git push -u origin HEAD

You can learn the pull request witch fix similar issues merged successfully, checkout how they changed the code.

For me, I refer to this pull request, it just add some comment code in File Changes, so I try to add some comment for the files too.

After pushing your code, you can see pull request button, click it and write your own pull request.

After submitting pull request, the project maintainer will review your code, sometimes they will give you suggestion to make your changes better, you will learn a lot here. When everything is ok, they will merge it.