React Beginner Project Ideas
Kritika Srivastava

Kritika Srivastava @kritika27

About: React Developer 👩‍💻 | Tech Blogger | Budding Speaker | Writer |

Location:
Bangalore
Joined:
Jun 10, 2020

React Beginner Project Ideas

Publish Date: Dec 17 '20
129 7

Since now you are familiar with basics of React,you can start building small projects in React.Here are some ideas or list which you can refer to.

Tip:Start with 1 App and complete that first.Google wherever you are stuck.Search for the logic on youtube if you don't get it.There are various tutorials you can refer to like Traversy Media,Dev Ed,Coding Addict on Youtube and many more.Read others' code to understand the logic and implement by your own.

1.Currency Converter:
Alt Text
Github Repository-https://github.com/kritika27/currency-converter-reactjs
Concepts to learn:Use of API,Select Options,React hooks,state,props,Arrays.
Demo Link-https://friendly-payne-18ef0b.netlify.app/

2.Quotes Generator:
Alt Text
Github Repository-https://github.com/kritika27/quotes-generator-react
Demo Link-https://dazzling-snyder-2f0503.netlify.app/
Concepts to learn:How to fetch data from Quotes API,arrays.

3.Bookmark:
Alt Text
Github Repository-https://github.com/kritika27/bookmark-reactjs
Demo Link-https://nervous-fermi-c86968.netlify.app/
Concepts to learn:Use of Multiple input elements,validate the entries in input box,validate url,add multiple items to array list.

4.Expense Tracker:
Alt Text
Github Repository-https://github.com/kritika27/expense-tracker-reactjs
Demo Link-https://angry-raman-08502b.netlify.app/
Concepts to learn:Arrays,map and reduce function,local storage.

5.To Do App with Firebase:
Alt Text
Github Repository-https://github.com/kritika27/todo-react-firebase
Demo Link-https://dreamy-mcclintock-c13cf8.netlify.app/
You can refer to my previous blog on Grocery List if you do not want to use backend.
Concepts to learn:Arrays,Firebase,delete items.

Star the project on Github if you like it.
You can follow me on Twitter and Github.
Suggestions are always welcome.Happy Learning :)

Comments 7 total

  • Abdur Rehman Khalid
    Abdur Rehman KhalidDec 17, 2020

    As these are accurate level for the beginners. I am pretty sure that many beginners will build these projects and there confidence will get an excellent boost as well.

  • Rahul
    RahulJan 9, 2021

    All of them sounds cool. But don't you think they all are same as JavaScript projects. For ReactJS people should think something creative and amazing. But loved all this projects.

  • Kritika Srivastava
    Kritika SrivastavaMar 22, 2021

    Hi Anjan.Fifth App in the above list is To do list App.Thanks.

Add comment