computer-scienceangular-roadmapbackend-roadmapblockchain-roadmapdba-roadmapdeveloper-roadmapdevops-roadmapfrontend-roadmapgo-roadmaphactoberfestjava-roadmapjavascript-roadmapnodejs-roadmappython-roadmapqa-roadmapreact-roadmaproadmapstudy-planvue-roadmapweb3-roadmap
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
24 lines
1.7 KiB
24 lines
1.7 KiB
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](https://kamranahmed.info/githunt). Also the complete source code can be found at [@kamranahmedse/githunt](https://github.com/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. |
|
|
|
<iframe src="https://www.youtube.com/embed/NyG7YJWJd6s" title="Practical Introduction to React Part 1" /> |
|
|
|
## 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. |
|
|
|
<iframe src="https://www.youtube.com/embed/zPqzKqjtEL4" title="Practical Introduction to React Part 1" /> |
|
|
|
## 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. |
|
|
|
<iframe src="https://www.youtube.com/embed/EYzPJsJwjFg" title="Practical Introduction to React Part 1" /> |
|
|
|
## Fetching Remote Data |
|
|
|
Below is the final lesson where we complete the application by integrating the GitHub API to make the data dynamic. |
|
|
|
<iframe src="https://www.youtube.com/embed/G2IbP9B_4PU" title="Practical Introduction to React Part 1" />
|
|
|