coryhouse

[alias]
  co = checkout
  ec = config --global -e
  up = !git pull --rebase --prune $@ && git submodule update --init --recursive
  cob = checkout -b
  cm = !git add -A && git commit -m
  save = !git add -A && git commit -m 'SAVEPOINT'
  wip = !git add -u && git commit -m "WIP"
  undo = reset HEAD~1 --mixed
  amend = commit -a --amend

coryhouse

// Logic-less JSX via vars above
const Animal = ({ id, name, legCount, isFriendly }) => {
  const url = `url/animal/${id}`
  const legCountStr = toString(legCount) || '?'
  const friendliness = { true: 'Friendly', false: 'Unfriendly' }[isFriendly]
  const hasNotEnoughData = legCount === undefined && isFriendly === undefined

  return (
    <li>
      <a href={url}>{name}</a> - {legCountStr} legs

coryhouse

str // strings
<Cmp /> // components
<Cmp {...{ a, b, }} /> // instead of a={a} b={b}. yes, it's less performant

foo && <Cmp /> // shows if truthy
foo === somevalue && <Cmp /> // shows if foo is somevalue

!foo && <Cmp /> // shows if falsy
foo !== somevalue && <Cmp /> // shows if foo is not somevalue

coryhouse

import { render as r } from '../test-utils'
function render(ui, options) {
 const utils = r(ui, options)
 return {
   ...utils,
   username: utils.getByLabelText(/username/i),
   password: utils.getByLabelText(/password/i),
   login: utils.getByText(/login/i),
   successModal: () => utils.getByTestId('login-success')
  }

coryhouse

import { render as r } from 'react-testing-library'
import { createStore } from 'redux'
import { Provider as ReduxProvider } from 'react-redux'
import { LocationProvider, createHistory } from "@reach/router"
import { AuthenicationProvider, createAuth } from '../auth'
import { reducer } from '../state'
export function reducer(ui, {
  initialState = {},
  store = createStore(reducer, initialState),
  history = createHistory(),

coryhouse

Enhancements and changes

1. Upgraded to React 16.8, React Router 5, Babel 7, Webpack 4
2. Hooks
3. Optimistic delete example
4. Middleware coverage
5. Async/await coverage
6. Using json-server instead of homemade mock API
7. Centralized API proxy and utils
8. Immer coverage
9. Webpack-bundle-analyzer

coryhouse

{
  "newCourse": {
    "id": "",
    "watchHref": "",
    "title": "",
    "authorId": "",
    "length": "",
    "category": ""
  },
  "courses": [

coryhouse

import React, { Suspense } from "react";
import ReactDOM from "react-dom";
import ErrorBoundary from "./ErrorBoundary";
import "./index.css";
import App from "./App";
import registerServiceWorker from "./registerServiceWorker";
import { BrowserRouter as Router } from "react-router-dom";
import CssBaseline from "@material-ui/core/CssBaseline";
import MuiPickersUtilsProvider from "material-ui-pickers/utils/MuiPickersUtilsProvider";
import DateFnsUtils from "material-ui-pickers/utils/date-fns-utils";

coryhouse

npm install [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]

coryhouse

$ = jQuery = require('jquery');
var React = require('react');
var Home = require('./components/homePage');
var About = require('./components/about/aboutPage');

var App = React.createClass({
  render: function() {
    var Child;

    switch (this.props.route) {