JS Cheat Sheet for Peregrine

js-cheat-sheet.md

JS Cheat Sheet for Peregrine Programming

Make a string:

"some text";

Make a string with a variable embedded in it:

This is called a "template literal"

`some text and ${embedded} is embedded`;

Make a component

// you need to have this import for any component that has components in it
import { h } from "preact";

// Component name is capitalized
const Component = () => {
  return <h1>Hi</h1>;
};

Embed a variable into HTML/JSX

// you need to have this import for any component that has components in it
import { h } from "preact";

// Component name is capitalized
const Component = () => {
  const name = "caleb";
  // The curly brackets allow us to embed a value in HTML/JSX
  // There is not a $ before the { because that is only used in template literals (`)
  return <h1>Hi {name}</h1>;
};

Make a component with props

import { h } from "preact";

// You can define props as a separate interface
// You can't have multiple props interfaces in the same file,
// You'll have to call them different things if you have multiple
interface Props {
  // on the left is the prop name, on the right is the prop type
  name: string;
  // the ? means the prop is optional
  foobar?: number;
}

const Component = ({ name }: Props) => {
  return <h1>Hi</h1>;
};

Make a component with inline props

import { h } from "preact";

// Instead of defining a separate interface, you can define props inline
// The syntax within the {} is the same as with an interface
const Component = ({ name }: { name: string; foobar?: number }) => {
  return <h1>Hi</h1>;
};

Make a CSS block

import { h } from "preact";
// This import is required for css blocks
import { css } from "linaria";

// This CSS block is named based on where it is applied
// CSS blocks' names end with Style
const componentStyle = css`
  background: green;
`;

const Component = () => {
  return <h1 class={componentStyle}>Hi</h1>;
};

Fetch data

There are a lot of ways to do this. It depends on which data you want to fetch. All of the ways of fetching data involve a function that starts with use. Functions that start with use are called "Hook functions"

import { h } from "preact";

const Component = () => {
  // No matter what data you want to fetch, you should fetch it in the component
  // in the lines before the return statement
  const someData = usePromise(/* ... */);
  return <h1>Hello</h1>;
};

For fetching user info (including username, user first name, last name, etc):

const user = usePromise(() => getUser(userId), [userId]);

For fetching event info (event name, location, etc):

const event = useEventInfo(eventKey);

For fetching match info (match teams, scores, time, etc):

const match = useMatchInfo(eventKey, matchKey);

There are a lot more, these are just a few of the common ones

Render something only if the data has loaded

import { h } from "preact";

const Component = ({ matchKey: string }) => {
  const match = useMatchInfo(eventKey, matchKey);

  // Before match is loaded (when match is undefined), it will render nothing

  return <div>{match && <SomethingToRender match={match} />}</div>;
};

Render a spinner if the data hasn't loaded yet

This is called a ternary operator

import { h } from "preact";

const Component = ({ matchKey: string }) => {
  const match = useMatchInfo(eventKey, matchKey);

  // Before match is loaded (when match is undefined), it will render nothing

  return <div>{match ? <SomethingToRender match={match} /> : <Spinner />}</div>;
};