No description, website, or topics provided.
JavaScript HTML CSS
Latest commit c961c67 May 25, 2017 John Master update readme with mocks
Permalink
Failed to load latest commit information.
images update readme with mocks May 25, 2017
public create react app May 25, 2017
src create react app May 25, 2017
.gitignore create react app May 25, 2017
README.md update readme with mocks May 25, 2017
package.json create react app May 25, 2017

README.md

React TVMaze

Start with a Mock

First step in creating a React app is to start with a mock and some sample data. These are the two views for our app:

The Search Page

search page

I've identified two components on the search page.

  1. The top level component, which we'll call Home, is boxed in magenta.
  2. The search input, a sub-component of Home, in yellow we'll call Search.

The Results Page

results page

I've identified three components on this page.

  1. The same Home top level component.
  2. A results components which contains results and an option to search again.
  3. The individual results

Component Hierarchy

Given these breakdowns we have a component hierarchy that looks like:

  • Home
    • Search
    • Results
      • Result

Sample Data

const results = [
  {
    "name":"The Office",
    "image":"http://static.tvmaze.com/uploads/images/medium_portrait/85/213184.jpg"
  },
  {
    "name":"Radiant Office",
    "image":"http://static.tvmaze.com/uploads/images/medium_portrait/101/254702.jpg"
  },
  {
    "name":"The Office",
    "image":"http://static.tvmaze.com/uploads/images/medium_portrait/93/234802.jpg"
  },
  {
    "name":"Mr. Box Office",
    "image":"http://static.tvmaze.com/uploads/images/medium_portrait/97/244942.jpg"
  },
  {
    "name":"The Queen of Office",
    "image":"http://static.tvmaze.com/uploads/images/medium_portrait/58/146476.jpg"
  },
  {
    "name":"No Offence",
    "image":"http://static.tvmaze.com/uploads/images/medium_portrait/48/121682.jpg"
  },
  {
    "name":"Oficer",
    "image":"http://static.tvmaze.com/uploads/images/medium_portrait/29/73047.jpg"
  },
  {
    "name":"Trzeci oficer",
    "image":"http://static.tvmaze.com/uploads/images/medium_portrait/29/73053.jpg"
  },
  {
    "name":"Line Offline: Salaryman",
    "image":"http://static.tvmaze.com/uploads/images/medium_portrait/57/143508.jpg"
  },
  {
    "name":"Utenai Keikan","image":"http://static.tvmaze.com/uploads/images/medium_portrait/42/106093.jpg"
  }
]

More on create-react-app

This project was bootstrapped with Create React App.

Below you will find some information on how to perform common tasks.
You can find the most recent version of this guide here.