DEV Community

loading...
Cover image for ✨8 React Projects Every Beginner Should Try

✨8 React Projects Every Beginner Should Try

The Nerdy Dev
Building products is my profession, Creating content is my passion. We believe that Education should be freely accessible to everyone and no one should be deprived of it.
Originally published at the-nerdy-dev.com Updated on ・3 min read

Hey everyone 👋🏻,

In this article, let us see 8 React Projects Every Beginner Should Try.

Introduction

Alt Text

React is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications. In this article, let us see some cool projects that you can make to make the process of learning React extremely easy.

1. Build a Photo Gallery with React.js and Firebase

This tutorial by Net Ninja (Shaun) teaches you how to create a photo gallery using React.js backed by Firebase as a database. The tutorial not only covers the basics and fundamentals of React but also shows you how to create your own custom hooks. Highly recommended for those who are looking to learn React.

What will you learn?

  1. React basics and Fundamentals
  2. Creating your own Hooks

2. Build an Expense Tracker using React Hooks and Context API

In this tutorial, Brad (Traversy Media) shows how to create an Expense Tracker Application using React Hooks and Context API. He also uses one of the state management solutions - Context API

What will you learn?

  1. React Basics and Fundamentals
  2. Managing State using Context API

3. Build Hangman with React by CodeSTACKr

In this video we will create a hangman game using React with hooks

What will you learn?

  1. React basics and Fundamentals, Hooks

4. Build an Exercise Tracker using React.js and Hooks

In this video, we will make a full Exercise Tracker Application using React.js and React Router. Created by @thenerdydev

What will you learn?

  1. React basics and Fundamentals, Hooks

5. React.js Full Crash Course with a Meetups Project

A crash course by Maximilian Schwarzmuller (Academind) that teaches you all the fundamentals of React.js. This tutorial also includes a project that uses Firebase as a database.

What will you learn?

  1. React.js basics and fundamentals
  2. Firebase basics

6. Build a Weather Application using React.js by Tyler Potts

Learn how to make a Weather app in React JS, this tutorial uses the Open Weather Map API to make calls to a restful api to return the current weather data. This uses the Modern Javascript Fetch AP along with React hooks and conditonals.

What will you learn?

  1. React.js basics and fundamentals

7. Build a Todo Application in React.js

DevEd shows you how to create a Todo Application in React.js

What will you learn?

  1. React basics and fundamentals

8. How To Build A Better Spotify With React

Spotify is pretty cool, but what if you could make a better version? In this video WebDevSimplified shows you how to create a Spotify clone that not only has many of Spotify's features but also includes lyric lookup for any song you want.

What will you learn?

  1. React basics and fundamentals
  2. Working with APIs
  3. Hooks

So this is it for this article. Thanks for reading.
Don't forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Alt Text

PS - If you are looking to learn Web Development, I have curated a FREE course for you on my YouTube Channel, check the below article :

Looking to learn React.js with one Full Project, check this out :

If you want to support the cause, you can buy me a coffee 😄
Buy Me A Coffee

👉🏻 Follow me on Twitter : https://twitter.com/The_Nerdy_Dev
👉🏻 Join our Discord Server : https://discord.gg/fgbtN2a

Discussion (18)

Collapse
willaiem profile image
Damian Żygadło

If you really want to learn from tutorial - NEVER follow it along with instructor.

I saw too many novice developers (myself included) just straight mindlessly write the code without understanding, what it does and why would you do that.

Great, you created a app... but you surely know, how it's working behind the scenes?

When I dived deep into my freshly created to-do app... I had ZERO idea how it is working.

Everything seemed a complete abstraction, which created even more reluctance to learn programming.

When I decided to build another app - I picked something, that was not only exciting for me, but also challenging (because doing "easy and familiar problems" will not teach me to solve the more difficult and uncommon ones - quite obviously).

For example: I picked this tutorial - building a full-stack app with Ben Awad:
youtube.com/watch?v=I6ypD7qv3Z8

Not only does it have technology that interests me (like React and TypeScript), but there are also some that I will encounter for the first time (like Next.js, Redis and GraphQL).

Whenever I had to implement, for example, a login page - I stopped the tutorial and tried to solve the problem by googling, looking at stack overflow, different articles and videos to try to figure out, how to make it.

If, despite trying, I did not manage to solve it, only then did I continue watching the tutorial, alternatively comparing my solution with that of the instructor, seeing the different in our approaches.

Is it more frustrating? Yes!
Did I have to use trial and error to find the solution because I couldn't find it on the internet? Sure!

