View easy-universal-ssr.js
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);
View simple-server-render.js
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);
View concept.js
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({
View connectAdvanced.js
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
}
View Website.js
// 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.
View ReactNirvana1.js
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/
View Multiplier.js
import React, { Component } from 'react'
import './a1.css'
import PairParent from './bonus/PairParent'
class Assignment1 extends Component {
render() {
return (
<div>
<section className="firstComponent">
View MyFirstComponent.js
const MyFirstFunctionalComponent = (props) => {
return (
<div>
{props.num + props.multiplier}
</div>
)
}
class MyFirstClassComponent extends React.Component {
View jest-mocking.js
// 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']
})
View webpack-define-plugin.js
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})