Initial commit

Author: stevekinney

Diff for: .gitignore

@@ -0,0 +1,30 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

Diff for: README.md

@@ -0,0 +1 @@
+This is a starter template for [Learn Next.js](https://nextjs.org/learn).

Diff for: bin/generate

@@ -0,0 +1,4 @@
+#!/usr/bin/env bash
+
+rm content/*
+obsidian-export /Users/stevekinney/Library/Mobile\ Documents/iCloud\~md\~obsidian/Documents/React\ and\ TypeScript content

Diff for: components/content-layout.tsx

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+
+const ContentLayout = ({ children }: PropsWithChildren) => {
+  return (
+    <section className="p-8">
+      <div className="items-start gap-8 lg:flex lg:flex-row lg:place-content-around">
+        <div className="w-full mx-auto prose max-w-prose">{children}</div>
+      </div>
+    </section>
+  );
+};
+
+export default ContentLayout;

Diff for: components/footer.tsx

@@ -0,0 +1,44 @@
+import clsx from "clsx";
+import Link from "next/link";
+
+const FooterLink = ({
+  href,
+  site,
+  username,
+}: WithChildren & { href: string; site: string; username: string }) => (
+  <Link href={href}>
+    <a className="underline underline-offset-2">
+      <span className="hidden sm:inline">
+        <strong>{username}</strong> on{" "}
+      </span>
+      <span className="font-semibold sm:font-normal">{site}</span>
+    </a>
+  </Link>
+);
+
+const Footer = ({ className }: WithClassName) => (
+  <footer
+    className={clsx(
+      "sticky flex place-content-center gap-4 bg-slate-900 p-4 text-white",
+      className
+    )}
+  >
+    <FooterLink
+      href="https://twitter.com/stevekinney"
+      username="@stevekinney"
+      site="Twitter"
+    />
+    <FooterLink
+      href="https://github.com/stevekinney"
+      username="@stevekinney"
+      site="Github"
+    />
+    <FooterLink
+      href="https://frontendmasters.com/teachers/steve-kinney/"
+      username="Steve Kinney"
+      site="Frontend Masters"
+    />
+  </footer>
+);
+
+export default Footer;

Diff for: components/header.tsx

@@ -0,0 +1,22 @@
+import clsx from 'clsx';
+import WithLink from './with-link';
+
+const Header = ({ className }: WithClassName) => (
+  <header
+    className={clsx(
+      'bg-primary-50 p-4 text-center md:p-8 md:text-left',
+      className,
+    )}
+  >
+    <WithLink href="/">
+      <div className="flex items-center gap-4">
+        <h1 className="text-3xl font-light transition-all border-b-4 w-fit border-primary-500 hover:border-primary-300">
+          React && TypeScript
+        </h1>
+        <p>Version Two</p>
+      </div>
+    </WithLink>
+  </header>
+);
+
+export default Header;

Diff for: components/layout.tsx

@@ -0,0 +1,14 @@
+import Footer from "./footer";
+import Header from "./header";
+
+const Layout = ({ children }: WithChildren) => {
+  return (
+    <main className="w-full">
+      <Header className="drop-shadow-md" />
+      {children}
+      <Footer className="bottom-0 w-full" />
+    </main>
+  );
+};
+
+export default Layout;

Diff for: components/markdown.tsx

@@ -0,0 +1,27 @@
+import clsx from 'clsx';
+import ReactMarkdown from 'react-markdown';
+import { ReactMarkdownOptions } from 'react-markdown/lib/react-markdown';
+
+const codeBlockLanguage = /language-(\w+)/;
+
+const getCodeBlockLanguage = (className?: string) => {
+  const match = codeBlockLanguage.exec(clsx(className));
+  return match ? match[1] : null;
+};
+
+const components = {};
+
+const Markdown = ({ children, ...options }: ReactMarkdownOptions) => {
+  return (
+    <div className="content-index">
+      <ReactMarkdown
+        {...options}
+        components={{ ...components, ...options.components }}
+      >
+        {children}
+      </ReactMarkdown>
+    </div>
+  );
+};
+
+export default Markdown;

Diff for: components/with-link.tsx

@@ -0,0 +1,18 @@
+import Link from "next/link";
+
+const WithLink = ({
+  children,
+  href,
+  className,
+}: WithChildren & WithClassName & WithHref) => {
+  if (!href) return <>{children}</>;
+  return (
+    <Link href={href}>
+      <a href={href} className={className}>
+        {children}
+      </a>
+    </Link>
+  );
+};
+
+export default WithLink;

Diff for: content/Adding state to Accident Counter.md

@@ -0,0 +1,85 @@
+Let's quickly add some state to a simple little counter. For starters, this is basically the entire implementation.
+
+````tsx
+const Counter = () => {
+  return (
+    <section className="flex flex-col items-center w-2/3 gap-8 p-8 bg-white border-4 shadow-lg border-primary-500">
+      <h1>Days Since the Last Accident</h1>
+      <p className="text-6xl">0</p>
+      <div className="flex gap-2">
+        <button>➖ Decrement</button>
+        <button>🔁 Reset</button>
+        <button>➕ Increment</button>
+      </div>
+      <div>
+        <form onSubmit={(e) => e.preventDefault()}>
+          <input type="number" value={0} />
+          <button type="submit">Update Counter</button>
+        </form>
+      </div>
+    </section>
+  );
+};
+
+export default Counter;
+````
+
+This is nothing particularly special to see here. Adding some state can be done swiftly using the `useState` hook.
+
+````tsx
+const [count, setCount] = useState(0);
+````
+
+And then—yea—we'll add some state to our counter, just like every other modern React tutorial you've ever seen.
+
+````diff
+@@ -1,12 +1,16 @@
++import { useState } from 'react';
++
+ const Counter = () => {
++  const [count, setCount] = useState(0);
++
+   return (
+     <section className="flex flex-col items-center w-2/3 gap-8 p-8 bg-white border-4 shadow-lg border-primary-500">
+       <h1>Days Since the Last Accident</h1>
+-      <p className="text-6xl">0</p>
++      <p className="text-6xl">{count}</p>
+       <div className="flex gap-2">
+-        <button>➖ Decrement</button>
+-        <button>🔁 Reset</button>
+-        <button>➕ Increment</button>
++        <button onClick={() => setCount(count - 1)}>➖ Decrement</button>
++        <button onClick={() => setCount(0)}>🔁 Reset</button>
++        <button onClick={() => setCount(count + 1)}>➕ Increment</button>
+       </div>
+       <div>
+         <form onSubmit={(e) => e.preventDefault()}>
+````
+
+We'll worry about the form in a hot minute.
+
+## Taking a look at what TypeScript has figured out for us
+
+So, this is where it gets kind of cool. This file doesn't look like TypeScript, but it *is*.
+
+If you hover over `count`, you'll see that TypeScript was about to deduce that it's a number because you set its initial value to a number.
+
+````ts
+const count: number;
+````
+
+You can also see that it figured out that `setCount` should *only* take a number, which means that `count` will *always* be a number.
+
+````ts
+const setCount: React.Dispatch<React.SetStateAction<number>>;
+````
+
+Don't worry about all of that ceremony. `useState` is an abstraction over `useReducer`, which works by dispatching actions.
+
+If we try to break the rules, you'll see that TypeScript keeps us honest.
+
+![](_attachments/Pasted%20image%2020221107062434.png)
+
+This is *particulary* helpful when dealing with one of my least favorite parts of the browser: the fact that number inputs store their values as strings. 🙄
+
+Let's take this head on and try to [get that little form for manually setting the count working](useState,%20an%20exercise.md).

Diff for: content/Better typing for number inputs using template literals.md

@@ -0,0 +1 @@
+Remember in that filtering exercise that I was complaining about `<input type="number" />` components and how they give me strings? Using `Number()`, the `+` unary operator, and `parseInt()` all had different drawbacks, but newer versions of TypeScript allow us greater flexibility with template literals. We can now refactor that code as follows:

Diff for: content/Built-in helpers for typing children in React.md

@@ -0,0 +1,79 @@
+* `React.PropsWithChildren`
+* `React.ComponentPropsWithoutRef`
+* `FunctionalComponent<Props>` and React 18
+* `React.HTMLProps`
+
+Let's say you want to extend props for a given React component to take children. You can use `React.PropsWithChildren`.
+
+This might look something like this:
+
+````tsx
+type ButtonProps = React.PropsWithChildren<{
+  onClick: () => void;
+}>;
+
+const Button = ({ children, onClick }: ButtonProps) => {
+  return <button onClick={onClick}>{children}</button>;
+};
+````
+
+You also have `React.ComponentPropsWithoutRef`, which you could use as follows:
+
+````tsx
+type ButtonProps = React.ComponentPropsWithoutRef<'button'>;
+
+const Button = ({ children, onClick, type }: ButtonProps) => {
+  return (
+    <button onClick={onClick} type={type}>
+      {children}
+    </button>
+  );
+};
+````
+
+Now, `Button` has all of the some props as the native `<button>` element from the DOM.
+
+(**Note**: This no longer works in React 18.)
+
+You can also use a [`FunctionalComponent<Props>`](https://www.newline.co/@bespoyasov/how-to-define-props-with-children-in-react-typescript-app--56bd18be#using-functioncomponent-or-fc) to accomplish a similar goal:
+
+````tsx
+type ComponentProps = {
+  foo: string;
+};
+
+const Component: React.FunctionComponent<ComponentProps> = ({ foo }) => (
+  <span>{foo}</span>
+);
+````
+
+You can also extend a built-in HTML element, which supports children:
+
+````tsx
+export interface Props extends React.HTMLProps<HTMLDivElement> {
+  heading: string;
+}
+````
+
+Now, you can do something like this:
+
+````tsx
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+
+interface ComponentProps extends HTMLAttributes<HTMLDivElement> {
+  name: string;
+}
+
+const Component: React.FC<PropsWithChildren<ComponentProps>> = ({
+  name,
+  children,
+  ...rest
+}) => {
+  return (
+    <div>
+      <div {...rest}>{`Hello, ${name}!`}</div>
+      {children}
+    </div>
+  );
+};
+````