Instantly share code, notes, and snippets.

Ryan Florence ryanflorence

View GitHub Profile
View playground.jsx
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>
View gist:f9f38bf25843a8c4c3579901699a202d
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
View gist:b4c52aedb58a4fc1e3aead6b647d6200
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
View foo.js
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 => {
View function-declaration.tsx
// 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>;
View exercise.js
////////////////////////////////////////////////////////////////////////////////
// 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
//
View ids.md

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"/>
View MiniCalendar.js
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={{
View ProcessingPurchase.js
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,
View SelectTickets.jsx
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) => {