Project ideas for React beginners with demo 2020
Tags: react, projectbenatar, webdev, app
Published: 2020-04-18 03:14:25


![Project ideas for React beginners with demo 2020](https://i2.wp.com/blogreact.com/wp-content/uploads/2020/04/HiRes-17.jpg?fit=750%2C450&ssl=1)

This is the most asked question to me from new students i.e what are the different project that I can create to familiarize with the React. So, I decided to create a list for helping beginners to help them in there journey. In this post we basically gonna talk about what are the different Project ideas for React beginners that they can build.

## 1. Basic Calculator

![Project ideas for React  calculator](https://i0.wp.com/blogreact.com/wp-content/uploads/2020/04/image-3.png?w=750&ssl=1)

You can create a basic calculator with React. Which simply gonna perform most of the mathematical operations using the basic React concepts. It will definitely gonna be a Stateful component. Where you need to render digits, operations and one div for displaying the values.

[Demo 1](https://codepen.io/mjijackson/pen/xOzyGX)

[Demo 2](https://codepen.io/tbremer/pen/wKpaWe)

[Demo 3](https://codepen.io/ariksasmita/pen/yqqzZW)

## 2. Todo App

![Project ideas for React  todo list](https://i0.wp.com/blogreact.com/wp-content/uploads/2020/04/image-4.png?fit=750%2C181&ssl=1)

A todo App is basically gonna be an app where you gonna add new items to a list and you also gonna remove selected items using the array and the states.

[Demo 1](https://codepen.io/marekdano/pen/bVNYpq)

[Demo 2](https://codepen.io/Tiendq/pen/jrZAWk)

[Demo 3](https://codepen.io/hotate17/pen/oYKMaM)

## 3. React Clock

![Project ideas for React  clock](https://i1.wp.com/blogreact.com/wp-content/uploads/2020/04/image-5.png?fit=750%2C111&ssl=1)

In the React Clock we basically gonna show the current time in the UI. You can add seconds and some cool styling to make it pretty.

[Demo 1](https://codepen.io/anuragasaurus/pen/GjagqV)

[Demo 2](https://codepen.io/luizdemoraes/pen/gKKOBK)

[Demo 3](https://codepen.io/capfishpt/pen/JNbwoE)

## 4. Light bulb

![light bulb idea](https://i2.wp.com/blogreact.com/wp-content/uploads/2020/04/image-6.png?fit=750%2C254&ssl=1)

In this project idea you initially gonna show few light bulb in off condition and whenever you gonna click on any bulb it will switch back to on condition.

[Demo 1](https://codepen.io/capfishpt/pen/oWJJvp)

[Demo 2](https://codepen.io/PaulAik/embed/xpMMBQ/?height=265&theme-id=0&default-tab=result&embed-version=2)

[Demo 3](https://codepen.io/vahin/pen/VjegMy)

[Demo 4](https://codepen.io/nealfennimore/embed/gXedLp?height=375&theme-id=1&slug-hash=gXedLp&default-tab=result&user=nealfennimore&embed-version=2&pen-title=React%20Context%20Lights%20with%20PureComponents)

## 5. Cards

![](https://i2.wp.com/blogreact.com/wp-content/uploads/2020/04/image-7.png?fit=750%2C270&ssl=1)

With the cards project you basically gonna create reusable cards which gonna display some information like title, description, images and few links.

[Demo 1](https://codepen.io/coderakki/pen/bYRWoq)

[Demo 2](https://codepen.io/jamiehalvorson/pen/VmrBaP)

[Demo 3](https://codepen.io/makecodenotwar/pen/vXGVNV)

I hope you have liked whole list of Project ideas for React beginners with demo 2020. If you have any new ideas please comment in comment section. 🙂

[How to create Carousel component in React using react-slick](https://blogreact.com/react-slick/)

[https://blogreact.com/](https://blogreact.com/)