Best Open Source Projects React

Open Source doesn’t have to mean inaccessible. For newcomers to the software world, it can be daunting trying to find a project that fits your needs, or figuring out how to begin contributing. This list contains some of the best-of-the-best open source projects using React as their JSX language. Each project could provide you with a great place to start learning and coding with React.

Did you ever wonder which are the best open source projects to browse or contribute at GitHub? Below you will find a list of 50 best open source projects that have high number of stars. By the way, these projects are viewed based on the number of stars they got at GitHub.

Choose Only One Project at A Time

With so many open-source projects available on Github, we often feel overwhelmed with them. That’s okay.

But, when you really want to learn from those projects, never do that by learning them at once. Human brains aren’t designed to multi-task.

You should filter them, and choose only one project that you really want to learn. After you finished it, then you can choose the next project.

Cloud Music – Repo

This is a clone of NetEase, a cloud music streaming service. The README is in Chinese but the code is in plain English.

Demo, GIF from README

This project uses redux (without redux-toolkit) and hooks. What I find interesting in this project is the code structure:

react-cloud music code structure

At first, it seems pretty standard but after reviewing the reducer (store/reducer.js) I noticed that they are “grouping” (inside application folder) some components and styles alongside the redux logic:

Example of grouping files by feature

How to choose a project to commit to

Choose a project that will give you new knowledge. Do not choose a product that is too easy to change or debug. Find a project that you think will survive for long enough to keep what you have invested in. You also need to choose a project that will be useful to others.

You’d benefit more if you were a part of the project from the beginning so that you get to appreciate the full life cycle of a project: the idea, prototyping, design, testing, implementation.

A good way to find a project you will invest your knowledge and time in is to ask other people. There is a good chance you will get a good recommendation. Find a community that will help you grow and communicate politely.

You can also contribute to something that you use regularly or will use in the future. You might pay attention to the project your company uses.

The other approach is to create a new project of your own. If your goal is just to learn how to GitHub, or just gain some basic efficiency in programming – a self-initiated project will do that. You could make something small and simple just to exercise your open source experience, or put a lot of time into something larger and try to create something that involves other contributors. Don’t be afraid to initiate your own open source projects.

Replicate, But Don’t Copy-Paste the Codes

With an example project, you might think that you will learn it only by reading the codes. No, you don’t.

You should rewrite it on your own, and don’t just copy-pasting it. It may sound trivial, but trust me you will find out more as you rewrite the codes.

Todoist clone – Repo

Karl Hadwen did this Todoist clone, and he even has a video tutorial on Youtube.

Screenshot from README.me

For the “backend”, he used Firebaseinstead of building an API from scratch. He used context and didn’t use redux (yes, you don’t always need to use redux).

What is a good open source project

To know what open source project you should invest your time in, you need to understand what makes it good.

Adding even a small feature to a project requires you to understand how the whole project/library/plugin operates. Therefore, point one: the project should have good documentation. All dependencies should be well described. Popular and good quality open source solutions always have good documentation. This can be a great sign of quality and support one can expect from the community.

The second thing worth paying attention to is whether work with issues is well organized. Look at the issues in general. How many critical issues are there in the project? How quickly do they close?

Another thing is how rules of committing are documented. Imagine the situation. You found a bug, you made a big effort to fix it, it caused you some pain, but your patch is not included in the commit because the rules are not clear enough.

Look into the community. It is one of the largest resources available for an open source project. An active community always helps to move the project forward. A good open source software always has a community of developers or active users who write code, detect and provide support to other users. Choosing software with sound community support will always help you in the future whenever you are stuck in fixing bugs. Good community support will always help you fix problems which might occur in the future.

When looking at projects on Github, look for people/packages with many stars, watchers, forks, contributors, etc. These visible cues of community support show that the community cares about that person, project, or action and many others will benefit from it.

Remember that the number of commits, issues, and pull-requests (PRs) can be a signal of investment and commitment to a project. 

Experiment, and Add Your Own Flavour

After you find some unfamiliar codes, do some experiment with them. Modify them, see if it still works or not, and again, find out why.

You should also add your own codes as you learn more. Combine it with the base codes. It can be styling or adding more features.

With enough modification, you can make it as your portfolio, of course by mentioning the example project you use.

Developer tools

WatermelonDB

GitHub: https://github.com/Nozbe/WatermelonDB
GitHub Stars: 6.7k
Web-site: https://watermelondb.now.sh/
Contribution guide: Yes

WatermelonDB screenshot

WatermelonDB is a high-performance reactive database for powerful React and React Native apps.

It’s optimized for building complex applications in React, and the number one goal is real-world performance.

In WatermelonDB nothing is loaded unless requested. And since all querying is performed directly on the rock-solid SQLite database on a separate native thread, most queries resolve instantly.

But unlike using SQLite directly, Watermelon is fully observable. So whenever you change a record, all UI that depends on it will automatically re-render. For example, completing a task in a to-do app will re-render the task component, the list (to reorder), and all relevant task counters.

Tomato Work – Live | Repo

Tomato-work is a personal affairs management system written in React using hooks and redux:

Live demo, took from README

For the UI, it uses Antd, which is pretty awesome BTW. The code structure is standard:

Code structure

What I find interesting is that it has a services folder (remind me of angular) where each file is an abstraction to make API calls. So instead of calling axios directly in the component, he uses a service function instead.

Starter Kits

Gatsby.js

GitHub: https://github.com/gatsbyjs/gatsby
GitHub Stars: 45k
Web-site: https://www.gatsbyjs.org/
Contribution guide: Yes

Gatsby.js screenshot

Gatsby is a free open-source modern site generator for React. Websites built on Gatsby are fully functional React apps so you can create dynamic web apps, from blogs to e-commerce sites and user dashboards. Gatsby sites are built using React and GraphQL. 

The product can pull data from any source, whether it’s Markdown files, headless CMS like Contentful or WordPress, or a REST or GraphQL API. Gatsby sites don’t require servers so you can host your entire site on a CDN for a fraction of the cost of a server-rendered site.

Write with me – Live | Repo

Write with me is a real-time collaborative markdown editor written in React with hooks and it uses AWS Amplify

Demo

As you can see, this is a small project:

Code structure

So, the code structure is not organized using different folders. All the state management is done using useReducer hooks.

There is a graphql folder because Amplify works with graphql

Create react app

GitHub: https://github.com/facebook/create-react-app
GitHub Stars: 79.4k
Web-site: https://create-react-app.dev/
Contribution guide: Yes

Create react app is a starter kit that helps to start a React website without learning and configuring many build tools.

You don’t need to rebuild the whole application when developing. Instant reloads do all the work for you. Under the hood, Create react app use Webpack, Babel, ESLint, and other projects. If you need an advanced configuration, you can ”eject” from Create React App and edit their config files directly.

This is the most popular react project and starter tool across React ecosystem. It is supported by Facebook Open Source.

JIRA Clone – Live | Repo

This is a simplified JIRA Clone, looks awesome!

Screenshot from the live website

Analyzing the code structure, you can see it uses cypress and jest for testing:

Code structure

As the author says, it is a good example of a modern real-world React codebase. There are the features (from README):

List of features

Conclusion

Explore and find awesome open source projects built with React, along with their contributors and stars.

0 Comments

No Comment.