React and Redux Tutorial Trending GitHub – Part 1

Trending Repos - Featured Image

Like John Sonmez, I believe “you never really learn something until you teach it”. Here is my attempt to do just that after learning about Redux. This is the first post in a series titled “React and Redux Tutorial Trending GitHub”.

The series is aimed at beginners. The final app doesn’t need Redux but I used it as a stepping stone to more complex apps. I rate Todo Apps, but I wanted to create something I couldn’t just cut and paste away my problems if I got stuck. I encourage you not to do the same.

The series is made up of the following posts:

  1. Introduction, setup and add a Header component (this post)
  2. Add static data to Redux
  3. Display the static data
  4. Load data from an API during application start
  5. Add a Search Button

Introduction

It’s hard to avoid Redux if you’re working with React.js. Up till now, I’ve tried to ignore it so I can get a better understanding of the basics. I think I now have that solid base, so it was time to move onto something a little more complicated. But what?

While looking around for inspiration I saw this tweet from Stack Overflow’s Nick Craver:

I knew the GitHub API didn’t need any authentication, so this seemed like a good git. I decided to try and build an app that:

  • Uses Redux to store the application state;
  • Makes use of Presentational and Container Components;
  • Talks to the GitHub API to retrieve the day’s top 10 trending repos;
  • Allows the user to search for the trending repos by language;
  • Talks to the GitHub API asynchronously using Redux-Thunk;
  • Displays the repos in a Bootstrap table

No authentication requirements make this easier to achieve. GitHub does provide OAuth authentication so that could be a future extension.

Setup

To get up and running, I use Cory House’s React Slingshot starter kit. I presume you have a working React environment so won’t go into pre-requisite setups.

I’ll be working on Windows, so to follow along enter these commands in a PowerShell or command prompt:

> cd /
> mkdir TrendingGitHub
> cd TrendingGitHub
> git clone https://github.com/coryhouse/react-slingshot.git .
> npm run setup

Wait for npm to finish, then answer the questions. The answers end up in your package.json so you can change them in the future if you need to.

To make sure everything worked start the demo application with

> npm start -s

Your browser should open with the demo application. We’re almost ready. We don’t want any of the demo application and there’s an easy way to get rid of it. After stopping the previous command with Ctrl+C let’s remove the demo.

> npm run remove-demo

Bootstrap

Bootstrap isn’t installed as part of the starter kit. So before creating the first component, lets install it now.

> npm install bootstrap

The starter kit can handle imported css, so we don’t need to change anything else.

First Component

Almost ready for our first component. There are two things about the starter kit that we need to know:

  1. src/index.js is the entry point.
  2. src/index.ejs is the template of the html and it contains a div with classname “app”.

That means that index.js needs to render our application to the app div if we want to see it. For this part of the tutorial, I just want to get something on the screen. So create a file in src/components called TrendingGitHub.js that contains:

import React, {Component} from 'react';

class TrendingGitHub extends Component {
    render() {
        return (
            <h1>Today's Trending Github</h1>
        );
    }
}

export default TrendingGitHub;

We can now create our entry point to render this TrendingGitHub component. Change src\index.js to:

/* eslint-disable import/default */

import React from 'react';
import {render} from 'react-dom';
import TrendingGitHub from './components/TrendingGitHub';
import '../node_modules/bootstrap/dist/css/bootstrap.css';

render(
  <TrendingGitHub />, 
  document.getElementById('app')
);

If you’ve worked with react at all this should be standard stuff. The only “magic” is line 4 where I include the bootstrap CSS so it’s available to all our components.

Start the application with npm start –s and when the browser opens, the app should look like:

Trending Repos - Part1 - Header Added

Trending Repos – Part1 – Header Added

At this stage of my knowledge, this is pretty much the starting point for all my web apps. You shouldn’t have any errors on the command line or within your console at this stage.

End of Part 1

If you’ve made it this far, thank you for sticking with it. We’re now in a great position to start adding other components and creating our app.

If you have any comments, questions or problems, please let me know below or contact me on twitter.

4 Responses to “React and Redux Tutorial Trending GitHub – Part 1”

  1. Thanks says:

    typo: “npm install bootsrap”

  2. Andrew says:

    Also,

    component import in index.js is different from component listed above it

    “TrendingGitHub”
    and
    “import TrendingRepos from ‘./components/TrendingRepos’;”

Leave a Reply

Your email address will not be published. Required fields are marked *