faceyspacey

Rudy Prefetching + Code-Splitting Strategy

We're gonna start by looking at how code splitting works, and build our understanding of the task from there

The Big Picture problem we solve

CODE SPLIT EVERYTHING (NOT JUST COMPONENTS) -- AND DO IT BEFORE YOU NEED IT

The big hidden idea here is that with RUC it's challenging, not perfectly performant, and non-obvious how to code split non-component things like reducers, thunks, etc.

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']
})