Maggie Rosenbusch

React Gist Blog Starter

For your final project, you’ll be using GitHub’s public Gist API to make a simple, read-only “blog”.

Frameworks & Libraries:

Project Setup

  1. Please fork and clone this repository.
  2. cd into the local copy on your machine and run yarn to install dependencies.
  3. In a new tab or pane, start the dev server with yarn start. Keep it running as you work, and keep an eye on it so you can keep track of which changes you’re making are breaking the app.

Project Planning

In terms of application complexity, blogs are a pretty straightforward affair. At the very least, they are a web-based front end for displaying articles of text retrieved from an API call.

The term API (“Application Programming Interface”), you’ll recall, can be, and often is, pretty broadly defined. For our intents and purposes, an ideal Interface would be one which can reliably serve articles of text, and perhaps even allow us to add new ones. GitHub’s API allows you to do both!

1. Test-firing API calls

Before you go to the trouble of setting up API calls in your app with fetch or axios, you should try out a few queries to get an idea of what the responses look like.

You can use a graphical front-end like your browser’s URL bar or Postman, or try it out on the command line:

curl https://api.github.com/users/{your username here}/gists

Quite a bit of info! But how do we make sense of it?

2. Planning your Views

Think about what a page on your blog should look like, what kind of stuff should show up. It should probably have your name and avatar prominently displayed somewhere, right?

We should also be able to view all blog posts somewhere, like on the “Home” view. Each of these posts should have a title, author, data posted, and maybe a subtitle.

Each listed post should link to a detail view. The detail view will have pretty much all the same data, except this is where the body of a post will be formatted and displayed.

Here’s a rough outline of the components:

<App /* state will live here */>
  <PostDetail />
  <ListOfPosts /* posts={state.posts} */>

    /* .map over the `posts` from props to create the 'List': */
    <PostPreview />
    <PostPreview />
    <PostPreview />
  </ListOfPosts>
</App>
3. Grab some data and load it into state

Once you have your components plotted out, it’s time to start writing them!

Making it look pretty
  1. With import: Adding CSS to React is really easy. If you need some styles in a component, just import the CSS:
import React from 'react';
import './App.css';

A couple best practices:

src
  └── Components
    ├── App.css
    ├── App.js
    ├── Topic.css
    ├── Topic.js
    ├── TopicsList.css
    └── TopicsList.js
  1. With glamor.
    • This is an awesome way to write CSS-in-JS. More on this soon!

      javascript-blog-starter