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