Using React Router

Watch the video above to see why we are setting up our app in this way to use the React Router.

Installing React-Router

We'll use yarn to install the react router. Our app is a HTML based web app, so we use react-router-dom

$ npm install -g yarn
$ yarn add react-router-dom

Architecture we're working towards

Create a Recipe store

Before this refactor, our recipes were kept as state on the App component. Now that we're moving to have multiple pages in the app, we want to move the recipes out to a data store so any page can access them that needs to. Tomorrow, we're going to talk about Flux, which is a pattern to make managing data stores easier. For now, we'll create a directory called 'store', and a module there called 'Recipes'. This will allow us to access the list of recipes from any route that needs them

src/store/Recipes.js

const recipes = [
  {
    id: 1,
    name: 'Mac & cheese'
  },
  {
    id: 2,
    name: 'Tofu Burger'
  }
]

export default recipes

Rename Recipes to RecipeIndex

Now that we have a Recipe store, and we'll soon have a Recipe detail page, its somewhat confusing to have a 'Recipes' component. Let's rename it to 'RecipesIndex'

src/RecipeIndex.js (was Recipes.js)

import React, { Component } from 'react'

class RecipeIndex extends Component {
  render() {
    return (
      <ul>
        <li>Recipe 1</li>
        <li>Recipe 2</li>
      </ul>
    );
  }
}

export default RecipeIndex;

Then in App.js, we need to use the renamed component

src/App.js

import React, { Component } from 'react'
import Header from './Header'
import RecipeIndex from './RecipeIndex'
import Footer from './Footer'

class App extends Component {
  render() {
    return (
      <div>
        <Header name='Bob' />
        <div>
          <RecipeIndex />
        <div>
          <Footer />
        </div>
      </div>
    );
  }
}

export default App;

React Router

First let's set up the router in src/index.js.

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';  // We import BrowserRouter
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
  <Router>              // Then we wrap the app component in the Router component 
    <App />
  </Router>, document.getElementById('root'));
registerServiceWorker();

Then, in the main App component, we setup the Switch component to navigate be able to navigate to both pages:

src/App.js

import React, { Component } from 'react'
import {Switch, Route} from 'react-router-dom'
import Header from './Header'
import RecipeIndex from './RecipeIndex'
import RecipeDetail from './RecipeDetail'
import Footer from './Footer'

class App extends Component {
  render() {
    return (
      <Switch>
        <div>
          <Header name='Bob' />
            <Route exact path="/" component={RecipeIndex} />
            <Route path='/recipes/:id' component={RecipeDetail} />
          <div>
            <Footer />
          </div>
        </div>
      </Switch>
    );
  }
}

export default App;

Add Links in RecipeIndex

Link is a component provided by ReactRouter to create links between pages in our app. Once we import it, we can use it like any other component. We'll need to add links for each recipe in the RecipeIndex component, and then a link back to the home page from the detail pages.

src/RecipeIndex.js

import React, { Component } from 'react'
import Recipes from './store/Recipes'
import {Link} from 'react-router-dom'

class RecipeIndex extends Component {
  componentWillMount(){
    this.setState({recipes: Recipes})
  }
  render() {
    let list = this.state.recipes.map(function(recipe){
      return(
        <li key={recipe.id}>
          <Link to={`/recipes/${recipe.id}`} >
            {recipe.name}
          </Link>
        </li>
      )
    })
    return (
      <ul>
        {list} 
      </ul>
    );
  }
}

export default RecipeIndex;

Add a detail page

Our app has a home page, and a recipe detail page. We create a new component to be the main component for the detail page called RecipeDetail

src/RecipeDetail.js

import React, { Component } from 'react'
import Recipes from './store/Recipes'
import {Link} from 'react-router-dom'

class RecipeDetail extends Component {
  constructor(props){
    super(props)
    this.state = {
      recipes: Recipes
    }
  }
  componentWillMount(){
    const id = this.props.match.params.id
    this.setState({recipeId: id})
    let recipe = this.state.recipes.find(function(listing){
      return listing.id === parseInt(id)
    })
    if(recipe){
      this.setState({recipe: recipe})
    }
  }

  render() {
    return (
      <div>
        <Link to='/'>Home</Link> 
        <h2>{this.state.recipe.name}</h2>
      </div>
    );
  }
}

export default RecipeDetail;

But wait! There's more!

Turns out we are not using our Switch component to its full potential. Along with defining what component to show for specific urls, we can specify what to show when the url requested doesn't have content.

Try requesting localhost:3000/1.

You find that you get a blank page and that's the case for any url that doesn't have a component specified with that route. The Switch component can be used to fix this.

First, we can create a component to show when the user has requested a bad url:

src/Oops.js

import React, { Component } from 'react';

export default class Oops extends Component {
  render(){
    return (
      <h2>Oops, this is not the page you are looking for.</h2>
    )
  }
}

Then, we can add a Route component that calls our new component.

src/App.js

import React, { Component } from 'react'
import {Switch, Route} from 'react-router-dom'
import Header from './Header'
import RecipeIndex from './RecipeIndex'
import RecipeDetail from './RecipeDetail'
import Oops from './Oops'                       {/* Importing Oops component*/}
import Footer from './Footer'

class App extends Component {
  render() {
    return (
      <Switch>
        <div>
          <Header name='Bob' />
            <Route exact path="/" component={RecipeIndex} />
            <Route path='/recipes/:id' component={RecipeDetail} />
            <Route component={Oops} />                      {/* A route that calls that component */}
          <div>
            <Footer />
          </div>
        </div>
      </Switch>
    );
  }
}

