Hacktoberfest 2022: Contributing as A React Developer
Tags: opensource, react, hacktoberfest
Published: 2022-10-16 22:58:39

by [Wisdom Ekpotu](https://blog.openreplay.com/authors/wisdom-ekpotu)



October is here, and Hacktoberfest 2022 has officially begun! [Hacktoberfest](https://hacktoberfest.com/) is an annual month-long celebration of open-source organized by [DigitalOcean](https://www.digitalocean.com/), [Appwrite](https://appwrite.io/) and [Docker](https://www.docker.com/).

 
![1](https://blog.openreplay.com/images/hacktoberfest-contributing-as-a-react-developer/images/image01.png)
 

Hacktoberfest 2022 marks the 9th edition. During this event, anyone worldwide can get involved by contributing to any open-source project of their choice and earn a limited edition swag after merging four successful pull requests.

It aims to foster the open-source movement and encourage participation.

Hacktoberfest is open to everyone and at Any skill level, whether you are a beginner starting in your tech journey or you are already an expert in your field. 

 To fully understand why Hacktoberfest exists, we need to get familiar with a term called **Open Source**.
 
## What is Open Source?
If you have never heard about open source, it is precisely how it sounds. It's Social Coding. It's like social media but for Software.

[Open source](https://opensource.com/resources/what-open-source) is a term that originally referred to ***Open Source Software (OSS***). [Open source software (OSS)](https://opensource.com/resources/what-open-source) is Software that is made accessible for use, modification, and distribution with its original rights. It is software that is distributed with its source code. 

The [source code](https://en.wikipedia.org/wiki/Source_code) of software is the portion that most computer users never see; it's the code that computer programmers change to determine how a program or application operates.

Programmers with access to the source code can modify a program by adding to it, modifying it, or fixing any problematic sections. OSS frequently comes with a license that enables programmers to adapt the software to their specific needs and regulate how it can be distributed.

Even if you haven't contributed to open-source projects yet, chances are good that you already use a number of them.

People like you who contribute to them are the sole reason they are available and present.

Here are some well-known examples of Open Source Software:
[Mozilla Firefox](https://github.com/mozilla/), [VLC Media Player](https://github.com/videolan/vlc), [Linux Kernel](https://github.com/torvalds/linux), [Reactjs Library](https://github.com/facebook/react), [Android OS](https://source.android.com/).
 
## Reasons to Contribute to Open Source?
There are plenty of reasons why you should contribute to open-source projects. Some of them are:
- Learn new skills and Communicate with others.
- Gain Recognition and Leverage Your Career.
- Improve existing software.
- Gain Real-World experience.
- Build your confidence as a developer.
- Build your resume or CV.
 
## What's new this year to Hacktoberfest?
There are some new changes made In Hacktoberfest 2022. This year's edition focuses on encouraging **non-code** and **low-code** contributions. There has been a long-running misconception that open source is only for technical persons (developers) who want to write code. This is false, and Hacktoberfest seeks to change the narrative, placing extra emphasis on them.

Head over [here](https://hacktoberfest.com/about/) to learn more.
 
You can sign up anytime between now and October 31st, so you have just over three weeks to participate.

Click this link to the [Official Website](https://hacktoberfest.com/) to get started.



![OpenReplay](https://blog.openreplay.com/banner-blog_1oYPGT.png)

_Start enjoying your debugging experience - <a href="https://github.com/openreplay/openreplay" >start using OpenReplay for free</a>._






## Contributing as A React Developer
The React Ecosystem is built on many open-source projects; hence, there are many projects to contribute to. Almost all software/tools we use daily as React Developers are open Sourced projects.

Hacktoberfest is a fantastic way to get involved with the React open-source community and support the projects you use and love. 
 
### Finding React projects to work on
Finding a decent repository to contribute to, especially for issues within your area of expertise, is one of the most challenging aspects of open source.

So, here are a few approaches and sources for discovering Open Source projects to participate in:

**For Beginners:**
- GoodFirstIssues.com
- [GoodFirstIssue.dev](https://GoodFirstIssue.dev)
- Firstcontributions.github.io

Also, you can check out the [GitHub Explore](https://github.com/explore)  page for various projects.
 
### Using the GitHub Issues Search Filters
We can take it a little step further and directly search for issues we can work on. We would do this using the issues search tab. 

Sign in to GitHub and Navigate to the issues tab.
 
![2](https://blog.openreplay.com/images/hacktoberfest-contributing-as-a-react-developer/images/image02.png)
 
Now you can search for React issues using various terms. Such as:


**is:** You can sort issues by state, such as open/closed and issues/pull requests.
  
```
is:open is:issue
```
  
**label:** You can look up issues based on labels like "help wanted", "frontend", "hacktoberfest" etc.
  
```
label:hacktoberfest label:react 
```
  
**language:** Sort the issues based on the language you choose, such as Java, Dart, or javascript.
  
```
language:javascript
```
  
Hence when we put such a combination into a single search string, we can get the following result.

```
is:open is:issue label:hacktoberfest language:javascript label:react 
```

 
![3](https://blog.openreplay.com/images/hacktoberfest-contributing-as-a-react-developer/images/image03.png)


  
To see more filter options to further narrow your search, click [here](https://docs.github.com/en/search-github/searching-on-github/searching-issues-and-pull-requests)

 
## Some open-source projects you can start contributing to
### 1. React Play
[React-play](https://github.com/reactplay/react-play) is an open-source platform that helps you learn ReactJS faster with a hands-on practice model. It is a collection of projects that you can use to learn ReactJS.
 
![4](https://blog.openreplay.com/images/hacktoberfest-contributing-as-a-react-developer/images/image04.png)
 
Here are some resources to get you started:
- [React Replay issues.](https://github.com/reactplay/react-play/issues)
- [React Replay's contribution guide.](https://github.com/reactplay/react-play/blob/main/CONTRIBUTING.md)
 
### 2. Novu
[Novu](https://github.com/novuhq/novu) is a fully functional real-time notification center for your web and react apps. The only open-source notifications infrastructure that manages multi-channel content, scheduled notifications, digest engine, user preferences, and delivers Email, SMS, Push and Chat notifications using a single API.
 
![5](https://blog.openreplay.com/images/hacktoberfest-contributing-as-a-react-developer/images/image05.png)
 
Here are some resources to get you started:
- [Novu issues.](https://github.com/novuhq/novu/issues)
- [Novu's contribution guide.](https://github.com/novuhq/novu/blob/main/CONTRIBUTING.md)
 
### 3. Storybook 
[Storybook ](https://github.com/storybookjs/storybook)is a frontend workshop for building UI components and pages in isolation. It was made for UI development, testing, and documentation.
 
![6](https://blog.openreplay.com/images/hacktoberfest-contributing-as-a-react-developer/images/image06.png)
 
Here are some resources to get you started:
- [Storybook issues.](https://github.com/storybookjs/storybook/issues)
- [Storybook's contribution guide.](https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING.md)
 
### Sentry
[Sentry](https://github.com/getsentry/sentry-javascript) is the Official Sentry SDK for JavaScript. Sentry helps over 3.5M developers and 85K organizations see what matters, solve errors and performance issues quicker, and continuously learn about their application health - from the front to the back.
 
![7](https://blog.openreplay.com/images/hacktoberfest-contributing-as-a-react-developer/images/image07.png)
 
Here are some resources to get you started:
- [Sentry issues.](https://github.com/getsentry/sentry-javascript/issues)
- [Sentry's contribution guide.](https://github.com/getsentry/sentry-javascript/blob/master/CONTRIBUTING.md)
 
### Refine
[According to Official Documentation:](https://refine.dev/docs/getting-started/overview/)

*[Refine](https://refine.dev/) is a React-based framework for the rapid ✨ development of web applications. It eliminates the repetitive tasks demanded by CRUD operations and provides industry-standard solutions for critical parts like authentication, access control, routing, networking, state management, and i18n.*
 
![8](https://blog.openreplay.com/images/hacktoberfest-contributing-as-a-react-developer/images/image08.png)
 
Some resources to help you get started:
[Refine issues.](https://github.com/pankod/refine/issues)
[Refine's contribution guidelines.](https://refine.dev/docs/contributing/)


## Conclusion
It can be intimidating to submit your first  Hacktoberfest contribution. Start by making little but significant adjustments to your favorite project, and then delve deeper.

## Resources 
- [Hacktoberfest Official Website](https://hacktoberfest.com/)
- [Awesome First PR Opportunities](https://github.com/MunGell/awesome-for-beginners)
- [Issues Search Query CheatSheet](https://embeddedartistry.com/blog/2017/11/09/github-search-query-cheat-sheet/)

***Keep Hacking!!***




> A tip from the editor: Look at our [Getting Started With Open Source At Hacktoberfest](https://blog.openreplay.com/getting-started-with-open-source-in-hacktoberfest/) and [What NOT To Do At Hacktoberfest 2022](https://blog.openreplay.com/what-not-to-do-at-hacktoberfest-2022/) on how to get started with contributing -- and how NOT to!


<h2>Open Source Session Replay</h2> 

_<a href="https://github.com/openreplay/openreplay" target="_blank">OpenReplay</a> is an open-source, session replay suite that lets you see what users do on your web app, helping you troubleshoot issues faster. OpenReplay is self-hosted for full control over your data._



[![newsletter](https://blog.openreplay.com/newsletter_Z1P0UIP.png)](https://newsletter.openreplay.com/)