Practical Introduction to React

In this short series of lessons, we are going to create a react app from scratch. We are mainly going to use React and Chakra UI and see how we can build an application that fetches the trending projects from GitHub’s API and shows you in the form of listing.

If you want to get an idea of what we are going to be building have a look at GitHunt. Also the complete source code can be found at @kamranahmedse/githunt

Intro and Basic Setup

The video below gives you the basic introduction about the project and explains what we are going to build.

Building the Interface

In this second lesson we are going to create all the required components and the UI using Chakra UI and in the next lesson of this series we are going to start adding interactivity to our application.

Building the View Switcher

In this lesson we start adding interactivity to the interface. We will be building the view switcher where you can switch between the “Grid View” and the “List View” and in the next and last lesson of the series, we are going to integrate GitHub API and show the repositories.

Fetching Remote Data

Below is the final lesson where we complete the application by integrating the GitHub API to make the data dynamic.

Actively Maintained

We are always improving our content, adding new resources and adding features to enhance your learning experience.

Join the Community

roadmap.sh is the 7th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

Rank 7th  out of 28M!

300K

GitHub Stars

Star us on GitHub
Help us reach #1

+90k every month

+1.5M

Registered Users

Register yourself
Commit to your growth

+2k every month

29K

Discord Members

Join on Discord
Join the community

Roadmaps Best Practices Guides Videos FAQs YouTube

roadmap.sh by @kamrify

Community created roadmaps, best practices, projects, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh · Terms · Privacy · Advertise ·

ThewNewStack

The top DevOps resource for Kubernetes, cloud-native computing, and large-scale development and deployment.