faceyspacey

import express from 'express'
import routes from './routes';
import { render, build } from 'react-universal-starter';

const app = express();

const handler = build(async (req, res, stats) => {

  try {
    const html = await render(routes, stats);

faceyspacey

import express from 'express'
import routes from './routes';
import { render, build } from 'react-universal-starter';

const app = express();

const handler = build(async (req, res) => {

  try {
    const html = await render(routes);

faceyspacey

import express from 'express'
import routes from './routes';
import { render, build } from 'react-universal-starter';

const app = express();

const handler = build(async (req, res, clientStats) => {

  try {
    const html = await render({

faceyspacey

export default function connectAdvanced(selectorFactory, options) {
  return function wrapWithConnect(WrappedComponent) {
    class Connect extends Component {
      static contextConsumers = [ReactReduxContext.Consumer]
    
      static getDerivedStateFromProps(nextProps, [context], prevState) {
        const { dispatch, state } = context
        return this.selector(dispatch, state, nextProps, prevState) // returns `null` if no changes
      }

faceyspacey

// ASSIGNMENT 2b:
// Make a page switcher called <Website /> . On 2 of the pages, put the <TemperatureInput /> from assignment 2a.
// Lift the shared state into this component. Unlike the example from reactjs.org docs, only one input will show at
// a time. You will learn how to create "pages", navigation (aka links) between pages, and how to "lift" state
// that is shared between all pages to the parent component they all have in common. 
//
// This should be done in 2 parts:
// 1) make the page switcher work by changing the `page` state on click of the links
// 2) work on passing the `onTemperatureChange` + `temperature` + `scale` props to the `TemperatureInput` component; then glue it all together.

faceyspacey

TERMS:

- inheritance (super)
- imperative vs. declarative
- managed inputs vs unmanaged inputs (make sure when you google prepend "react"):
  https://reactjs.org/docs/uncontrolled-components.html
- "pure functions"

https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc
https://www.sitepoint.com/functional-programming-pure-functions/

faceyspacey

import React, { Component } from 'react'
import './a1.css'

import PairParent from './bonus/PairParent'

class Assignment1 extends Component {
  render() {
    return (
      <div>
        <section className="firstComponent">

faceyspacey

const MyFirstFunctionalComponent = (props) => {
   return (
      <div>
       {props.num + props.multiplier}
      </div>
   )
}


class MyFirstClassComponent extends React.Component {

faceyspacey

// src/getHeadlines.js
export default () => {
  // do stuff
}

// __tests__/myTest.js
import getHeadlines from '../src/getHeadlines'
jest.mock('../src/getHeadlines', () => (user, type) => ({ // notice that the mocked function is the return of an initial function
  data: [user, type, 'misc']
})

faceyspacey

new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify('production')
})