tgrecojs

Intro

1. Show Array

• Let's pretend for a second that this pplFromAPI array isn't hardcoded, and instead it's being returned to us depending on service calls elsewhere in our application.
• It's our job to transform this data into a 1dimensional array for the UI to iterate over and display accordingly.

2. - const flattenData = (arr = peopleArray) => [].concat(...ar)

• One way of implementing this is using .concat in conjunction with the ...spread operator introduced with the release of ES6.

3 "highligh dots"

Shields us having to iterate thru each nested array, building up the final value on each pass.

tgrecojs

Intro

1. Show Array

• Let's pretend for a second that this pplFromAPI array isn't hardcoded, and instead it's being returned to us depending on service calls elsewhere in our application.
• It's our job to transform this data into a 1dimensional array for the UI to iterate over and display accordingly.

2. - const flattenData = (arr = peopleArray) => [].concat(...ar)

• One way of implementing this is using .concat in conjunction with the ...spread operator introduced with the release of ES6.

3 "highligh dots"

Shields us having to iterate thru each nested array, building up the final value on each pass.

tgrecojs

Mostly Adequete FP Notes

Chapter 9

var Container = function(x) {
  this.__value = x;
}

Container.of = function(x) { return new Container(x); };

tgrecojs

Code for lessons

Use Props to Create Dynamic Styled Components

• Video Link - http://bit.ly/Dynamic_ReactJS_with_emotion
• Code Link - https://codesandbox.io/s/vv5yr8zo00

Extend Next.js' default Document class to ensure styles are rendered on the server

• Video Link - http://bit.ly/ssr_with_emotion_and_nextjs
• Code Link - https://github.com/tgrecojs/next.js-ssr-lesson/tree/master

tgrecojs

import Banner from '../source/Banner/component';
import Post from '../source/Post/component';
import Link from 'next/link';
import { post1, post2, post3 } from '../Posts.tipe';
import Layout from '../source/Layout/component';


const App = () => 
    <Layout>
        <Banner />

tgrecojs

const Image = ({headline, bgColor, image }) => 
    <div className="banner" style={{background: bgColor}}>
        <img className="bannerImage" src={`${image.url}`} alt="tg banner"/>
        <h2>{headline}</h2>
    </div>

export default Image;

tgrecojs

query API {
    post1: BlogPosts(id: "5aa48ebb5150d400139136c9") {
        postBody
        description
        _meta {
            name
        }
    }
    post2: BlogPosts(id : "5aa4a49c106e4d0013bf87d8") {
        postBody

tgrecojs

query API {
    post1: BlogPosts(id: "5aa48ebb5150d400139136c9") {
        calender
        postBody
        description
        _meta {
            id
            name
        }
    }

tgrecojs

query API {
  Banner(id: "5aa474a451534a00133224b3") {
    bannerImage {
      url
    }
    headline
    backgroundColor
  }
}

tgrecojs

query API {
  Banner(id: "5aa474a451534a00133224b3") {
    bannerImage {
      url
    }
    headline
    backgroundColor
  }
}