Reading through open source projects is a great way to learn a new library or framework. This can show you what tutorials and documentation can do and how things work and fit together in practice.

ReactJS, in particular, is used by many open source apps. There are hundreds of functioning applications on Github for React learners to use. This article will curate a sample of these open source applications and examples and explain how they use the React library in practice. We will guide you through 20 apps that grow progressively more complex. We hope this helps you in your React learning journey.

Hello World

The simplest example you’ll find in React (and really any library) is the standard Hello World program.

ColorFlood

ColorFlood is a simple, fun, and minersweeper-esque game. The objective of the game is simple. Users see a game board filled with five different colors. They then have to turn the entire board into one color. The competitive part comes from doing so with the least amount of changes.

Tetris

Tetris Play the Redux Tetris demo first with a developer mindset. The concept is elementary. But it is a step up ahead of Hello World This is a simple tetris clone created with both React and Redux.

SVG Pan & Zoom

The SVG pan & zoom uses a React component that adds a zoom and pan feature to images. This is essential to display large SVG images confined to a small window. The zoom detection can be used with scrolling and can also autopan with the mouse. The image is mapped through correlating (x,y) coords.

React Dodge Game

Here we have some moving components with the dodging game. Use the mouse to control where the block goes. An extra area that this example excels at is the addition of a high score counter programmed into the app.

Trivia App

This is a React version of a Jeopardy-like game. The app was written with React and ES6. It was built with both Babel and Webpack. The questions are placeholders in the game and can be replaced with your own types of questions and answers.

CSS Shader

Many JavaScript developers learning React have experience and skill with CSS. This CSS gradient shader is mathematically derived and easy to replicate. Test out the internal mathematical foundations of it while revisiting some CSS ideas.

Sketch Pad

The React sketch pad is a great tool that can be used to sketch anything online. It’s a good way to learn about API integration and playing with the attributes inside of the sketching environment.

Master Mind Game

Another classic game created with React. It was created using ImmutableJS, Redux and ES6. The game came out of the developer testing these ideas and making a working prototype of the game. These additional skills will progress you to the next moderate level of open source applications.

Calculator

All smartphones have an in-built basic calculator. This takes that same principle and copies it to the exact. The React clone calculator showcases the UI setup along with a detailed rendition of the necessary CSS components set up for full implementation.

Moderate Complexity

These next apps work extensively with drawing from APIs. The main components in the main app.js contain the logic for the internal search functions. Throughout these next ten apps, developers will be able to learn more about controlled versus uncontrolled input. The distinction between this in React is important.

React Photo Feed

The photo feed is progressively amping up to a full scale image-based application. It takes from a public photo feed from both Flickr and Yansdex. The app comes with a responsive image grid and customizable columns that all rely on CSS for its style elements.

Another Tetris Clone

This Tetris Clone allows for a snapshot of the game state at any time by calling upon an internal function built into the code, Flatris.serialize(). This is a great place for developers to look at another example of a game but instead understand the data structures it is built upon.

Netflix Clone

This open source application shows an interactive window for a Netflix clone that is capable of API browsing with fetch. Don’t let the advanced UI design put you off towards the complexity of this demo. There are only three components that modify the state of this application. Look through the entirety of the code to pick out features you’re familiar with.

React Solitaire

A game of Solitaire in React calls for many variables to be called alongside a math statistical intensive underlying engine. This app was created with Redux and Webpack. Mocha was used for testing. The styles come from SASS.

Three Dimensional AI Game

This is a game for coders by coders. The idea behind the battle game is where participants are able to code their AI to do battle with and make them fight. It showcases a great way for users to interact with a React application and code in the confines of the application.

Advanced Complexity

The following applications are full-scale applications that are either clones or serve a need for a particular solution. All of these are capable of running on a mobile device and are based off of incredibly popular applications.

Finance App Clone

The iOS stock clone is written in React native. It is available on both major platforms, iOs and Android. The data is taken from Yahoo Finance for a constant updated stream. It also can be used on an Apple desktop as it can tap into a MacBook’s new touch strip features.

Text to Blog Transformer

The next app, Gatsby, is remarkable as it takes simple text and turns it into a dynamic website. Plain text is easily taken into a new blog or website through the static site generator. It supports various markup languages like Markdown and HTML. There is also additional support for more file types. Each template comes reloadable as it is powered by Webpack.

Camera

React Native’s camera is a complete work of mastery over the camera function. The components included in this project allow you to work with recording aspects in both video and picture to take advantage of the iOS live picture function. The project is documented to allow for connection with various updates of iOS.

Complete Chat

The Gifted Chat app is a fully functional messenger that can be used between two or more users. It comes with custom components to load previous messages, add avatars and include touchable links. All of this is supported through the backend and frontend development using React. It’s a good place to learn about the interconnected nature of both proponents of React.

Soundcloud Clone

The soundcloud clone uses both React and Redux. It takes from an existing set of music playlists and brings it back to the end user in a form similar to soundcloud. It is fully functional with all the details needed to change the sound functions.