coryhouse

getPosts().then(posts => {
    console.log(posts.length);
});

async function getPosts() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    return response.json();
  } catch(error) {
    console.log(error);

coryhouse

import React, { Suspense } from "react";
import "./InlineAlert.scss";
import cx from "classnames";
import * as ReactIs from "react-is";

const allowedChildren = ["string", "span", "em", "b", "i", "strong"];

type InlineAlertProps = {
  /** Message to display */
  children: React.ReactNode;

coryhouse

export const schema = {
  type: "object",
  properties: {
    users: {
      type: "array",
      minItems: 3,
      maxItems: 5,
      items: {
        type: "object",
        properties: {

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

import React from "react";
import { getUsers } from "./services/userService";
import { useQuery } from "react-query";

export default function ReactQueryDemo() {
  const { data, isLoading, error } = useQuery("users", getUsers);
  if (isLoading) return "Loading...";
  if (error) return "Oops!";
  return data[0].username;
}

coryhouse

import React from "react";
import useFetch from "./useFetch";

export default function HookDemo() {
  const { data, loading, error } = useFetch("users");
  if (loading) return "Loading...";
  if (error) return "Oops!";
  return data[0].username;
}

coryhouse

import { useState, useEffect, useRef } from "react";

// This custom hook centralizes and streamlines handling of HTTP calls
export default function useFetch(url, init) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const prevInit = useRef();
  const prevUrl = useRef();

coryhouse

import React, { useState, useEffect } from "react";
import { getUsers } from "./services/userService";

export default function CentralDemo() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  useEffect(() => {
    getUsers()
      .then(json => {

coryhouse

export function getUsers() {
  return fetch(`${process.env.REACT_APP_API_BASE_URL}users`).then(response =>
    response.json()
  );
}

coryhouse

import React, { useState, useEffect } from "react";

export default function InlineDemo() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(`${process.env.REACT_APP_API_BASE_URL}users`)
      .then(response => {