DEV Community

Cover image for Cool Projects to Help You Learn React JS - Part 1
Gerald
Gerald

Posted on

Cool Projects to Help You Learn React JS - Part 1

Introduction

What is React

React is a declarative and component-based Javascript Library for building web interfaces. Its developed and maintained by Facebook. Although it's grouped with other "Frameworks" like VueJS and Angular, its termed much as a Library and not a framework. Find out more about React on this link.

Why this article?

Personally, when I want to learn a new Framework, I go through the documentation to grasp the basic and core 'Hows and Whys', then I start basic applications to practice the concepts I've learned. This has always worked like magic for me. It goes without saying that learning by doing does a lot when it comes to grasping new concepts. I choose this approach since writing code is like a science, its a creative, intuitive and involving activity, like Math. Hence, learning by doing does it!

Let's skip the poetry and head first into the interesting part of this article.

Interesting React Projects

1. React Clock Faces A.K.A. ReactCF - A Simple React.Js Clock With Many Faces

For this projects you'll learn these skills. The purpose of the project can be to display a Digital Clock that updates itself after every second, just like an actual digital watch. You can have different styles, or rather faces for displaying your digital clock. Hint: Use Javascript's built in function: setTimeout()

  • React Components
  • Reusability
  • React DOM and Reactivity
  • React Hooks: useEffect, useState

2. Stockfoto

However you may call it, the main aim of this project is to consume Unsplash Photos API, which is open source and have fun while doing it. Note: Read through Unsplash API Guildlines to make sure you're not breaking any rules. This will be a very interesting project!
The api and interesting endpoints

  • Random Picture
  • Latest pictures
  • Search Pictures
  • Get One Picture and download picture

What you will learn:-

  • React Components
  • Reusability
  • React DOM and Reactivity
  • React Hooks: useEffect, useState
  • React fetchAPI
  • ES6

Cool Features you could implement.

  • Lazy loading Images
  • Lazy Loading Pagination - Load more images when a user scrolls to the bottom

I'll be happy to see what you create!

As you wait for Part 2.
Regards

Discussion (5)

Collapse
zachjonesnoel profile image
Jones Zachariah Noel

Wonderful. Didn't know Unsplash has APIs and we could build a client with it.

Collapse
geraldmuvengei06 profile image
Gerald Author

Yes it does, an awesome one

Collapse
geraldmuvengei06 profile image
Gerald Author

But there are guidelines from Unsplash, some kind of privacy policy

Collapse
copleykj profile image
Kelly Copley

Woah, almost took me a full minute to consume this article.. nice job.

Collapse
geraldmuvengei06 profile image
Gerald Author

Thanks