React (Web Framework) Reference

Kip Landergren

(Updated: )

My cheat sheet for React covering patterns, idioms, and helpful resources.

Contents

Patterns

Idioms

Conventions

Gotchas

App File Structure / Directory Structure

By feature “foo”:

./src/features/foo/fooSlice.js
./src/features/foo/Foo.js
./src/features/foo/Foo.module.css

By role:

./src/actions/
./src/components/
./src/containers/
./src/middleware/
./src/reducers/
./src/store

Custom Environment Variables

Prefix with REACT_APP_ and access via process.env.REACT_APP_MY_VAR. At build time React will swap them in. More info in the documentation on adding custom environment variables

Events

SyntheticEvent

Mimics portions of the native Event interface.

Selected attribute explanations:
DOMEventTarget target the element on which the event occurred
DOMEventTarget currentTarget the element the event handler has been attached to

JSX

Remember this example, straight from the docs, that JSX represents objects:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

is equivalent to:

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

Basic usage:

// creates a component referable as `Title`
const Title = (props) => {
  const title = props.title;

  // wrap in parens to reduce automatic semi-colon insertion errors
  return (
    <h2>
      {/* jsx comment style (1 of 2) */}
      {
        // jsx comment style (2 of 2)
      }
      {title} {/* `title` can be untrusted; React DOM escapes before rendering.
                  remember that curly braces wrap to-be-evaluated JavaScript
                  expressions, and are _not_ for control flow (like .erb files).
                */}
    </h2>
  );
}

// and how to use:
const MySection = (props) => {
  const title = props.title;
  const content = props.content;
  
  return (
    {/* HTML attributes need to be converted (most just to camelCase) */}
    <section
      className="my-section"
    >
      {/* note: comments, like HTML, cannot go inside a tag */}
      {/* non-HTML attributes are passed to the component as `props` */}
      <Title
        title={title}
      />
      {content}
    </section>
  );
}

Resources

The History of Render Props, Higher Order Components, and Mixins

FAQ

Why is the cursor jumping on my controlled component?

Stop updating state asynchronously. See here and here.

How can I tell what hooks changed?

The flamegraph will now display a message like: Hook 12 changed.

Where can I find what the hook numbers refer to? Why can’t I see hook numbers on the Components tab?

React Terminology

JSX
AKA “JavaScript XML”; an extension of the JavaScript language syntax to include XML-like tags
component
a small, isolated, and reusable piece of code; typically maintaining state; typically represents a description of what you want to see on the screen
component, functional component
components without state; only with a render method
component, higher order component
a function that takes a component and returns another component
element
lightweight description of what to render
hydrate
rendering markup with data server-side before sending to client
key
a unique identifier that allows React to determine which items have changed / added / removed
mounting
when an component is rendered to the browser DOM for the first time
props
short for “properties”; are read-only; considered “model” data
ref
a mutable reference
render prop
a function prop that a component uses to know what to render; the function prop does not need to be actually named render, render just refers to its purpose
state
considered “model” data
unmounting
when an component is removed from the browser DOM