We now have a YouTube Channel.
Subscribe for the video content.
roadmap.sh
Roadmaps
Guides
Videos
Thanks
Subscribe
Kamran Ahmed
·
July 9, 2020
·
Watch on YouTube

# Practical Introduction to React
Learn how to create a React Application with practical example.
Author: Kamran Ahmed
Keywords: roadmap,developer roadmaps,developer roadmap,frontend developer,frontend developer roadmap,frontend,frontend roadmap,backend,backend developer,backend developer roadmap,devops,devops roadmap,fullstack developer roadmap,guide to becoming a developer,sre roadmap,sre,operations roadmap,qa roadmap,android roadmap,android developer roadmap,react roadmap,react developer roadmap,dba roadmap,postgresql dba roadmap

Learn how to create a React Application with practical example.

We are working on a better watch page — for now this
video is best viewed on YouTube.

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.

## Open Source

The project is OpenSource,
7th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.

## Stay Informed

Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as
5$ per month

Roadmaps Guides Videos About YouTube
Roadmaps Guides Videos Thanks About
YouTube
roadmap.sh
by
@kamranahmedse

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

© roadmap.sh·
FAQs·Terms·Privacy