React Project: GitHub Profile Viewer

React Project: GitHub Profile Viewer

In this tutorial, we’re going to take a look at using React Router to create some routed pages by creating a simple GitHub profile viewer

In this tutorial, we’re going to take a look at using React Router to create some routed pages by creating a simple GitHub profile viewer

Code is here: https://github.com/codebubb/github-profile-viewer-tutorial (Checkout the setup branch for the skeleton project)

React Project: GitHub Profile Viewer

  • 00:00 Introduction
  • 00:22 Overview
  • 01:27 Setup
  • 02:42 Setting Routing up
  • 07:58 Setting up the GitHub search
  • 14:10 Displaying the Search Data
  • 16:47 Repositories Route
  • 23:14 Gists Route
  • 28:31 Followers Route
  • 33:32 CSS
  • 34:00 Link Disable and Route disable
  • 37:38 Wrap-up

So once your React application starts to get a bit larger you’re probably going to want to move certain sections or groups of components to their own pages. Let’s say if you had an edit page for updating resources and a list page for viewing a complete list of whatever it is you have stored in your data store.

It might be time to create separate pages or ‘routes’ to group those related components in one place.

In this tutorial, we’re going to dive straight in to creating a simple nav setup with the Link component and then create the corresponding pages or ‘routes’ to display different content depending on where the user navigates to.

So you’ll get a quick overview of the React router library and also how to use the Link component, switch component, route component and we’ll also take a look at the Redirect component towards the end of the tutorial.

To give the application a bit of a purpose we’ll also send some requests to the GitHub api with React and process the corresponding data to display information about a particular user’s profile information including retrieving extra information like their repository list, Gist lists and also their followers.

So hopefully by the end of this Junior Developer Central React router tutorial, you’ll have a good understanding of the React router library and the corresponding components to allow you to separate your content on to different pages.

react github

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Deploying a React App Using GitHub Pages and GitHub Actions

Deploying a React App Using GitHub Pages and GitHub Actions. This YAML file defines the workflow in GitHub Actions. Build the React app and deploy the contents of the build directory to the gh-pages branch. I’ve used the following command to generate this sample React app.

How to Select and Hire the Best React JS and React Native Developers?

Hire React JS developer from Technoduce, we have a team of experienced and expert Angular JS developer. With our hire React JS developer, you have complete control over the technical resource throughout the development process.

How to Compare Multiple GitHub Projects with Our GitHub Stats tool

In this article we are going to compare three most popular machine learning projects for you.

React Github Battle App Demo #56

React Github Battle App Demo #56