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, like Math. Hence, learning by doing does it!

Let's skip the poetry and head first into Interesting Part of this article.

Interesting React Projects

1. ReactClockFaces 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 builtin 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

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