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.
Discover more from Coursity
Subscribe to get the latest posts sent to your email.