joshuajhun

Components

Components in our application is broken into 4 major types: elements, blocks, decorators, and containers.

Elements

Elements are the smallest of the bunch and are considered the building blocks of our application. The goal being that they make up the base of our component hierarchy. It's easier and scalable if our component hierarchy is built upon these reusable, highly maluable pieces. If we our baseline elements are unoppinionated, pure, stateless, functional components then it makes extending upwards a lot easier.

What are Elements?

joshuajhun

Food Places I'll break down each region into sections so you'll have multiple options just incase you like a particular type of food

Toyko

Ramen

• Tomita Ramen Japan, 〒271-0092 Chiba Prefecture, Matsudo, １３３９ 高橋ビル
  • Considered the best ramen place in Japan. We'd have to get there right when they open to get a ticket.
• They open at 11am. I would not be surprised if people will be lined up in the morning.

joshuajhun

Context

As front end engineers our applications are the first thing our users will interact with. They don’t see, touch, or even concern themselves with the backend. How our applications render and more importantly how quickly they load is what the user will remember when they interaction with our code. For the first time Mobile web interactions out number those of desktop interactions and we are heading out of the “Mobile First” design because at some point it’s all we are going to be talking about. With this idea in mind we really need to consider the speed in which our application is going to load. Mobile devices by nature are going to have less memory and processing power of their desktop counterparts and if we do not accommodate these users we are cutting out a significant amount of our user interactions.

Now there are a couple of things we can do to speed up our web applications. The first step is taking a long hard look at our web application and looking for ways we can speed up our application.

joshuajhun

What's this PR do?

Describe the problem or feature in addition to a link to the issues. Delete any content that doesn't apply.

Pre-Merge TODOs

• Screenshots Included
  • ANY change to the UI of the app must have screenshots/gifs
  • Hint: recordit is really great for this
• Tests Added
  • ANY change that can be tested must include testing

joshuajhun

What's this PR do?

Describe the problem or feature in addition to a link to the issues. Delete any content that doesn't apply.

Pre-Merge TODOs

• Screenshots Included
  • ANY change to the UI of the app must have screenshots/gifs
  • Hint: recordit is really great for this
• Tests Added
  • ANY change that can be tested must include testing

joshuajhun

Final Assessment

Tomorrow your final assessment will start promptly at 9:00am. You must submit your project to Jhun, Mike, and Will in a group slack message by 4:00. Any commits after 4:00 will not be considered in your evaluation.

Periodically throughout the day we will be pulling you out of your assessment to pair with an instructor on some Fundamental JavaScript.

Logistics

• This is a solo assessment. There will be no pairing of any kind. We will be available to answer questions but at the end of the day this for you to show us what you've learned this module
• You will be pushing up a commit to github every 30 minutes. This will allow us to track your progress throught the day.

joshuajhun

Final Assessment Study Guide

Your final assessment will be an all day assessment where you will be given a spec and expected to build it out. You will also be pulled out individually to go over some fundamental javascript.

Fundamental Javascript

If you practice your Array Prototype functions you should be fine!

Clone this practice repo: JS-enums

joshuajhun

Grocery List

Today you are going to be tasked with building a small app that will hopefully help build / solidify some of your react chops.

The app should allow the user to add grocery items to a grocery list. A user should be able to add a grocery list item to the list via an input field and view each grocery list item on the dom.

Phase 0

joshuajhun

  import {createStore} from 'redux'

  const reducer = (state, action) => {
    switch (action.type) {
      case 'INCREMENT':
        return state = state + action.payload
      case 'DECREMENT':
        return state = state - action.payload
 default:

joshuajhun

Bind

The big thing with bind is to remember that it changes the value of this before you call the function. Meaning call and apply invoke the function immediately where as with bind it allows us to change the value of this and call the function like we normal would. This is super value especially when you don't want to call a function right away. A great example would be using bind during an event where we do necessarily know when the user is going to fire the event, but we really care about the context of the function. ( we have an example for this)

so for some small examples. Consider the following...

function logThis(){
 console.log(this.someObjectAttribute)