export default App;

Notice that we have not specified a path. Switch gives us the ability use the first matching path case. This includes paths that aren't specified. Hence, the last Route component will match any url we haven't specified in the previous Route components.

Now request an invalid url. Our Oops component shows up. We are now handling bad url requests!

Review

• What does react-router-dom allow us to do?

• What three things did we have to import from react-router-dom?

Technical Interview Preparation

Preparation

A technical interview is maybe the most stressful part of the job-hunting process. Coding is hard enough on your own or with a pair, but now you're going to be asked to solve coding and pseudo-coding problems in front of potential employers. The key is to practice before the real thing, so you're not too nervous when you're in the real thing.

Job interviews can take many formats. My favorite is the pairing interview, where you'll pair program with your interviewer. Sometimes this will be on a standard problem the employer uses to evaluate candidates; sometimes it will be on real work that the employer has; and occasionally they may ask you to pair on one of your own projects. This is my favorite interview format, as it tests what you'll actually be doing on the job, and doesn't really require any special prep. Unfortunately, only a minority of employers use this format.

Another common format is to send you requirements for a simple program, ask you to solve it on your own time without outside help, and send them back a solution. This could be a full-blown web app or just a simple JavaScript program. A variation on this format is to ask you to come into their office and build the app on your own, within a couple hours. Again, this format is fairly nice because it tests the way you work anyways, and doesn't really require a whole lot of special preparation.

The more difficult interviews will involve answering technical questions out loud, or "whiteboarding" a solution to a coding problem - sketching out a visual and/or pseudo-code solution to a problem, and talking out loud about your thought process as you go. This is one of the most common interview formats, and where you should spend a good amount of extra time preparing.

Technical Questions

Here are some sample interview questions for you to practice answering out loud adapted from these articles from Web Code Geeks and HiringThing.
There are also links that may be useful to answer these questions at our Wiki Page.

These sample interview questions are meant to be a resource for interview preparation well into your first year of programming, so there will be material here that we haven't covered yet in the course. Don't worry! You can always move on to something you are familiar with, or, if you're curious about something new to you, look for answers on outside resources like W3Schools

• What are some of the differences between HTML and HTML5?


• What is Semantic HTML?


• What is floating in CSS?


• What is a class?


• What is an object?


• What is unit testing?


• What is integration testing?


• Name every database association relationship.


• What is Express and why use it?


• What are npm packages?


• How do redirect and render differ?


• Explain what hasMany is and what happens when it is run.


• What does the . in git add . mean?


• What is string interpolation?


• How do local and instance variables differ?


• What is a foreign key?


• What is null?


• How does false differ from null?


• What is REST?


• What does node do?


• What is npm?


• Pretend Im another programmer who has never used Node/Express explain to me how a Express app is structured, and why its a good framework for web apps.


• How do you decide what logic should reside in the models vs. controllers?


• Describe your workflow when writing tests and features.


• What do you think the best practices are for branch management in a multi-developer project?


• Show me some code you wrote that you're especially proud of.


• Talk about a time that you solved a difficult coding problem.


• How would you parse a JSON string?


• Describe a class and an object.


• What happens in a GET, POST, and PATCH request?


• I want to update something. What type of request would that be?


• What is HTTP and why do we use it?


• How would you grab an element from the DOM with jQuery?


• What is an array?


• Explain MVC.


• What is a join table in SQL?


• Explain why you should escape user input into SQL statements.


• What are media queries and how do you use them?


• How do you make images usable for blind people who are using a screen reader?


• What's the difference between =, ==, and === in JavaScript?


• What's the difference between an undefined and undeclared variable in JavaScript?


• What's in your .bash_profile?


• What's your favorite language and why?


• You've been working on a site for a couple months here at our company. You come in one day and the site is down. What do you do?


• What is an ORM?


• What is a migration?


• What is a router?


• What is the difference between POST request and a GET request?


• What is Git and why would you use it?


• What happens when a user types in a URL?

Stretch Questions

• What is a module? Hows it differ from a class?


• Why use a module? Give an example.


• What does self mean?


• Give an example of recursion.


• What is a callback in Active Record?


• What is a partial?


• When would you use has_many :through?


• What is a polymorphic relationship?


• Explain polymorphism.


• What is the difference between a private and public method?


• Describe a callback function.

Whiteboarding

Here are some sample questions for you to practice whiteboarding:

• Write a function that computes the factorial of a number. Do this with and without recursion.


• Say you have an application with users. How would you let them have followers?


• Design a database schema for an ecommerce site, so that users can buy items that are stocked on the site.


• Write a method to determine if a number is a prime.


• Design a database schema to keep track of scores of games for a basketball league.


• Make a web page with a button. When you click that button, it should create another button with all of the same behavior - i.e., clicking it should create another button.


• Write a program that prints 99 bottles of beer on the wall (the song) to the console


• Define a function that takes an array of strings, and returns the most commonly occurring string that array (this question came with an execution time limit)


• Use recursion to log a fibonacci sequence of n length.


• Create a "dog" class and give it a few methods, including "bark" and "sniff"


• Create a function that detects if a string is a palindrome. Return true if it's a palindrome, return false if it is not

Quiz & Dive Deeper

Here are some simple quizzes:
W3Schools Quiz Test

Here are a few websites that pertain to specific software languages if you want to go a little deeper.

• CSS Interview Questions
• Javascript Interview Questions
• jQuery Interview Questions
• JS Interview Questions
• Nodejs Interview Questions
• SQL Interview Questions