But was it worth it? In my opinion, absolutely.
This has increased my problem-solving ability, which will allow me to face more and more difficult tasks (either in a side-project or in a future job).

Oof, that's a long comment. I could create a post based on it :P
But I had this spontaneous feeling to express it.

If even one person benefits from it - that's great.

Collapse
valentinesean22 profile image
valentinesean

My usual approach may work for someone.

When learning a new language or framework I begin with a crash course following exactly what the instructor is doing until I have exactly the product he or she has. I do this to get the sense of the language, framework or tool.

After the crash course I design my own simple solution or even a common topic that will demand to apply the concepts I feel are essential. For example, in the case of Vue, I will design an application that requires API calls, state management among others, then I implement it with the help of official documentation, communities, the solution I implemented following the crash course as well as google until I come up with exactly I planned for. This has been working for me for a long time and I am still looking for other approaches to improve my learning process

Collapse
nilomiranda profile image
Danilo Miranda

A valuable comment

I think everyone will have this click and leave the "tutorial hell".
That happened with me when I decided to learn Graphql and Relay, did all by myself through google, github issues and asking in communities.

Takes more time, definitely, but you learn much more taking more time building alone.

It's nice to watch a tutorial afterwards to check how someone else solves the same problem, and once again you'll learn much more cause you already have a better and deeper understanding about what that person is doing.

Collapse
dthomason profile image
David

Great explanation dude. You just described what it takes to really learn. You must create that challenge for yourself, have those moments of walking it through step by step in your head. Frustrating boiling points but not giving up. There is so much to actually learning something, I don’t feel it’s a topic enough and hear too many times, I’m just not that smart, then they give up.

Collapse
katert profile image
Wesley Kater

I second this. Don’t just follow along, but try to solve problems yourself by using Google, Stack Overflow, etc., and use these tutorials as a reference to compare solutions

Collapse
thenerdydev profile image
The Nerdy Dev Author

Yes !

Collapse
kputra profile image
K Putra

I always use "follow along tutor" when learning a new language / framework. That helps me a lot to understand quickly about that new stack.

Tldr; its about curiosity.

The trick is, you have to have curiosity of why the tutor use the method, is there any other options, try other options and see how that affect the apps, and so on.

Follow-along-tutor also gives you hint of the convention used in the lang/framework, so in addition you learn how to write a clean code on that lang/framework.

But lets agree on one thing: everyone has their own learning style. That we shouldnt say: this kind of learning is bad, this one is better.

Collapse
tblersch profile image
tblersch

As do I, but as you, I never follow along blindly. Just watched the first half of the first tutorial, for example, and stopped it three times to answer the questions "Why did he do that?" "What does that mean?" "How does that structure work in React?" I asked myself.

Blindly following along and coding by rote, I find pretty useless. Tutorials are more useful when you have to have the curiosity, and courage, to poke at the solution being presented - break it, fix it, dive deeply into the underlying concepts.

Thread Thread
thenerdydev profile image
The Nerdy Dev Author

Yes, I agree. This is one of the possible approaches that work for some of us. One can even build something following a tutorial and then add thing or two (some extra) feature on top of existing by applying the newly found knowledge.
Blindly following a tutorial won't take one anywhere.

Collapse
thenerdydev profile image
The Nerdy Dev Author

Yes. Absolutely ! This is the right way to learn a new technology. One should never follow a tutorial blindly. Thanks for sharing your view on this.

Collapse
andemosa profile image
Anderson Osayerie

I benefited a lot from this comment

Collapse
tarun2506 profile image
Tarun Sharma

<3

Collapse
mysticbel profile image
Maribel Maza

This comment is what i was exactly looking for, you're gonna save me many hours of tutorial hell but at the same time, I see many hours of uncertainty on the way...😅 I'll embrace it!

Collapse
ddhanushka profile image
D. Dhanushka • Edited

Great article. I also watch tutorials and learn new things. But it quickly makes me wonder why he is using this and that. Then I stop for a little and read official docs, other articles and stuff. When I feel like I know what I am doing I continue with the video. Probably when learning new thing this would take time but once you are finished with the tutorial you know what you did. You should be able to explain someone else about what you learn. Thanks

Collapse
chetan_atrawalkar profile image
Chetan Atrawalkar👉CA.

Also try Personal portfolio and movie search app, my opinion 🤗

Collapse
sameech profile image
Samee Ch

Well done You did a great work, It is very easy and goo way to learn react.js technology for beginners, Keep it up bruh. :)

Collapse
kenethsimon profile image
kennyLFC

Udemy courses are the best tutors go in depth teaching

Collapse
ravikr126 profile image
Ravi Kumar

Awesome projects 😍