DEV Community

Cover image for 5 React-Based Projects Every Beginner Must Try
Suraj Vishwakarma for daily.dev

Posted on • Originally published at daily.dev

5 React-Based Projects Every Beginner Must Try

Introduction

React is one of the popular JavaScript frameworks available in the community. React is very powerful, and you can develop a variety of web- apps using react. So today, I am going to list 5 projects that you can make using the react framework.

1. COVID-19 Info App

Alt Text

You can create a webpage displaying current information and stats of COVID-19. We can use an API to fetch data about COVID-19. You can show that information on the page as you want. You can API from disease.sh to fetch the data.

What will you learn?

  • API Management
  • Props
  • State Management
  • Flexbox For Containers

2. Weather App

Alt Text

We can create our own weather to know the weather. We can have an input box to search for different cities too. You can create an input box to get the city's name and display the weather information on the web page. OpenWeather is one of my favorite API providing weather information. API comes with icon code. You can use this code to display an icon according to the weather.

What will you learn?

  • API Management
  • Props
  • State Management
  • Reusable Component

3. Recipe App

Alt Text

Yes, a recipe app to help you and others who want to cook tasty food. In this app, we can display a recipe for food according to searched input. We can also display some featured recipes too. Edamam provides an API for recipe apps. It is one of the best available recipe API.

What will you learn?

  • API Management
  • Props
  • State Management
  • Reusable Component

4. Calculator App

Alt Text

You can develop a basic to the more advanced scientific calculator using react. Designing a calculator can help you to understand the language. It will also test your mathematics knowledge too. But it's quite fun to design a calculator and give features according to your need.

What will you learn?

  • Props
  • State Management
  • Reusable Component

5. Todo App

Alt Text

You can make a todo app with an input box to add a new todo item to the list. You can have an input box for entering a new task in the todo-app. You can have a database to store that information. You can use firebase to store data and get a real-time update. You can have the animation for the completed and uncompleted task. We can also give points to the user according to the task completed.

What will you learn?

  • Firebase Database Management
  • Props
  • State Management
  • Reusable Component
  • Realtime Database Update

Thank you for reading the blog post. You can suggest more app in the comment box that others can give a try.


daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.
Daily Poster

Top comments (10)

Collapse
 
yugeroh profile image
Oliver James Aco

Hi @surajsrv11 I'm a newbie in React may I ask what API method did you used to fetch data in API. Because when I use fetch() in Web API they show me an error "JSON.parse: unexpected character at line 1 column 1 of the JSON data".

Collapse
 
surajondev profile image
Suraj Vishwakarma
fetch("https://disease.sh/v3/covid-19/all")
        .then(response => response.json())
        .then(data => (
            this.setState(
                {
                    covid_world : data
                }
            )
        ))
    }
Enter fullscreen mode Exit fullscreen mode

I use this method to get the data from the APIs and stored them into the state. If you want to see the whole project Covid19-info for detail.

Collapse
 
yugeroh profile image
Oliver James Aco • Edited

Thank you @surajsrv11 , I already figure it out I just forgot to insert the http protocol that's why the API didn't work. I already try your project and now I'm at the 2nd one.

Thread Thread
 
surajondev profile image
Suraj Vishwakarma

That's Great, keep developing 🔥🔥🔥

Collapse
 
tracycss profile image
Jane Tracy 👩🏽‍💻

Great projects I will start making them one by one. 💯🙌🏽

Collapse
 
mindninjax profile image
Rishabh Singh ⚡

Awesome Projects! Thanks for sharing🔥

Collapse
 
surajondev profile image
Suraj Vishwakarma

Thank you, brother

Collapse
 
dpkshetty profile image
Deepak C Shetty

@surajsrv11 - Is this blog post just to share ideas or am I missing something? I am new to React and came here hoping this blog tells me how to go about implementing the above apps ?

Collapse
 
surajondev profile image
Suraj Vishwakarma

Above we have ideas that you can implement using your knowledge and creativity as you can

Collapse
 
florencemawusi profile image
FlorenceMawusi

Hi Suraj, I was actually looking forward to having tutorials attached for each of these app in case we are a newbie. Nevertheless, thanks.

Some comments have been hidden by the post's author - find out more