11 React Examples
Tags: react, javascript, webdev, beginners
Published: 2018-01-01 13:40:19

---
title: 11 React Examples
published: true
description: 11 React Projects to get you started with React
tags: react,javascript,webdev,beginners
cover_image: https://thepracticaldev.s3.amazonaws.com/i/7omd333n76gdaqgdtabi.png
---

## Summary

In this post, I present 11 React projects that I recently created with the objective of helping those new to React to get up and running. This is not a tutorial. Instead, this is a project reference by which to learn by example.

The projects can be found as listed:

1. [Starter]
1. [Clicker] - [live demo here](http://react-clicker.drminnaar.me)
1. [Basic Clock] - [live demo here](http://react-clock-basic.drminnaar.me)
1. [Basic Timer] - [live demo here](http://react-timer-basic.drminnaar.me)
1. [Advanced Timer] - [live demo here](http://react-timer-advanced.drminnaar.me)
1. [Movie Cards] - [live demo here](http://react-movie-cards.drminnaar.me)
1. [Masterminds] - [live demo here](http://react-masterminds.drminnaar.me)
1. [Standard Calculator] - [live demo here](http://react-calculator-standard.drminnaar.me)
1. [Bitcoin Monitor] - [live demo here](http://react-bitcoin-monitor.drminnaar.me)
1. [Standard Weather Monitor] - [live demo here](http://react-weather-standard.drminnaar.me)
1. [NoteWorx React]

The 11th project represents a more advanced React project, and therefore deviates somewhat from the simplicity of the other 10 presented in this post. It is part of another **[series](https://drminnaar.github.io/#section-noteworx)** that I am working on.

## Update

* [3 January 2018] - Based on feedback, links added to live demos of projects.

## The Projects

I have created 11 React projects with varying degrees of complexity. Each project, although different, will always illustrate the following common traits:

* a typcial React project layout structure
* babel setup and configuration
* webpack setup and configuration
* eslint setup and configuration
* SCSS setup and configuration

Each project has a detailed README document that provides more information about the project, and how to get up and running.

A summarized list of projects is listed as follows:

### 1. [Starter]

A basic template that consists of the essential elements that are required to start building a React application. This project can be used as a base starter from which to build new React projects.

Find more information **[here](https://github.com/drminnaar/react-starter)**.

### 2. [Clicker]

A basic React app that allows one to increase, decrease, or reset a counter.

Find more information **[here](https://github.com/drminnaar/react-clicker)**.
Find live demo **[here](http://react-clicker.drminnaar.me)**.

![react-clicker-1](https://user-images.githubusercontent.com/33935506/34466923-203af658-eeec-11e7-8312-1e06a60bd727.png)

![react-clicker-2](https://user-images.githubusercontent.com/33935506/34466924-206b53f2-eeec-11e7-8bd2-37d0a3635068.png)

### 3. [Basic Clock]

A basic digital clock that displays the current date and time, and a toggle switch to toggle date on and off.

Find more information **[here](https://github.com/drminnaar/react-clock-basic)**.

Find live demo **[here](http://react-clock-basic.drminnaar.me)**.

![react-clock-basic-1](https://user-images.githubusercontent.com/33935506/34466950-fb497e2c-eeec-11e7-8d68-c69ced852625.png)

![react-clock-basic-2](https://user-images.githubusercontent.com/33935506/34466951-fb791826-eeec-11e7-8781-8e58394e34c7.png)

### 4. [Basic Timer]

A basic timer that will start a countdown based on an input of time in seconds. The Timer provides start, stop, and reset functionality. When the timer reaches a value <= 10, the timer color changes to red.

Find more information **[here](https://github.com/drminnaar/react-timer-basic)**.
Find live demo **[here](http://react-timer-basic.drminnaar.me)**.

![react-timer-basic-1](https://user-images.githubusercontent.com/33935506/34467010-76c087ac-eeee-11e7-98d2-2d043b1c43f2.png)

![react-timer-basic-2](https://user-images.githubusercontent.com/33935506/34467012-76facb92-eeee-11e7-9175-c34e518e3aef.png)

![react-timer-basic-3](https://user-images.githubusercontent.com/33935506/34467013-77297a6e-eeee-11e7-9135-d812c9b02abc.png)

![react-timer-basic-4](https://user-images.githubusercontent.com/33935506/34467014-7758ad52-eeee-11e7-91b9-0d625be0a56d.png)

### 5. [Advanced Timer]

A countdown timer that offers an advanced UI experience. The Timer uses a Keypad to enter hours, minutes, and seconds into a Display. The countdown timer changes to fullscreen when the Timer is started. A control panel allows one to start, stop, resume, and reset the timer.

Find more information **[here](https://github.com/drminnaar/react-timer-advanced)**.

Find live demo **[here](http://react-timer-advanced.drminnaar.me)**.

![react-timer-advanced-1](https://user-images.githubusercontent.com/33935506/34467052-744c3e0c-eeef-11e7-93ac-1b9e113a4b0b.png)

![react-timer-advanced-2](https://user-images.githubusercontent.com/33935506/34467053-747be440-eeef-11e7-8c44-a1cafb76ee32.png)

![react-timer-advanced-3](https://user-images.githubusercontent.com/33935506/34467054-74aa7daa-eeef-11e7-90ac-8d24eea7f32c.png)

### 6. [Movie Cards]

A basic application that displays a list of movies as a list of cards. Each card provides movie detail such as title, subtitle, description, image, and rating.

Find more information **[here](https://github.com/drminnaar/react-movie-cards)**.

Find live demo **[here](http://react-movie-cards.drminnaar.me)**.

![react-movie-cards-1](https://user-images.githubusercontent.com/33935506/34467097-972a2712-eef0-11e7-95e5-49d131fd2d62.png)

![react-movie-cards-2](https://user-images.githubusercontent.com/33935506/34467098-9759420e-eef0-11e7-8ec9-fb6d59ae5ae3.png)

![react-movie-cards-3](https://user-images.githubusercontent.com/33935506/34467099-9787a2f2-eef0-11e7-9f19-4adadcd603ec.png)

### 7. **[Masterminds]**

A basic game of guessing a number based on various degrees of difficulty. The objective of the game is to guess a number that is randomly generated by the game engine. On each guess, the game will indicate (using a message and color) how close (or far) your guess is from the actual generated number. Upon guessing the correct number, one is presented with the option to play again.

The game provides 3 difficulty level settings, namely, easy, medium, and hard. Based on the difficulty setting, the game engine will generate a random number that falls within a number range. For example:

* Easy - 0 -> 10
* Medium - 0 -> 100
* Difficult - 0 -> 1000

Find more information **[here](https://github.com/drminnaar/react-masterminds)**.

Find live demo **[here](http://react-masterminds.drminnaar.me)**.

![react-masterminds-1](https://user-images.githubusercontent.com/33935506/34467163-c26f88a8-eef1-11e7-8192-e6f7fabae32d.png)

![react-masterminds-2](https://user-images.githubusercontent.com/33935506/34467164-c29ecdf2-eef1-11e7-911a-3ea22bd1f419.png)

![react-masterminds-3](https://user-images.githubusercontent.com/33935506/34467165-c2cc5d58-eef1-11e7-9909-7b432147886e.png)

![react-masterminds-4](https://user-images.githubusercontent.com/33935506/34467166-c3001f9e-eef1-11e7-97e4-45dcf28f00c7.png)

![react-masterminds-5](https://user-images.githubusercontent.com/33935506/34467167-c32dfc7a-eef1-11e7-8688-a5ba7ee28484.png)

### 8. [Standard Calculator]

A calculator that provides the essential arithmetic operations, an expression builder, and a complete history of all expressions. It allows one to toggle between a keypad and history as an input mechanism.

Find more information **[here](https://github.com/drminnaar/react-calculator-standard)**.

Find live demo **[here](http://react-calculator-standard.drminnaar.me)**.

![react-calculator-standard-1](https://user-images.githubusercontent.com/33935506/34467193-df3ff1ce-eef2-11e7-9aab-4de0a3e5aea2.png)

![react-calculator-standard-2](https://user-images.githubusercontent.com/33935506/34467194-df6e4d9e-eef2-11e7-9ea5-c2f04b14f12f.png)

![react-calculator-standard-3](https://user-images.githubusercontent.com/33935506/34467195-df9cfa18-eef2-11e7-9969-10fd05fb7e9d.png)

![react-calculator-standard-4](https://user-images.githubusercontent.com/33935506/34467196-dfcc9872-eef2-11e7-928e-379ce6d1dc4e.png)

![react-calculator-standard-5](https://user-images.githubusercontent.com/33935506/34467197-e03c7d0e-eef2-11e7-860f-c6145566453c.png)

![react-calculator-standard-6](https://user-images.githubusercontent.com/33935506/34467198-e079fa6c-eef2-11e7-8113-db6f236b6850.png)

### 9. [Bitcoin Monitor]

An app that monitors changes in the Bitcoin Price Index (BPI).

By default, the BPI will be shown for USD, GBP, and EUR. Optionally, one can select ones own currency to display in addition to the 3 aforementioned currencies.

Bitcoin Monitor makes use of the **[CoinDesk Bitcoin Price Index API](https://www.coindesk.com/api/)**.

Find more information **[here](https://github.com/drminnaar/react-bitcoin-monitor)**.

Find live demo **[here](http://react-bitcoin-monitor.drminnaar.me)**.

![react-bitcoin-monitor-1](https://user-images.githubusercontent.com/33935506/34467240-20fd8e04-eef4-11e7-9398-5bbbc8ba19c7.png)

![react-bitcoin-monitor-2](https://user-images.githubusercontent.com/33935506/34467241-212bd91c-eef4-11e7-8011-496d2ba0dd8c.png)

![react-bitcoin-monitor-3](https://user-images.githubusercontent.com/33935506/34467242-2159958c-eef4-11e7-82dc-5d82d68b635a.png)

![react-bitcoin-monitor-4](https://user-images.githubusercontent.com/33935506/34467243-21881b96-eef4-11e7-9636-fe828f63b1e1.png)

### 10. [Standard Weather Monitor]

A weather application that displays the current weather, daily forecasts, and hourly forecasts based on your current geolocation. The application integrates with both the **[OpenWeather API](http://openweathermap.org/)** and **[Google Geolocation API](https://developers.google.com/maps/documentation/geolocation/intro)**.

Find more information **[here](https://github.com/drminnaar/react-weather-standard)**.

Find live demo **[here](http://react-weather-standard.drminnaar.me)**.

![react-weather-standard-1](https://user-images.githubusercontent.com/33935506/34467275-f63d48c0-eef4-11e7-9d43-45666432d54f.png)

### 11. [NoteWorx React]

This project is not as basic as the previously mentioned projects. In fact, this is a project that is part of another series that I am working on and will release in the future. However, I thought that it would be useful to mention it as part of this post for those seeking something more advanced. If this project interests you, then you can find a list of the projects in the series thus far at my **[github page](https://drminnaar.github.io/#section-noteworx)**.

[NoteWorx React] is a basic note taking application that uses React frontend to capture and manage notes, an api written in ExpressJS, and mongodb to store notes.

Find more information **[here](https://github.com/drminnaar/noteworx-react-mongodb)**.

![react-noteworx-1](https://user-images.githubusercontent.com/33935506/34467361-d5ad449a-eef7-11e7-8e09-4d4af017a453.png)

![react-noteworx-2](https://user-images.githubusercontent.com/33935506/34467362-d5dc0302-eef7-11e7-835a-47ea6a9f3bd1.png)

![react-noteworx-3](https://user-images.githubusercontent.com/33935506/34467363-d60fa91e-eef7-11e7-8dc0-7123785cd43f.png)

![react-noteworx-4](https://user-images.githubusercontent.com/33935506/34467364-d63d9c02-eef7-11e7-9889-2dba335abaad.png)

![react-noteworx-5](https://user-images.githubusercontent.com/33935506/34467365-d66c6c4e-eef7-11e7-81f9-1c5b75a2c128.png)

![react-noteworx-6](https://user-images.githubusercontent.com/33935506/34467366-d6a45f96-eef7-11e7-89c7-d44a98c4bea4.png)

## Conclusion

This is not the end. I will continuously be adding new projects. I will be adding more simple React projects, but I will also be adding more advanced React projects. In the end it is my goal to provide as many projects as possible to help you to crawl, then walk, and then run. I will leave the flying step to smarter people than I ;). The 10 projects that I have thus far created are to help you to crawl, and possibly walk.

[Starter]: https://github.com/drminnaar/react-starter
[Clicker]: https://github.com/drminnaar/react-clicker
[Basic Clock]: https://github.com/drminnaar/react-clock-basic
[Basic Timer]: https://github.com/drminnaar/react-timer-basic
[Advanced Timer]: https://github.com/drminnaar/react-timer-advanced
[Movie Cards]: https://github.com/drminnaar/react-movie-cards
[Masterminds]: https://github.com/drminnaar/react-masterminds
[Standard Calculator]: https://github.com/drminnaar/react-calculator-standard
[Bitcoin Monitor]: https://github.com/drminnaar/react-bitcoin-monitor
[Standard Weather Monitor]: https://github.com/drminnaar/react-weather-standard
[NoteWorx React]: https://github.com/drminnaar/noteworx-react-mongodb