ryanflorence

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import { Router, Link, useParams } from "./router";

function Home() {
  return (
    <div>
      <p>
        Home <Link href="dashboard">Dash</Link>

ryanflorence

ReactRouter.md|86 col 5| Unexpected closing tag "form". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags

ryanflorence

ReactRouter.md|86 col 5| Unexpected closing tag "form". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags

ryanflorence

let pagesByLocationKey = {};

function ListPage(props) {
  const { key } = props.location
  const [page, setPage] = useState(pagesByLocationKey[key] ? pagesByLocationKey[key].page : 0)
  const [data, setData] = useState(pagesByLocationKey[key] ? pagesByLocationKey[key].data : null)

  useEffect(() => {
    if (!data) {
      fetchPage(page).then(data => {

ryanflorence

// how do I write this:
const Profile: React.FunctionComponent<ProfileProps> = ({ userId, navigate }) => {
  console.log(navigate);
  return <div>{userId}</div>;
}

// as this:
function Profile({ userId, navigate }) {
  console.log(navigate);
  return <div>{userId}</div>;

ryanflorence

////////////////////////////////////////////////////////////////////////////////
// Exercise:
//
// 1. Render a tab for each country with its name in the tab
// 2. Add some state to check against while rendering the tabs to
//    indicate which one is active (don't worry about click
//    handlers yet!)
// 3. Use that same state to decide which panel to render
// 4. Add click handlers to the tabs to change the state
//

ryanflorence

Accessibility, IDs, and Server Rendering in React

For better or for worse, many WAI-ARIA patterns depend on ID's to connect elements together.

For example (without ARIA):

<label for="first-name">First Name</label>
<input id="first-name"/>

ryanflorence

const MiniCalendar = ({ date }) => {
  const days = getSessionDaysOfWeek(date)
  return (
    <div css={{ display: "flex" }}>
      {["S", "M", "T", "W", "Th", "F", "S"].map((dayText, day) => {
        const isActive = day >= days.start && day <= days.end
        return (
          <div
            key={day}
            css={{

ryanflorence

import React, { useEffect } from "react"
import useFetch from "./useFetch"

export default function ProcessingPurchase({
  send,
  context: { workshopData, ticketsToPurchase, stripeToken }
}) {
  let [charge, error] = useFetch("/purchaseWorkshop", {
    workshopId: workshopData.id,
    ticketsToPurchase,

ryanflorence

import React, { useState, useMemo } from "react"
import { calculateTotals } from "./utils"

export default function SelectTickets({
  context: { workshopData, subscriberCode },
  send
}) {
  let initialTicketsToPurchase = useMemo(
    () =>
      workshopData.ticketTypes.reduce((ticketsToPurchase, type, index) => {